Grid system

Main elements of grid system:

  • Containers provide a means to center and horizontally pad your site’s contents.
  • Rows are wrappers for columns. In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Columns are used to place your content.

There are predefined classes for specifying the column width, or you can let the system assign the width.

The grid system is based on a flexible model. So you can use same classes for alignment.

1
2
3
<div class="container border">
<div class="row">
  
  <div class="col border">
   1
  </div>
  
  <div class="col border">
    2
  </div>
  
  <div class="col border">
    3
  </div>
</div>
</div>
1
2
3
<div class="container border">
<div class="row">

   <div class="col col-1 border">
     1
   </div>
   
    <div class="col col-2 border">
     2
    </div>
                
    <div class="col col-3 border">
    3
    </div>
</div>
</div>
css class description
container Defines a responsive pixel width container.
container-fluid Defines a container with width: 100% across all viewport and device sizes.
row Defines a row of columns.
row-col-{num} Specifies the number of columns in row. Useful for better render of your content and layout. Applies to a row element.
col Defines a column. By defualt the width of the container is evenly distributed across the columns.
col-number
col-{breakpoint}-{num}
Specifies the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use col-4.
col-{breakpoint}-auto Sets the width of the column based on the natural width of its content.
no-gutters Removes the gutters between columns. By default, a column has a 15px gutter on each side.