Sure! Here's a quick guide on Bootstrap 5 Grid XXL (.col-xxl-*) — designed for very large screens (?1400px).

?? Bootstrap 5 .col-xxl-* Grid

• .col-xxl-* applies at extra extra large screens and up — viewport widths ? 1400px.

• Below 1400px, columns follow smaller breakpoint rules or stack vertically if no smaller breakpoint classes are set.

? Basic .col-xxl-* Usage

<div class="container">  <div class="row">    <div class="col-xxl-3">1/4 width on XXL+</div>    <div class="col-xxl-9">3/4 width on XXL+</div>  </div></div>

• On screens ?1400px, first column is 3/12 (25%), second is 9/12 (75%).

• On smaller screens, columns respond according to other breakpoint classes or stack.

? Responsive Mix Example

<div class="container">  <div class="row">    <div class="col-12 col-md-6 col-xl-4 col-xxl-3">Full width xs, half md, third xl, quarter xxl</div>    <div class="col-12 col-md-6 col-xl-4 col-xxl-3">Same</div>    <div class="col-12 col-md-6 col-xl-4 col-xxl-3">Same</div>    <div class="col-12 col-md-6 col-xl-4 col-xxl-3">Same</div>  </div></div>

• Extra small: stacked full width.

• Medium (?768px): two columns per row.

• Extra large (?1200px): three columns per row.

• Extra extra large (?1400px): four columns per row.

? Offset on XXL Screens

<div class="container">  <div class="row">    <div class="col-xxl-4 offset-xxl-4">Centered on XXL screens</div>  </div></div>

? Ordering on XXL Screens .order-xxl-*

<div class="container">  <div class="row">    <div class="col-xxl-4 order-xxl-3">Third on XXL</div>    <div class="col-xxl-4 order-xxl-1">First on XXL</div>    <div class="col-xxl-4 order-xxl-2">Second on XXL</div>  </div></div>

Quick Recap

Want a full responsive layout example using .col-xxl-*? Or tips on combining XXL with other breakpoints? Just ask!