Bootstrap 3 Grid system

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 sm, md, and lg.

Grid Size

You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ 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‘.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s