What Is Bootstrap Grid System?

[dropcap]B[/dropcap]ootstrap includes a responsive, mobile first fluid grid system that allows up to 12 columns across the web page. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Note:- if you do not want to use all 12 column individually, you can group the columns together.

1. col1 col2 col3 col4 col5 col6 col7 col8 col9 col10 col11 col12
2. col2 col2 col2 col2 col2 col2
3. col3 col3 col3 col3
4. col4 col4 col4
5. col6 col6
6. col4 col8
7. col9 col3
8. col3 col7 col2
9. col12

Bootstrap Grid system Classes:- The Bootstrap grid system has four classes:

• xs (Extra small devices - for phones  - <768px - Max container width auto)


• sm (Small devices - for tablets - ≥768px - Max container width 750px)


• md (Medium devices - for desktops - ≥992px - Max container width 970px)


• lg (Large devices - for larger desktops - ≥1200px - 1170px)

Example 1:- two equal columns

Example 2:- two columns divided in 1:2 ratio

Example 3:- two columns divided in 1:3 ratio

Example 4:- three equal columns

Example 5:- Two Unequal Columns

what is bootstrap grid system?

https://www.youtube.com/watch?v=mKt-MDwtVB4

Source: YouTube