In Bootstrap 5, the medium (md) breakpoint is designed for desktop devices with a screen width equal to or greater than 768 pixels. You can use the col-{breakpoint}-{number} class to define the number of columns a particular element should occupy within a row at the medium breakpoint. Here’s an example of using the medium grid classes in Bootstrap 5:
<div class="container">
<div class="row">
<div class="col-md-12">Full width on medium screens and larger</div>
<div class="col-md-6">Half width on medium screens and larger</div>
<div class="col-md-6">Half width on medium screens and larger</div>
</div>
</div>In this example, the first column (col-md-12) spans the full width of the row on medium screens and larger. The second and third columns (col-md-6) each occupy half of the row’s width on medium screens and larger.
By adjusting the number of columns and their widths using the col-md-{number} class, you can create responsive grid layouts tailored to medium screens and larger.
The medium (md) breakpoint in Bootstrap 5 starts at 768 pixels, so columns will stack vertically on screens smaller than the md breakpoint. If you want columns to stack vertically on smaller screens, you don’t need to include the col-xs-{number} or col-sm-{number} classes, as they are no longer necessary in Bootstrap 5.
Make sure to include the necessary Bootstrap 5 CSS file in your project for the grid system to work properly.