Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Matthew Francis
Matthew Francis
6,967 Points
Posted by Matthew Francis
Matthew Francis
6,967 Points

Bootstrap 4 - Understanding grid system

I'm having trouble in understanding somethiing like this:

<body class="container my-5">

  <div class="row">
    <div class="col-sm-4">
      1 of 3
    </div>
    <div class="col-md-4">
      2 of 3
    </div>
    <div class="col-lg-4">
      3 of 3
    </div>
  </div>

I don't get what it's implying, all three divs are separated equally in a big screen, but II know that when you reduce the screen size col-lg-4 gets moved to the next line first, then md-4. I sort of have an idea on what's happening, but could someone clarify what's the significance of sm/md/lg here and what's happening?

1 Answer

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

The sm/md/lg refers to the breakpoint, where sm is 576px, md is 768px, and lg is 992px, and the number indicates the number of columns to span. So...

.col-sm-4 means that element will be full width up to 576px, then it will take up 4 columns over 576px .col-md-4 means that element will be full width up to 768px, then it will take up 4 columns over 768px .col-lg-4 means that element will be full width up to 992px, then it will take up 4 columns over 992px

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

This is probably obvious but to add to Adam's answer these are all preset values in bootstrap's core CSS that you can change...which would in turn change how and when these column adjust.