Skip to main content

Grid Small in Bootstrap 5

Bootstrap Grid Small​

To define the grid behavior for small screens (sm) in Bootstrap 5, you can utilize the col-sm- class prefix.

As an example:

Editor

Loading...

In this example:

  • We utilize the col-sm- class prefix to specify the column widths for small screens (sm).
  • The column classes are defined based on the screen sizes: col-6 for extra small screens, col-sm-4 for small screens, col-md-3 for medium screens, and col-lg-2 for large screens.
  • The col-12 class is employed to make the third column occupy the full width on extra small screens and stack vertically.
  • The bg-primary and bg-dark classes are utilized to assign background colors for demonstration purposes.