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

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>