Understanding Bootstrap

Grid System

Let’s start talking about the Grid System, oh the Grid, as a matter of fact, there are four Grid Systems in this new version of Bootstrap, each works exactly the same, being differentiated by the screen size width at which they operate.

Enabling the Grid

In order for the Grid System to work properly and also to ensure proper rendering and touch zooming, add the viewport meta tag to your document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Different Width Grids

There are four Grid Systems in this new version of the framework, with the width of the viewport being the parameter that differentiates them. The widths that set the frontiers between one and another are as follows:

  • Extra small devices ~ Phones (< 768px)
  • Small devices ~ Tablets (>= 768px)
  • Medium devices ~ Desktops (>= 992px)
  • Large devices ~ Desktops (>= 1200px)

And each of the different supported viewports have a particular class to address it, as follows:

  • col-xs- ~ Extra small devices
  • col-sm- ~ Small devices
  • col-md- ~ Medium devices
  • col-lg- ~ Large devices

To make use of the Grid System you’d need a container element, with a class "container", and inside a second container with a class "row". Notice how in both cases the “fluid” suffix has disappeared, this in contrast with Bootstrap 2. And inside the second container you’d place your columns.

<div class="container">
   <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-6">col-xs-6</div>
   </div>
</div>
This new version of Bootstrap comes with a Mobile First approach, what this means is that the columns with a class suffixed with an "xs" are always going to be floated horizontally, no matter the viewport size. If you were to say, use columns prefixed by an "md" and the viewport happened to be less than 992px wide (even 991px).

The gutter

The gutter is applies to the following elements

  • .row
  • .col-xs-3, .col-xs-6, etc.

If your gutter is 30px, it adds a padding-left:5px and a padding-right:5px to .col-xs-3 for example.

Some basic rules

  • You never need another container inside of a container. Never.
  • Never use a row outside a container, it won’t work.

Learning Resources

Post A Comment

Anti-Spam Quiz: