what is grid ?

In this chapter, we will discuss about Bootstrap Grid System.

Whatis grid

as per Wikipedia 

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Bootstrap grid system provides an easy and powerful way to create responsive layouts of all shapes and sizes. It is built with flexbox with a mobile-first approach. Also, it is fully responsive and uses twelve column system (12 columns available per row) and six default responsive tiers.

Below is an example and an in-depth explanation of how the grid system comes together.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

In the above example, we have created three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered on the page with the parent .container.