< Bootstrap Tutorial

Bootstrap grid system

← Previous Next →


Bootstrap Grid System

Bootstrap grid system provides the quick and easy way to create responsive website layouts. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens like mobile devices, tablets, and then “expands” components and grids for larger screens such as laptops, desktops.

Mobile First Strategy

  • Content - Determine what is important
  • Layout - Design to smaller widths first. Base CSS address mobile device first; media queries address for tablet, desktops.
  • Progressive Enhancement - Add elements as screen size increases.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within the columns, and only columns may be the immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

The key features of the Bootstrap Grid system are summarised in the following table:

Example of a Bootstrap Grid

The following example shows how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-sm-6"><!--Column left--></div>
        <div class="col-sm-6"><!--Column right--></div>
    </div>
    
    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-sm-4"><!--Column left--></div>
        <div class="col-sm-8"><!--Column right--></div>
    </div>
    
    <!--Row with two columns divided in 1:3 ratio-->
    <div class="row">
        <div class="col-sm-3"><!--Column left--></div>
        <div class="col-sm-9"><!--Column right--></div>
    </div>
</div>

 

← Previous Next →