Tutorial 4: Understanding the bootstrap Grid System (Columns)

In Bootstrap by hfarazmLeave a Comment


Columns take your design and divide it into vertical groups, making it responsive. When they are created, gutters are also created. The gutters add 15px on each side of the column. Bootstrap divides a row into 12 columns.

Columns Layout

To divide the element into columns, add “col-SIZE-SPAN” in that element within the row div. The contents of the code are as follow:

  • col: Key word
  • Size: Specifies size w.r.t breakpoints
  • Span: Specifies the number of column

Size of Columns

Bootstrap provides 4 different column sizes based on breakpoints that are used for different screen sizes:

  • col-xs =  For extra small devices
  • col-sm = For small devices
  • col-md = For medium devices
  • col-lg =    For large devices

Note: Layout changes to full width on the change of the breakpoints.

Multiple Column Classes

Multiple column classes can be used within a single div to adjust the contents of webpage w.r.t to different breakpoints.

Offset columns:

Offset shifts content to the right side, leaving specified number of columns on left side of the webpage.

The following example shows multiple and offset column classes:


<!DOCTYPE html>
<meta name="description" content="Column-class-exp bt4">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using Column Classes</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


 <div class="container">

   <!-- ==== Using columns ==== -->
   <div class="row">
   <div class="col-sm-6 sg-col">
     <h3>6 column width </h3>
     <p>This content is occupying 6 column width for device size greater than or equal 768 pixels . It will change to single column layout if screen size is less than 768 </p>

   <div class="col-sm-6 sg-col">
     <h3>6 column width </h3>
     <p>This content is occupying 6 column width for device size greater or equal to than 768 pixels . It will change to single column layout if screen size is less than 768 </p>
   <!-- === Using Multiple Classes == -->
 <div class="row">
  <div class="col-md-4 col-lg-3 col-sm-6 mul-col">
      <h3>Using Multile Column classes</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cupiditate accusamus provident commodi cumque nostrum, quas laborum, hic molestias vitae deserunt quaerat libero ipsam ducimus! Ducimus quod, cumque tempore temporibus! <br> <br>
col-sm-6: Change layout to 2 columns when size ≥ 768 <br>
col-md-4: Change layout to 3 column when size reduces from 992px <br>
col-lg-3: Change layout to 4 columns when size is more than 1200px    
   <div class="clearfix"></div>
   <!-- === Using offset class == -->
   <div class="row">
<div class="col-xs-6 col-xs-offset-3">
  <h3>Offsetting Columns</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex rerum vel laboriosam officia enim, excepturi, eveniet dolorem nihil nemo minima quam aliquid libero expedita. Accusantium, beatae sunt corporis!</p>


<!-- Latest compiled and minified JavaScript -->
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->

Try it yourself..!!

Code Explanation:

Line 22,27:

  1. “col-sm-6” specifies that the content occupies 6 columns for device size >= 768 pixels and will change to single column if size < 768.
  2. sg-col” is the custom class for external CSS

Line 34: Multiple column classes are used.

  1. “col-sm-6” changes the layout to 2 columns (6*2 = 12), each of 6 column width for device size >= 768px.
  2. “col-md-4” changes the layout to 3 columns (3*4=12) , each of 4 column width for device size >= 992px.
  3. “col-lg-3” changes the layout to 4 columns (4*3=12) , each of  3 column width for device size >= 1200px.
  4. “col-mul” is for external CSS.

Line 44: Bootstrap helper class to remove styles of parent div.

Line 47: “col-xs-offset-3” offset 3 columns from left for device size < 750px and shifts contents to the right.


In this tutorial, we have discussed bootstrap columns classes, how to use multiple and offset column classes of bootstrap.

In the next tutorial, we will discuss bootstrap helping classes and will design our first bootstrap page.. See you next time.

[WpProQuiz 5]

Share this Post