Skip to main content

Grid Extra Large in Bootstrap 5

Bootstrap Grid Extra Large​

To define the grid behavior for extra large screens (xl) in Bootstrap 5, you can use the col-xl- class prefix.

As an example:

Editor

Loading...

In this example:

  • We use the col-xl- class prefix to specify the column widths for extra large screens (xl).
  • 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, col-lg-2 for large screens, and col-xl-1 for extra 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 are used to set background colors for demonstration purposes.