Bootstrap Grids

Bootstrap’s grid has allowed only 12 columns. We can define this group in the columns together to create a section. 12 columns are scale up the grids as the device or viewport size increase. These columns are also containing 15 pixels gaps between column content. If we remove the padding, then we use the rows(.row) which contain the negative margin.

Grid Classes Structure:

Bootstrap grid classes prefix are .col-xs-*(for phones), .col-sm-*(for tablets), .col-md-*(for desktops), .col-lg-*(for large screen). All grids are individually breaking points and the columns will automatically stack.

Grids Breaking points

  • DevicesGrid Behavior
  • Extra small devices Phones (<768px)Horizontal at all screens and small devices
  • Small devices Tablets (>768px)Collapsed to start, horizontal after 768px
  • Medium devices Desktops (>992px)Collapsed to start, horizontal after 992px
  • Large devices Desktops (>1200px)Collapsed to start, horizontal after 1200px

Examples:

//Grid example for extra small devices
<div class="row">
  <div class="col-xs-2”> Extra small devices Phones </div>
  <div class="col-xs-2”> Extra small devices Phones </div>
  <div class="col-xs-2”> Extra small devices Phones </div>
  <div class="col-xs-2”> Extra small devices Phones </div>
  <div class="col-xs-2”> Extra small devices Phones </div>
  <div class="col-xs-2”> Extra small devices Phones </div 
</div>


//Grid example for small devices
<div class="row">
  <div class="col-sm-3”> Small devices Tablets </div>
  <div class="col-sm-3”> Small devices Tablets </div>
  <div class="col-sm-3”> Small devices Tablets </div>
  <div class="col-sm-3”> Small devices Tablets </div>  
</div>


//Grid example for Medium devices Desktops
<div class="row">
  <div class="col-md-4”> Medium devices Desktops </div>
  <div class="col-md-4”> Medium devices Desktops </div>
  <div class="col-md-4”> Medium devices Desktops </div> 
</div>


//Grid example for Large devices Desktops
<div class="row">
  <div class="col-lg-6”> Large devices Desktops </div>
  <div class="col-lg-6”> Large devices Desktops </div> 
</div>

Unequal Columns Example:

If we need 2 columns for sidebar and right section on the webpage, then we will use the unequal columns combination. Check out the following example:

<div class="row">
  <div class="col-md-4”> Sidebar </div>
  <div class="col-md-8”> Right section </div> 
</div>

Nested Column

If you need nest section, this can do with the default grid, add a new .row and .col-sm-* column between existing .col-sm-* column.

<div class="row">
  <div class="col-sm-12">
    Level 1: Section

    <div class="row">
      <div class="col-md-4">
        Level 2: Leftsetion 
      </div>
      <div class="col-md-8">
        Level 2: Right section
      </div>
    </div>

  </div>
</div>

Leave a Comment.