How to Bootstrap- Responsive Grid System

The bootstrap responsive grid system is an easy way to create responsive web pages. Bootstrap 3 includes the mobile first fluid grid system that appropriately scales up to 12 columns as with viewport size increases.

Bootstrap 3 includes predefined grid classes for making grid layouts for various devices. The .col-xs-* class used to create grid columns for extra small devices. The .col-sm-* class used for small screen devices, the .col-md-* class used for medium size devices and the .col-lg-* for large screen devices. The following table summarizes some of the key features of the new grid system.

The following table shows you the features of the responsive grid system.

Features Extra small devices Small devices Medium devices Large devices 
Max container widthNone (auto)750px970px1170px
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
Max column widthAuto60px78px95px
Gutter width30px30px30px30px

 

Responsive Rows and Columns

The grid consists of rows and columns. Rows are the vertical alignment in the responsive grid system. When we create a row, it takes up the entire width of the element include in it. Row act like a new line in your page layout.

Columns are the horizontal alignment in the responsive grid system. Columns are the direct children of a row and all content should go inside columns. If you Place content directly in a row will break the responsive layout.

Each Row is divided horizontally into 12 equal columns. You have to specify the number of columns when you place columns inside a row by adding a specific class name. Generally, you can use .col-md-columnCount, where columnCount can be 1 to 12 and md for the desktop.

Bootstrap Example
     <!-- A Responsive row with full width column -->
     <div class="row">
         <div class="col-md-12">Full width</div>
     </div>

     <!-- A Responsive row with unequal column width -->
     <div class="row">
         <div class="col-md-3">3 Unit Width</div>
         <div class="col-md-3">3 unit width</div>
         <div class="col-md-6">6 unit width</div>
     </div>

 

Columns have 15px left and right padding to properly spaced out content.

 

Responsive Column Offset

You can create grid columns with left margin using the offset classes. You can increase or decrease the left margin by specified number of columns count. The class .col-sm-offset-3 with .col-sm-9 will add three columns left margin from its original position for 9 unit column. The following code will demonstrate offset class.

Bootstrap Example
    <!-- Offset class example -->
    <div class="row">

        <!-- The col-sm-offset-3 add will&nbsp;add three columns left margin from its original
             position for 9 unit column -->        
        <div class="col-sm-9 col-sm-offset-3">
             
        </div>

    </div>

 

The responsive grid columns are nestable, so you can add rows and columns inside an existing column. The code for placing the rows and columns will be the same.

You can use the clearfix class is used if you want to move a column to new line forcefully.

 

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...