Explain the basic structure of the Bootstrap Grid
Bootstrap grid is a very powerful tool that makes developing websites easier. It is made with flexbox hence fully responsive and also adjusts the items in the container according to the device width. The container is a wrapping element that wraps all other items and content on the web page. CSS requires this wrapping element to make the grid work properly. The .container class is the class that we usually use while making use of bootstrap in our code as it also provides some additional options like setting the alignment to the centre and horizontally padding the content.
The bootstrap grid has 12 columns present it, although it is not necessary to make use of all the columns, the sum must not go beyond 12. They can also be merged to make wider columns as per the preference.
The .row and .col classes can be used to create and manipulate the rows and columns of the grid respectively.
On basis of the device or browser’s width, the bootstrap grid system has the following five classes:
For small devices
- col: It has the browser’s width of less than 576px.
- col-sm: It has the browser’s width equal to or greater than 576px.
For medium devices
- col-md: It has the browser’s width equal to or greater than 768px.
For large and extra-large devices
- col-lg: It has a screen width equal to or greater than 992px.
- col-xl: It has a screen width equal to or greater than 1200px
Note: Here, the sm, md, lg, and xl denote the device sizes, i.e. small, medium, large and extra-large.
<div class="container"> <div class="row"> <div class="col-lg"> column-1 </div> <div class="col-lg"> Column-2 </div> </div> </div>
This will create 2 centre-aligned columns of equal widths. The class container wraps all the rows, columns, and content of the grid. The class row is used to create a row and the class col-lg denotes the device width is large.
Example: Creating 3 equal columns of equal width.
As you can see in the output, 3 columns of equal widths are created across the web page and column widths are adjusted according to the browser’s width making it responsive.