Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Bootstrap includes options for reordering and offsetting columns and responsive utility classes for showing and hiding content by device. You can easily swap the visual arrangement of columns without affecting the source order.
Code snippets
<!-- signup form -->
<hr>
<div class="row py-4 text-muted">
<div class="col-md">
<p><strong>About Treehouse</strong></p>
<p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
</div>
<div class="col-md">
<p><strong>Stay up-to-date on Full Stack Conf</strong></p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Sign up</button>
</span>
</div>
</div>
</div>
<hr><!-- /signup form -->
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Besides the set of predefined classes for
creating grid columns,
0:00
Bootstrap includes options for aligning,
reordering and offsetting columns, and
0:04
responsive utility classes for
showing and hiding contents by device.
0:08
So you can easily swap the visual
arrangement of columns
0:13
without affecting the source order
using reordering classes, for example.
0:16
And the classes are responsive, so
you can set the order by break point.
0:21
For example, at different break points,
0:25
I can make the first column switch
places with the second column, or
0:27
have the third column switch places
with the second column and so on.
0:32
This column ordering is
done via the order class.
0:36
So, the About column in my page
contains the image of Portland, and
0:41
probably the most important
content in the row, so
0:46
I want to display it as the center
column on large and extra large screens,
0:48
while still appearing first on extra
small, small, and medium screens.
0:54
So to rearrange the column order and
the large break point and
0:58
up, I'll give each column an order class.
1:03
So first, I'll give this second
1:06
column a class order-lg-1.
1:11
And this will reorder the column
to the first position in the row.
1:17
But because of how Flexbox ordering works,
we must also specify the order of
1:21
sibling columns, otherwise the column
order will not display as expected.
1:25
So now, I need to set
the first column to the second
1:29
position by giving it the class order-lg-2
1:34
And keep the third column in the third
position with the class order-lg-3.
1:41
I'll give this a Save,
refresh the browser, and
1:51
we can see that the About
column appears first, and
1:55
at the top in the extra small,
small, and medium ranges.
2:00
Then it displays as the center column in
the large and extra large viewport range.
2:06
Perfect.
2:10
So this is a great feature you can use if
you want to structure your HTML for SEO or
2:11
accessibility first, then rearrange
the content without ever editing the HTML.
2:16
Similar to the reordering classes, you
can use offset classes to move columns.
2:22
These classes set the left or
right margin of a column to auto,
2:28
which forces sibling columns
away from one another.
2:32
You used the mx auto offset class in
the previous section to center the sign up
2:35
form in the container, so we'll use
a similar offset class for our site.
2:39
First, I'm going to add a new
content section to my page
2:44
by pasting a code snippet right
below the schedule heading and
2:47
content, and
just above the closing container tag.
2:52
You can copy this exact code snippet
from the teacher's notes of this video.
2:56
This new markup displays content about
Treehouse, the conference organizers,
3:01
and the same sign up form component we
used earlier in the coming soon page.
3:06
In the code, I'm using the grid to
display two equal width columns,
3:11
starting in the medium grid.
3:16
I also added horizontal rules, and
gave the row a padding class for spacing.
3:18
And I changed the text color with
3:25
the text-muted utility class we
used earlier in the headings.
3:27
So don’t worry, there’s nothing
here you haven’t seen or used yet.
3:31
Now, the two equal width columns
look great in the medium and
3:35
large breakpoint range.
3:40
But in the extra large range, the text and
input field are too wide for my liking.
3:42
So I’ll add a class that resizes
their width to five columns
3:48
in the extra large grid.
3:52
So, I'll give the first
column the class col-xl-5,
3:55
and I'll give the second
column the same class.
4:00
So, we still have two equal width columns,
and the extra large break point.
4:08
But we set each column to span
the width of five columns.
4:12
That gives us a total of 10 columns
in the row out of the possible 12.
4:17
So now, we have a two column
gap at the end of the row.
4:21
And I want this second column to be flush
with the right edge of the container.
4:25
So to move the column over to the right
edge, I can use the offset class
4:30
ml-auto, which stands for
margin left auto.
4:36
And because of how Flexbox works,
setting its left margin to auto
4:43
automatically inserts the extra space
between the first and second column.
4:47
And as a result,
it pushes into a different position.
4:52
So now, the form column is aligned
with the right edge of the container,
4:54
adding an interesting touch of white
space between the two columns.
4:58
Finally, for faster, mobile friendly
development, Bootstrap gives us responsive
5:03
display utility classes to show and
hide content at a given break point.
5:08
So back in the docs,
click Utilities> Display,
5:12
and you can see the classes here
in the Common display values list.
5:17
And all the responsive
variations right below.
5:21
You'll notice how the classes
are named after many of the values
5:24
the CSS display property accepts.
5:28
For example, d-inline,
inline-block, block, even flex.
5:30
So the image in the about column has
an original size of 1024 by 436 pixels.
5:37
So it might be best to hide
this large image in extra small
5:43
devices to display the content faster,
since the device won't have to wait for
5:48
the image to download before displaying
the main contents of the page.
5:53
The class d-none hides content
5:56
in the extra small grid and
up by setting its display value to none.
6:01
So let's go back to our mark-up and
6:05
scroll up to the first column
where we have our image.
6:08
And in the class attribute,
we'll add the class d-none.
6:13
So now, the image disappears.
6:21
But to bring the image back in
the small grid all the way up to
6:23
the extra large grid,
I'll set the image's display value
6:27
to block in the small grid,
with the class d-sm-block.
6:32
So now, we see the image in all but
the extra small breakpoint.
6:40
Good.
6:45
All right, so our Full Stack Conf
website is starting to take shape.
6:49
Now that you understand how
Bootstrap's grid system works, and
6:53
how to use the layout options and
utility classes to layout web pages,
6:56
in the next part of this course
I'll teach you how to add fun and
7:00
useful user interface components like nav
bars, drop down menus, and modal windows.
7:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up