Containers
Bootstrap provides three container types: fixed-width .container, fluid .container-fluid, and responsive .container-{breakpoint} that are fluid until a breakpoint.
Bootstrap
Beginner
3 min read
Container Types
Example
<!-- Fixed max-width at each breakpoint -->
<div class="container">...</div>
<!-- Always 100% width -->
<div class="container-fluid">...</div>
<!-- 100% wide until lg, then fixed max-width -->
<div class="container-lg">...</div>
<!-- Common pattern: full-bleed hero, contained content -->
<section class="container-fluid bg-primary py-5">
<div class="container text-white">
<h1>Hero</h1>
</div>
</section> Pro Tip
Nest a .container inside a .container-fluid for full-bleed backgrounds with contained text.