Bootstrap Grid XLarge (.col-xl-*)

To target huge desktop monitors and high-resolution screens (like 4K displays), Bootstrap offers two top-tier breakpoints: Extra Large (xl) and Extra Extra Large (xxl).

---

The .col-xl-* Breakpoint (≥1200px)

The .col-xl-* class is applied when the screen width reaches a minimum of 1200 pixels. This is perfect for complex layouts that need plenty of horizontal breathing room, like admin dashboards, wide photo galleries, or dense data tables.

Example: 6-Column Layout

A 6-column grid using .col-xl-2 sections would be too cramped on laptops or tablets. But on a wide ≥1200px monitor, it provides a stunning panoramic view.

<div class="container">
    <div class="row">
        <!-- 6 equal columns (2 parts each) -->
        <div class="col-xl-2">Item 1</div>
        <div class="col-xl-2">Item 2</div>
        <div class="col-xl-2">Item 3</div>
        <div class="col-xl-2">Item 4</div>
        <div class="col-xl-2">Item 5</div>
        <div class="col-xl-2">Item 6</div>
    </div>
</div>

---

The New .col-xxl-* Breakpoint (≥1400px)

Introduced in Bootstrap 5, the .col-xxl-* class triggers only on massive, ultra-wide screens that are 1400 pixels or wider.

This was added because modern monitors have become incredibly wide. Using `.xxl` allows you to prevent your content layout from painfully stretching out when viewed on a 27-inch iMac or a curved gaming monitor.

<div class="container">
    <div class="row">
        <div class="col-xxl-4">Left Panel</div>
        <div class="col-xxl-8">Wide Content Screen</div>
    </div>
</div>

---

Summary Table for Ultra-Wide Grids

Here is how the huge `xl` and `xxl` breakpoints cascade down to smaller devices:

---

Common Mistakes to Avoid

---

Try It: A Layout That Adapts Across Three Breakpoints

A second example — one column definition that stacks on mobile, splits in half on tablets, and becomes a narrow sidebar on ultra-wide screens:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-xxl-3">Sidebar</div>
        <div class="col-12 col-md-6 col-xxl-9">Main content</div>
    </div>
</div>

---

Frequently Asked Questions