The Bootstrap grid system

In 2015 Google said "more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan". (http://adwords.blogspot.co.za/2015/05/building-for-next-moment.html) This means that chances are more people are browsing your website with a mobile device than a traditional desktop computer.

The Bootstrap grid system is mobile-first, which means it is designed to target devices with smaller displays and then grow as the display size increases. It uses a 12-column layout with different tiers for each media query range.

Bootstrap Grid components

Think of the Bootstrap grid system as similar to a traditional HTML table. It primarily consists of three components:

• Containers
• Rows
• Columns

Containers

Containers are required in order to use the Bootstrap grid system, and are used to wrap and center the page content and to specify a proper width for the layout. As the name implies, it acts as a container for the grid's rows and columns and is a standard <div> element with the class name.container, for fixed width or .container-fluid for full width. For example:

<div class="container"></div> 

The fixed width .container class name will change the max-width of the element at each responsive breakpoint, whereas the .container-fluid class name will always set the elements width to 100%.

Rows

Keeping the analogy of a table, with the Bootstrap grid system in mind, rows are similar to rows in a table. Each row can consist of up to 12 columns and only columns are allowed to contain content. A row is a simple <div> element with a class name of .row inside a <div> element with a .container class name or .container-fluid. An example of a simple row inside a container looks as follows:

<div class="container"> 
    <div class="row"> 
    </div> 
</div> 

Columns

Columns in the Bootstrap Grid are used to divide a row in defined sections, and a row cannot have more than 12 columns. Columns sizes have five tiers, which are used for sizing depending on the device's screen size:

• Extra large
• Large
• Medium
• Small
• Extra small

The five tiers are used to create a responsive breakpoint, which in turn is used to specify the layout for different device sizes. The following table explains the different tiers:

As mentioned earlier, a Bootstrap row can be divided into 12 columns. When laying out your webpage, keep in mind that all columns combined should be a total of 12. To illustrate this, consider the following HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3" style="background-color:green;"> 
            <h3>green</h3> 
        </div> 
        <div class="col-md-6" style="background-color:red;"> 
            <h3>red</h3> 
        </div> 
        <div class="col-md-3" style="background-color:blue;"> 
            <h3>blue</h3> 
        </div> 
    </div> 
</div> 

In the preceding code, we have a container <div> element with one child row <div> element. The row div in turn has three columns. You will notice that two of the columns have a class name of .col-md-3 and one of the columns has a class name of .col-md-6. Combined, they add up to 12.

The preceding code will work well on all medium devices and higher. To preserve the preceding layout on devices with smaller resolutions, you'll need to combine the various CSS grid classes. For example, to allow our layout to work on tablets, phones, medium and large-sized desktop displays, change the HTML to the following:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"    
     style="background-color:green;"> 
            <h3>green</h3> 
        </div> 
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"           
         style="background-color:red;"> 
            <h3>red</h3> 
        </div> 
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"           
         style="background-color:blue;"> 
            <h3>blue</h3> 
        </div> 
    </div> 
</div> 

By adding the .col-xs-* and .col-sm-* class names to the div elements, we'll ensure that our layout will appear the same in a wide range of device resolutions.