In Bootstrap 5, there is no separate .col-xs-* or "extra small" breakpoint class because the grid system’s default .col-* classes apply to all screen sizes below the smallest breakpoint (576px).

Understanding Extra Small (XS) in BS5 Grid

• Extra small (XS) means screen widths < 576px.

• For XS devices, simply use .col-* classes without any breakpoint suffix.

• Columns with .col-* apply to all screen sizes, including XS.

• You can combine .col-* with breakpoint classes for responsive layouts.

Example: Grid for Extra Small (XS) Screens

<div class="container">  <div class="row">    <div class="col-6">Half width on all screen sizes (including XS)</div>    <div class="col-6">Half width on all screen sizes (including XS)</div>  </div></div>

• On any screen size (including <576px), columns take half width.

Responsive Mix with XS Default and Larger Breakpoints

<div class="container">  <div class="row">    <div class="col-12 col-md-6">Full width on XS, half width on MD+</div>    <div class="col-12 col-md-6">Full width on XS, half width on MD+</div>  </div></div>

• On extra small screens (<576px), columns stack full width.

• On medium screens (?768px), columns are half width.

Summary

If you want, I can help you create sample layouts explicitly for extra small screens or show how .col-* behaves across all device sizes!