What is the difference between .container, .container-fluid, and .container-xxl in Bootstrap 5?

Asked on Jun 01, 2025

1 Answer

In Bootstrap 5, the `.container`, `.container-fluid`, and `.container-xxl` classes are used to create responsive layout containers with different behaviors. Here's a brief overview of each:

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <!-- Fixed-width container -->
        </div>

        <div class="container-fluid">
            <!-- Full-width container -->
        </div>

        <div class="container-xxl">
            <!-- Extra extra large fixed-width container -->
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `.container` class creates a responsive fixed-width container that adapts to the current breakpoint.
The `.container-fluid` class provides a full-width container that spans the entire width of the viewport.
The `.container-xxl` class is a fixed-width container that becomes wider at the `xxl` breakpoint (1400px and above).
Use `.container` for standard responsive layouts, `.container-fluid` for full-width layouts, and `.container-xxl` for extra-wide designs on large screens.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions