Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Column Ordering and Offsetting6:21 with Guil Hernandez
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.
Bootstrap 4 has changed since this video was shot. In the alpha v6, the class names for pushing, pulling and offsetting columns has changed.
Pushing and pulling columns
col-lg-push-4 to push a column over 4 columns to the right you use
push-lg-4. Likewise to pull a column to the left 4 columns use
For this video, to push the first column 4 columns to the right and place it in the middle (on large breakpoints), use this code:
<div class="col-md-4 push-lg-4">
To pull the second column over 4 columns to the left side (on large breakpoints):
<div class="col-md-4 pull-lg-4">
The classnames for offsetting columns has also changed. Instead of
col-xl-offset-2 to move a column 2 units over on extra large screens you use
For this video, to offset the signup form at the bottom of the page so that it aligns with the right edge on extra large screens, use this code:
<div class="col-md-6 col-xl-5 offset-xl-2">
<!-- signup form --> <hr> <div class="row py-4 text-muted"> <div class="col-md-6"> <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-6"> <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 -->
Besides the set of pre-defined classes for creating grid columns,
Bootstrap includes options for reordering and offsetting columns and
responsive utility classes for showing and hiding content by device.
So you can easily swap the visual arrangement of columns
without affecting the source order using the column ordering classes.
So for example, at different breakpoints
I can make my first column switch places with the second column in the row or
have the third column switch places with the second column and so on.
This column ordering is done via the push and pull modifier classes.
The About column in my page contains the nice image of Portland and
the most important content in the row.
So I want to display it as the center column on large and extra large screens
while still appearing first on extra small, small, and medium screens.
Now we know that each column spans the width of four columns.
So, to rearrange the column order I can give the first column,
the class call large push four.
So this pushes the first column to the right by four column spaces.
Now I need to pull the second column left to the first position
by giving it the class col-lg-pull-4.
So now the About column appears first in the extra small, small, and medium range.
Then it displays as the center column in the large and extra large viewport ranges.
Perfect, so this is a great feature you can use if you want to structure your
HTML for SEO or accessibility first.
Then rearrange the content without ever editing the HTML.
Similar to the ordering classes you can use offset classes to move columns.
Offsets increase the left margin of a column to move it one or
several column spaces to the right.
You used an offset class in the previous section
to center the sign up form in the container.
Back in my HTML file, I'm going to add a new content section to my page by
pasting a code snippet right below the schedule heading and content.
You can copy this exact code snippet from the teacher's notes of this video.
So this new markup displays content about treehouse.
The conference organizers and
the same sign up form component we used earlier in the coming soon page.
And I'm using the grid to display two equal width columns
starting in the medium grid.
I also added horizontal rules and gave the row a padding class for spacing.
And I changed the text color with the text a muted
utility class we used earlier in the headings.
So don't worry.
There's nothing here you haven't seen or used yet.
So the two equal width columns look great in the medium and large breakpoint range.
But in the extra large range the text and input field are too wide for my liking.
So back in my HTML I'll add a class that resizes there width
two five columns in the extra-large grid.
So first will say call Excel five and I'll give the second column the same class.
So now we still have two equal width columns here and the extra large
break point but we set each column to span the width of five columns.
That gives us a total of ten columns in the row.
So now we have a two column gap here at the end of the row.
I want the second column to be flush with the right edge of the page.
So to move the column over two spaces to the right
in the extra large break point range I can use an offset class.
So I'll give my second column the class col-xl.
The offset class increases the left margin of the column by two column spaces in
the extra large grid.
So now the form column is aligned with the right edge of the page.
And the left margin adds an interesting touch of white space between the two
Finally, for a faster mobile friendly development, Bootstrap gives us
responsive utility classes to show and hide content at a given break point.
You can see the classes here in this chart, so classes that
end with down hide an element from the given breakpoint and down.
For example, hidden-md-down
hides an element starting in medium devices down to extra small devices.
Now the classes ending with up hide an element from the given breakpoint and up.
So the class hidden medium up hides an element starting in medium devices.
All the way up to extra large devices.
Now the image in my about column has an original size of 1024 by 436 pixels.
So it's best to hide this large image and extra small devices so
the content will load faster.
To hide the image in the extra small grid only, I can give the class hidden XS down.
So now we see the image in all but the extra small break point.
All right so our full stat conf website is starting to take shape.
Now that you understand how Bootstraps grid system works and
how to use the layout options and utility classes to layout web pages,
in the next part of this course I'll teach you how to add fun and
useful user interface components like nav bars drop down menus and model windows.
You need to sign up for Treehouse in order to download course files.Sign up