Skip to main content

Grid Extra Small in Bootstrap 5

Bootstrap Grid Extra Small​

To specify the grid behavior for extra small screens (xs) in Bootstrap 5, you can use the col- class prefix.

As an example:

Editor

Loading...

In this example:

  • We use the col- class prefix to specify the column widths for extra small screens (xs).
  • The column classes are set 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 used to make the third column occupy the full width on extra small screens and stack vertically.
  • The bg-primary and bg-dark classes set the background colors for demonstration purposes.