Bootstrap 4 Grid Classes

Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not be stacked.

Example

Output

class1.PNG

Small Grid – When you use small grid class, the grid (columns) will not be stacked vertically on screen sizes greater than or equal to 576px and above. To make the grid system that will not be stacked on small screen sizes and above, add .col-sm-* class.

Example

Output

class2.PNG

Medium Grid – In the medium grid, when you create columns (grid), then the columns will not be stacked on top of each other on medium devices having screen size greater than equal to 768px and above. For this, add .col-md-* class. The columns are stacked on top of each other on devices having a screen size of less than 768px.

Example

Output

The column appears side by side on medium screen size devices and above, which is shown below in figure.

med1.PNG

The columns will appears stacked on small and extra small devices, which is shown below in the figure.

med2.PNG

Large Grid – In the large grid, when you create columns (grid), then the columns will not be stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above. For this, add .col-lg-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 992px.

Example

Output

The column appears side by side on large screen size devices and above, that is shown below in figure.

lg.PNG

The columns will appear stacked on medium, small, and extra-small devices, which is shown below in the figure.

lg1.PNG

XLarge Grid – In the extra large grid, when you create columns (grid), then the columns will not be stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above. For this, add .col-xl-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 1200px.

Example

Output

The column appears side by side on extra-large screen devices, that is shown below in figure.

xl.PNG

The columns will appear stacked on large, medium, small, and extra-small devices, which is shown below in the figure.

xl2.PNG

Pin It on Pinterest

Share This