What's the difference between `.container` and `.container-fluid` in Bootstrap's grid system?
Asked on Oct 07, 2025
Answer
In Bootstrap's grid system, `.container` provides a responsive fixed-width container, while `.container-fluid` offers a full-width container that spans the entire width of the viewport. Here is a simple example to illustrate the difference:
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row">
<div class="col">
This is a fixed-width container.
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
This is a full-width container.
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `.container` class adjusts its width based on the viewport size, providing a fixed-width layout at each breakpoint (e.g., 540px, 720px, 960px, 1140px, 1320px).
- The `.container-fluid` class always takes up 100% of the viewport width, making it ideal for layouts that need to span the entire screen.
- Both classes are used to wrap the grid system and provide padding and alignment for the content inside.
Recommended Links:
← Back to All Questions