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