cascades up grid definition
The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.
For example, let’s say you want a site that has:
- 1 column on extra small devices
- 2 columns on small AND medium devices(6 6….)
- 4 columns on large devices(3 3 3 3…)
Since the grid system now cascades up from mobile devices, this is how this code will look.
<div class="row"> <div class="col-sm-6 col-lg-3"> This is part of our grid. </div> <div class="col-sm-6 col-lg-3"> This is part of our grid. </div> <div class="col-sm-6 col-lg-3"> This is part of our grid. </div> <div class="col-sm-6 col-lg-3"> This is part of our grid. </div> </div>
We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at
sm, then it will be that grid size for
You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.
||Extra Small||Phones Less than 768px|
||Small Devices||Tablets 768px and Up|
||Medium Devices||Desktops 992px and Up|
||Large Devices||Large Desktops 1200px and Up|
The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.
From here where provides more example for things like make certain content only viewable in lg using ‘visible-lg‘.