Prev Next

BS5 Containers

Containers are fundamental in Bootstrap, providing a way to center and pad your layout’s content. Bootstrap 5 includes several container options for different use cases.

Key Topics

Container Types

Bootstrap 5 provides three main container classes:

  • .container: A responsive, fixed-width container that adjusts at breakpoints.
  • .container-fluid: Spans the full width of the viewport, always 100%.
  • .container-{{breakpoint}}: Width is 100% until the specified breakpoint, then becomes fixed-width.

Usage Examples

Below is a short HTML snippet demonstrating how to implement different container types:

<div class="container">
    <h2>Standard Container</h2>
    <p>This container has a max width depending on the current breakpoint.</p>
</div>

<div class="container-fluid bg-light">
    <h2>Fluid Container</h2>
    <p>This container is always 100% wide.</p>
</div>

<div class="container-md">
    <h2>MD Container</h2>
    <p>This container is fluid until the MD breakpoint, then has a fixed width.</p>
</div>

Explanation: Each container class changes how wide the container appears at various screen sizes. Combine them with the grid system to build flexible layouts.

Key Takeaways

  • .container centers content with adaptive max-width at breakpoints.
  • .container-fluid provides a full-width layout at all times.
  • Use .container-{breakpoint} to tailor responsiveness to a specific breakpoint.
Prev Next