What is the difference between container, container-fluid, and container-xxl in Bootstrap?
Asked on Oct 02, 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.
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.
<!-- 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:
Recommended Links:
← Back to All Questions