Woohoo! A new Figma course has dropped! 🤩

🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Reordering and Offsetting Columns

7:08 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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

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 up

Related 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 up

You need to sign up for Treehouse in order to set up Workspace

Sign up