Let us understand bootstrap's grid system, this will help us to format layouts and content in our website, lets see what I have written about the bootstrap grid, before that lets learn the concept of grids and how they are used.

What is Bootstrap Grid system?

Bootstrap grids are use for responsive layouts. Bootstrap grids are a collections of rows and columns, if you are used with tables and excel formats you can relate to grid system very easily, it will help us make responsive layout which will work on every platform(devices), Every browser today accepts bootstrap.

Bootstrap grid system allows us to make 12 columns across the page and if you don't want to use all 12 column you can use with your choice in your grid system.

Let's understand bootstrap grid classes

Devices	Classes	Screen
Extra small device	.col-	Screen width less than 576px
Small devices	.col-sm-	Screen width equal to or greater than 576px
Medium devices	.col-md-	Screen width equal to or greater than 768px
Large devices	.col-lg-	Screen width equal to or greater than 992px
Extra large	.col-xl-	Screen width equal to or greater than 1200px

Here is the basic example of bootstrap grid

    < div class="container">
      < div class="row">
        < div class="col">My first bootstrap grid page!
        </div>
  </div>
</div>

Here you can see I used .container class for extra responsive and .row class for making column.
Its very important to use row class before using columns .

So using bootstrap grid system you can easily make you website responsive. Don't forget to add container bacause container is very important in grid system.

---