Bs5 Grid Xlarge in Bootstrap
Sure! Here's a clear overview of Bootstrap 5 Grid XLarge (.col-xl-*) — designed for extra large screens (?1200px).
?? Bootstrap 5 .col-xl-* Grid
The
.col-xl-*classes apply at extra large screens and up — that is, screens 1200px wide or wider.Below 1200px, columns will follow smaller breakpoint rules or stack vertically if no smaller classes are set.
? Basic .col-xl-* Usage
<div class="container"> <div class="row"> <div class="col-xl-3">1/4 width on extra large+</div> <div class="col-xl-9">3/4 width on extra large+</div> </div></div>On screens ?1200px, first column is 3/12 (25%) width, second is 9/12 (75%).
On smaller screens, columns stack or respond according to other breakpoint classes.
? Responsive Example Mixing Breakpoints
<div class="container"> <div class="row"> <div class="col-12 col-md-6 col-xl-3">Full width xs, half md, quarter xl</div> <div class="col-12 col-md-6 col-xl-3">Same</div> <div class="col-12 col-md-6 col-xl-3">Same</div> <div class="col-12 col-md-6 col-xl-3">Same</div> </div></div>Extra small: columns stack full width.
Medium (?768px): 2 columns per row.
Extra large (?1200px): 4 columns per row.
? Offset with .offset-xl-*
<div class="container"> <div class="row"> <div class="col-xl-4 offset-xl-4">Centered on extra large screens</div> </div></div>? Ordering on Extra Large Screens .order-xl-*
<div class="container"> <div class="row"> <div class="col-xl-4 order-xl-3">Third on xl</div> <div class="col-xl-4 order-xl-1">First on xl</div> <div class="col-xl-4 order-xl-2">Second on xl</div> </div></div>Quick Recap
| Class | Screen size | Purpose |
|---|---|---|
.col-xl-* | ? 1200px | Column width on extra large |
.offset-xl-* | ? 1200px | Offset column on extra large |
.order-xl-* | ? 1200px | Change order on extra large |
Want me to help you build a real-world layout using .col-xl-* or combine it with other breakpoints?
