Skip to content

Try our new Crash Courses!

Become a member using the button below to hide this banner and gain access to our new Crash Courses.

Using multiple column classes – Bootstrap

Demo

For the best viewing experience, click the Edit on CodePen button in the upper righthand corner to open up the Pen in a new tab.

Summary

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">col-12 col-md-8</div>
    <div class="col-6 col-md-4">col-6 col-md-4</div>
  </div>
</div>

Details

In the example above, you can see that multiple column classes are being used on individual div elements. This allows you to achieve more specific layouts at different screen sizes.

In this example, the first column starts out taking up two-thirds of the row when it’s above the 768px breakpoint because of the col-md-8 class. Once the window width is below that breakpoint, it takes up the entire row because of the col-12 class.

The second column only takes up one-third of the row above the 768px breakpoint because of the col-md-4 class. Once the width of the window is below that breakpoint, it gets bumped a row and takes up only half of the second row because of the col-6 class. (Technically, there’s only one row div, but since the first column is taking up the whole width, it essentially creates two rows on smaller windows.)

Desktop View
Mobile View

Note the order that the classes were applied to the element. When adding multiple column classes to an element, make sure you list them in order from smallest breakpoint to largest breakpoint (i.e., col-* first, then col-sm-*, col-md-*, etc.).

Exercises

Recreate the HTML code from the Demo section in your index.html file.

References

Mix and match | Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Grid System