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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Sep 20, 2025

Answer

In Bootstrap, "container", "container-fluid", and "container-xxl" are used to control the width of the layout. Each serves a different purpose based on the desired responsiveness and layout behavior.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <!-- Content here is centered and has responsive fixed widths -->
        </div>

        <div class="container-fluid">
            <!-- Content here takes the full width of the viewport -->
        </div>

        <div class="container-xxl">
            <!-- Content here is centered with a max-width of 1320px -->
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

container: Provides a responsive fixed-width container. It adjusts its width at each responsive breakpoint.

container-fluid: Takes the full width of the viewport, regardless of the screen size.

container-xxl: Similar to "container" but with a maximum width of 1320px, suitable for extra-large screens.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.