In Bootstrap 5, the small (sm) breakpoint is designed for tablets and devices with a screen width equal to or greater than 576 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 small breakpoint. Here’s an example of using the small grid classes in Bootstrap 5:
<div class="container">
<div class="row">
<div class="col-sm-12">Full width on small screens and larger</div>
<div class="col-sm-6">Half width on small screens and larger</div>
<div class="col-sm-6">Half width on small screens and larger</div>
</div>
</div>In this example, the first column (col-sm-12) spans the full width of the row on small screens and larger. The second and third columns (col-sm-6) each occupy half of the row’s width on small screens and larger.
By adjusting the number of columns and their widths using the col-sm-{number} class, you can create responsive grid layouts tailored to small screens and larger.
The small (sm) breakpoint is the default breakpoint in Bootstrap 5, so columns will stack vertically on screens smaller than the sm breakpoint. If you want columns to stack vertically on smaller screens, you don’t need to include the col-xs-{number} class, as it is 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.