Skip to main content

Grid Medium in Bootstrap 5

Bootstrap Grid Medium​

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

As an example:

Editor

Loading...

In this example:

  • We use the col-md- class prefix to specify the column widths for medium screens (md).
  • 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.