Many websites are reporting an increasing amount of mobile traffic and this trend is expected to increase over the coming years. The Bootstrap grid system is mobile-first, which means it is designed to target devices with smaller displays and then grow as the display size increases.
Fortunately, this is not something you need to be too concerned about as Bootstrap takes care of most of the heavy lifting.
Bootstrap 3 introduced a number of predefined grid classes in order to specify the sizes of columns in your design. These class names are listed in the following table:
|
Class name |
Type of device |
Resolution |
Container width |
Column width |
|---|---|---|---|---|
|
|
Phones |
Auto |
Auto | |
|
|
Tablets |
750 px |
60 px | |
|
|
Desktops |
970 px |
1170 px | |
|
|
High-resolution desktops |
78 px |
95 px |
The Bootstrap grid is divided into 12 columns. When laying out your web...