What is the difference between `.container`, `.container-fluid`, and `.container-{breakpoint}`?

Beginner

Answer

These are the three main container types in Bootstrap:

.container:

  • Fixed max-width at each breakpoint
  • Responsive horizontal margins that center the content
  • Max-widths: 540px (sm), 720px (md), 960px (lg), 1140px (xl), 1320px (xxl)

.container-fluid:

  • 100% width at all breakpoints
  • No maximum width restrictions
  • Edge-to-edge content spanning full viewport width

.container-{breakpoint}:

  • 100% width until the specified breakpoint
  • Then behaves like .container with fixed max-width
  • Available: .container-sm, .container-md, .container-lg, .container-xl, .container-xxl
<div class="container">Fixed-width responsive container</div>
<div class="container-fluid">Full-width container</div>
<div class="container-md">Fluid until medium breakpoint, then fixed</div>