In this video, we will discuss what is Bootstrap Grid System and how docs it works using implementation.

Bootstrap Grid System is a series of containers, rows, and columns to design the layout and alignment of the content. It is completely responsive. Grid can be created using rows and columns where each row can have a maximum of 12 columns. You can use each column individually or merge them together for wider columns. We will use .container, .row, and .col class to create a grid system.

Components of Grid System:

1) Containers: Bootstrap requires a container element to wrap site contents in a grid system. The word container is used to contain the row elements and row elements containing the column elements. The .container class is used to create the container component.
   
2) Rows: Rows must be placed within the container or container-fluid for proper alignment and padding. Rows are used to create horizontal groups of columns. The .row class is used to create the row of the grid component.
   
3) Columns: Grid columns are created by specifying the number of twelve available columns you wish to span. The .col class is used to create the column component of the grid system.

Grid Classes: Bootstrap grid system contains five classes that are listed below:

a) col-* - It is used for extra small screen devices (screen width less than 576px).
b) .col-sm-* - It is used for small screen devices (screen width greater than or equal to 576px).
c) .col-md-* - It is used for medium screen size devices (screen width greater than or equal to 768px).
d) .col-lg-* - It is used for large screen size devices (screen width greater than or equal to 992px).
e) .col-xl-* - It is used for xlarge screen size devices (screen width equal to or greater than 1200px).

Grid System in Bootstrap: https://www.geeksforgeeks.org/bootstrap-4-grid-system/