A grid is an arrangement which is separated into div sections. This is an extremely helpful strategy to oversee HTML format and clients can make easily. To make organised grids and organized content , Bootstrap introduces responsive grid system which is the fastest and most straightforward path that allows up to 12 sections over the page. It incorporates predefined grid classes for making grid layouts for different sorts of gadgets, similar to mobile phones, tablets, desktop, etc.

The Bootstrap grid system has four classes: 

To create grid system you must follow follwing rules:- 

• Rows must be set inside a .container  or .container-fluid
• Utilize rows to make horizontal groups of columns.
• Content should be placed inside columns.
• Predefined classes like .row and .col-sm-4 are accessible for rapidly making grid layouts
• Columns make  gaps between column content through padding. That padding is balanced in lines for the first and last column by means of negative margin on .rows
• Grid columns are made by indicating the quantity of 12 accessible sections you wish to traverse. For instance, three equivalent sections would utilize three .col-sm-4

Structure of Bootstrap Grid Layout :-

Example :- 

<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>