1. Bootstrap grid system are used for creating page layout using series of rows and columns.
2. It allow maximum 12 columns across the page.
3. First class we use in grid system is .container. All rows and columns are placed inside container. Container class is used for proper alignment and padding.
4. Then we used either .row class or .col-*-* to create rows and columns.
5. For col-*-*, we have 4 options:

• .col-xs-  It is used for extra small devices phones(<768px)
• .col-sm-  It is used for small devices tablets (≥768px)
• .col-md- It is used for medium devices Desktops (≥992px)
•  .col-lg- It is used for large devices Desktops (≥1200px)

Basic Bootstrap grid structure:

<div class = "container">
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
     <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
	    <div class = "col-*-*"></div>
   </div>
	
</div>

<div class = "container">
   ....
</div>

Example:

The following example will show how to create columns layout for small, medium and large devices.

<div class="container">
    <!--Row with three equal columns-->
    <div class="row">
        <div class="col-sm-4"><!--Column 1 left--></div>
        <div class="col-sm-4"><!--Column 2 middle--></div>
		 <div class="col-sm-4"><!--Column 3 right--></div>
    </div>
    
    <!--Row with four equal columns -->
    <div class="row">
        <div class="col-sm-3"><!--Column 1--></div>
        <div class="col-sm-3"><!--Column 2--></div>
		<div class="col-sm-3"><!--Column 3--></div>
        <div class="col-sm-3"><!--Column 4--></div>
    </div>
  
</div>

Hope, this will help you. Thanks