Getting Started with Bootstraps Grid System

I’m the front-end specialist on a team of Rails developers. The team gets around with HTML/CSS well, but they aren’t as fluent in putting together a responsive webpage as they are writing database queries. This is a very quick overview to help them construct a simple responsive web page using the Bootstrap 3 grid.

The Bootstrap 3 grid is significantly more complex than its predecessor. The update gives a developer a lot more flexibility, but it sacrifices a lot of simplicity. While the new syntax may be intimidating, it’s fairly easy to figure it out. Here are a four hints to get you started:

1. The grid system consists of container, row, and column classes.
The container gives your page its width. The row ensures that your columns don’t collapse in on themselves. And columns let you position your content. In many cases, you want to have only one container on the page. You generally want to have a row for each set of columns that add up to 12. And you generally want a row of columns to equal 12 (e.g. col-sm-4, .col-sm-4, .col-sm-4 or .col-sm-12).

2. Stick with a single column class.
The different columns, .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* cause the most confusion. Just default to .col-sm-* or .col-md-*. Bootstrap allows you to do some cool stuff when mixing and matching the different column classes, but it’s rarely needed.

3. Don’t customize your grid classes.
The Bootstrap grid can be a reliable tool that helps you quickly structure a responsive page. Don’t try to add extra styles to your container, row, or columns because it often backfires once you start resizing your browser. It’s always best to add your styles to the elements within your columns.

4. Understand the clearfix
The grid works by floating columns within a row and I’ve found that floats can be tricky for many. If you float a block-level element like a div, it will lose it’s 100% width and elements lower on the page will collapse in on you. The row class makes sure that doesn’t happen by adding something called a clearfix. The following three classes ensure that your grid system behaves as you’d expect.

These four items cover some basics that I’ve found cause the most confusion. I hope it can help you better understand how to get started with Bootstraps grid system. You can learn more by reading Bootstrap's documentation.


Jared
Dec. 24 2014