Bootstrap 5 Grid: XXL Breakpoint (xxl)

Bootstrap 5 introduces the xxl (extra extra large) breakpoint, specifically designed for devices with a minimum width of 1400px. This new addition to the grid system allows developers to take full advantage of larger screens, including ultra-widescreen monitors and high-resolution displays.

In this tutorial, we’ll dive into the features and uses of the xxl breakpoint, showing you how to craft stunning, responsive layouts for the biggest screens.

What is the XXL Breakpoint in Bootstrap 5?

The xxl breakpoint is tailored for devices with a minimum width of 1400px, such as ultra-wide desktop monitors. With this new breakpoint, you can fine-tune your layouts specifically for very large screens without impacting smaller breakpoints.

Key Features of the xxl Breakpoint:

  1. Targets devices ≥1400px.
  2. Complements the existing breakpoints (sm, md, lg, xl).
  3. Provides additional flexibility for ultra-large screens.

Using the XXL Breakpoint (xxl)

To customize column behavior for the xxl breakpoint, use .col-xxl-* classes. These classes define how columns behave on screens 1400px and larger.

Basic Example: XXL Columns

<div class="container">
  <div class="row">
    <div class="col-xxl-6 bg-primary text-white text-center p-3">Column 1</div>
    <div class="col-xxl-6 bg-secondary text-white text-center p-3">Column 2</div>
  </div>
</div>

Explanation:

  • Below 1400px: Columns stack vertically by default (or follow the rules of smaller breakpoints).
  • 1400px and above: Columns are displayed side-by-side, each taking up 50% of the row width.

Customizing Column Widths with xxl Classes

With .col-xxl-*, you can create custom column widths for ultra-large screens. The * represents the number of grid columns (out of 12).

Example: Custom Column Widths

<div class="container">
  <div class="row">
    <div class="col-xxl-4 bg-success text-white text-center p-3">Column 1</div>
    <div class="col-xxl-8 bg-warning text-dark text-center p-3">Column 2</div>
  </div>
</div>

Explanation:

  • col-xxl-4: Column 1 occupies 4/12 (33.33%) of the row width on screens ≥1400px.
  • col-xxl-8: Column 2 occupies 8/12 (66.67%) of the row width on screens ≥1400px.

Combining XXL with Other Breakpoints

Bootstrap allows combining xxl classes with smaller breakpoints to ensure responsive layouts for all screen sizes.

Example: Responsive Grid

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 col-xxl-3 bg-primary text-white text-center p-3">Column 1</div>
    <div class="col-12 col-md-6 col-xl-8 col-xxl-9 bg-secondary text-white text-center p-3">Column 2</div>
  </div>
</div>

Explanation:

  • col-12: Full-width columns on smaller screens.
  • col-md-6: Two equal-width columns on screens ≥768px.
  • col-xl-4 and col-xl-8: Adjusts to a 4/12 and 8/12 split on screens ≥1200px.
  • col-xxl-3 and col-xxl-9: Adjusts to a 3/12 and 9/12 split on screens ≥1400px.

Centering Content at the XXL Breakpoint

Bootstrap’s grid system includes utilities for centering content, which works perfectly at the xxl breakpoint.

Example: Centered Columns

<div class="container">
  <div class="row justify-content-center">
    <div class="col-xxl-6 bg-light text-dark text-center p-3">Centered Column</div>
  </div>
</div>

Key Classes:

  • justify-content-center: Centers columns horizontally within the row.

Spacing and Gutters in XXL Grids

With the xxl breakpoint, you can use Bootstrap’s gutter utilities to control spacing between columns and rows.

Example: Adding Gutters

<div class="container">
  <div class="row g-4">
    <div class="col-xxl-4 bg-info text-white text-center p-3">Column 1</div>
    <div class="col-xxl-4 bg-success text-white text-center p-3">Column 2</div>
    <div class="col-xxl-4 bg-danger text-white text-center p-3">Column 3</div>
  </div>
</div>

Explanation:

  • g-4: Adds gutters (spacing) of 1.5rem (24px) between columns and rows.

Visibility Utilities for XXL Breakpoint

Bootstrap 5’s visibility utilities allow you to control the visibility of elements at the xxl breakpoint.

Example: Hiding and Showing Content

<div class="container">
  <div class="row">
    <div class="col d-none d-xxl-block bg-primary text-white p-3">Visible on XXL Screens</div>
    <div class="col bg-secondary text-white p-3">Visible on All Screens</div>
  </div>
</div>

Key Classes:

  • d-none: Hides the element by default.
  • d-xxl-block: Displays the element only on screens ≥1400px.

Use Cases for the XXL Breakpoint

Here are some scenarios where the xxl breakpoint shines:

  1. High-Resolution Dashboards: Display complex data visualizations and charts on ultra-wide monitors.
  2. E-commerce Product Galleries: Showcase more products per row for a better browsing experience.
  3. Corporate Websites: Utilize extra space for impactful hero sections, testimonials, or wide carousels.
  4. Photography Portfolios: Display high-quality images and maximize space usage.

FAQs About Bootstrap 5 XXL Breakpoint

1. What devices use the xxl breakpoint?

The xxl breakpoint is ideal for devices ≥1400px, such as ultra-wide monitors and high-resolution desktops.

2. How does xxl differ from xl?

  • xl: Targets screens ≥1200px.
  • xxl: Targets larger screens ≥1400px.

3. Can I combine xxl with custom CSS?

Yes, you can combine xxl classes with custom CSS to achieve specific design requirements.

Conclusion

The xxl breakpoint in Bootstrap 5 is a powerful addition to the grid system, offering fine-tuned control over layouts for ultra-large screens. By using .col-xxl-* classes and utilities, you can create elegant, professional designs optimized for any screen size.

Leave a Comment