Containers

Every Bootstrap 5 grid starts inside a container. A container is what actually centers your content and puts breathing room on the left and right — the grid's rows and columns only work correctly once they're nested inside one. There are three flavors, and choosing between them is the first layout decision on any page of TrailMap.

.container: A Responsive Max-Width

.container is 100% wide on the very smallest screens, then locks to a fixed max-width at each breakpoint and up, centering itself with automatic side margins. This is what you reach for on content-focused pages, like a TrailMap trail's detail page, where you don't want paragraphs stretching edge-to-edge on a wide monitor:

<div class="container">
  <h1>Eagle Ridge Loop</h1>
  <p>A 6.2 mile loop with sweeping ridge views and a steep final climb.</p>
</div>

.container-fluid: Always 100% Width

.container-fluid never caps its max-width — it stays 100% of the viewport at every breakpoint. TrailMap's trail-listing page (a grid of trail cards) uses this so the map preview and card grid can use the full width of a wide monitor instead of getting squeezed into 1320px:

<div class="container-fluid">
  <div class="row">
    <!-- trail cards go here -->
  </div>
</div>

.container-{breakpoint}: Fluid Until a Point

The in-between option: 100% wide below the named breakpoint, then a fixed max-width from that breakpoint upward. .container-md stays fluid on phones and small tablets, then behaves like .container from md up:

<div class="container-md">
  <!-- full width until 768px, then capped and centered -->
</div>

Choosing a Container for a TrailMap Page