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 sets the alignment to the center and horizontally padding the content.
The bootstrap grid has 12 columns present in 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
The .row and .col class can be used to create and manipulate the rows and columns of the grid respectively.
On basis of device or browser’s width, the bootstrap grid system has the following five classes –
- For small devices
- col: It having the browser’s width less than 576px.
- col-sm: It having the browser’s width equal to or greater than 576px.
- For medium devices
- col-md: It having the browser’s width equal to or greater than 768px.
- For large and extra-large devices
- col-lg: It having screen width equal to or greater than 992px.
- col-xl: It having 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 center-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 columns widths are adjusting according to the browser’s width making it responsive.