Bootstrap Grid System

 Bootstrap Grid System  

 The grid system is an internal part of the Bootstrap framework. We will not be able to create Responsive website / application without properly understanding Bootstrap's grid system. By responsive means , there is an application that works and looks perfect in devices of all sizes.

 What is Bootstrap grid system?  

 The bootstrap grid system consists of parallel rows of horizontal lines and columns as vertical lines. When these rows and columns meet, they create a grid, which can be used to fill in some of the content on our webpage.

 One of the biggest benefits of using the bootstrap grid system is that it is responsive. Like HTML tables, Bootstrap's grid system is flexible and adjusts itself well to the As well as smaller screens. The size of the grid in the bootstrap is not fixed. They change accordingly The screen size of the device. Therefore, the material is rearranged according to the available space.

There are several different types of bootstrap classes for different size devices:

Classes	Description
col-*	classes to create grid columns for extra small devices mobile phones in portrait mode
col-sm-*	classes to create grid columns for small screen devices like mobile phone in landscape mode
col-xs-*	classes for medium screen devices have a screen size less than 768 px.
col-md-*	classes for medium screen devices like tablets whoes devices have a screen size less than 1200 px and larger than and equal to 992 px
col-lg-*	classes for large devices like desktops whoes screen size less than 1200 px and larger than and equal to 992 px
col-xl-*	These devices have a screen size larger than 1200 px

  Grid System  

 We need to create a container before filling any content in the webpage. This All webpage content will be used to wrap and center the browser screen.

  There are two different container classes in Bootstrap:
   1) Container
   2) Container-Fluid
  The first category, Container has a fixed width and is centered in the browser window.
  Container-Fluid is a second class full-width container. It extends from the left edge On the right edge of the browser window.