What’s the difference between using .container, .container-fluid, and .container-xxl in Bootstrap 5 layouts?

Asked on Sep 23, 2025

Answer

In Bootstrap 5, ".container", ".container-fluid", and ".container-xxl" are used to create responsive layouts with different widths. Here's a brief explanation and example for each:

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <!-- Fixed-width container, responsive to screen size -->
            <p>Fixed-width container</p>
        </div>

        <div class="container-fluid">
            <!-- Full-width container, always 100% width -->
            <p>Full-width container</p>
        </div>

        <div class="container-xxl">
            <!-- Extra-extra-large container, responsive to screen size -->
            <p>Extra-extra-large container</p>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

.container: Provides a responsive fixed-width container that adjusts its width according to the screen size, with predefined breakpoints.
.container-fluid: Provides a full-width container that spans the entire width of the viewport, regardless of screen size.
.container-xxl: Similar to .container, but specifically targets extra-extra-large screens (≥1400px), allowing for wider content on large displays.

✅ Answered with Bootstrap 5 best practices.