Bootstrap 4 Grid System

Bootstrap 4 Grid System

Learn how to use Bootstrap Grid System to create website layout 

Bootstrap 4 Grid System supports a mobile first grid system to create grid layout for various sizes and viewports. The Grid System provides 12 equal sized column layout and has multiple sizes based on each media query range.

Bootstrap 4 Grid System:

A Grid system comprises of three Major Components : ContainersRows and Columns Containers : Are created using two class .container and .container-fluid for fixed width and full width containers respectively. Row : Rows are Horizontal groups of columns, all columns must be within a row to ensure they are lined up properly. Columns : Column classes are used to denote the number of columns used out the maximum possible 12. 

Eg : To create 4 equal sized columns use class .col-sm-3 , i.e 3*4=12(max no of columns) There are five grid tiers for each of the five responsive break points:

  • xs(extra small)
  • sm(small)
  • md(medium)
  • xl(extra large)

All Content should be placed within the columns only, and only columns should be immediate children of rows. The Size of Column grid is set by specifying the number of columns you wish to span based put the maximum possible 12.

Syntax : Basic Layout Structure

<div class="container">  <!-- container -->

   <div class="row">   <!-- row  -->
        <div class="col-*-*"></div>   <!-- column -->
   </div>
   
   <div class="row"> <!-- row -->
        <div class="col-*-*"></div> <!-- column -->
		<div class="col-*-*"></div> <!-- column -->
   </div>
   
   <div class="row"> <!-- row -->
        <div class="col-*-*"></div>  <!-- column -->
   </div>   

</div>

Example: Bootstrap 4 Grid System

<div class="container">
  <div class="row">
    <div class="col-sm-4">  <!-- .col-sm-4 -->
      One of three columns
    </div>
    <div class="col-sm-4">   <!-- .col-sm-4 -->
      One of three columns
    </div>
    <div class="col-sm-4">   <!-- .col-sm-4 -->
      One of three columns
    </div>
  </div>
</div>

Bootstrap 4 Grid System : Options

 

 

 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman