What is the difference between .container and .container-fluid in Bootstrap? Pending Review
Asked on Sep 16, 2025
1 Answer
In Bootstrap, ".container" and ".container-fluid" are used to create responsive layouts, but they differ in how they handle width. ".container" provides a responsive fixed-width container, while ".container-fluid" provides a full-width container that spans the entire width of the viewport.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<!-- Content inside a fixed-width container -->
</div>
<div class="container-fluid">
<!-- Content inside a full-width container -->
</div>
<!-- END COPY / PASTE -->
- Use ".container" when you want your content to have a maximum width that adjusts at different breakpoints.
- Use ".container-fluid" when you want your content to stretch across the entire width of the viewport, regardless of the screen size.
- Both classes are responsive, but they serve different layout needs depending on the design requirements.