Containers

Every Bootstrap 3 grid has to start inside one of two wrapping elements. They both center content and add side padding, but they disagree on one thing: whether that content ever reaches the true edges of the browser window.

.container: A Responsive, Fixed Max-Width Wrapper

.container sets a max-width that changes at each breakpoint, then centers itself in the page with automatic left/right margins. The content inside never stretches edge-to-edge on wide screens - it caps out and leaves whitespace on either side:

<div class="container">
  <div class="row">
    <div class="col-xs-12">Trail details, capped at a comfortable reading width</div>
  </div>
</div>

.container-fluid: Always 100% Width

.container-fluid has no max-width step-ladder at all - it's always width: 100%, with just a small fixed side padding, regardless of how wide the browser window gets. Use it when a section should visually reach the edges of the screen:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">Full-bleed hero banner</div>
  </div>
</div>

Choosing Between Them for a TrailMap Page Layout

TrailMap's homepage mixes both deliberately: a full-bleed hero image behind the search bar uses .container-fluid so the photo runs edge to edge, while the trail listing underneath switches to .container so the cards line up in a comfortable, capped reading width instead of stretching thin across an ultra-wide monitor:

<!-- hero: full-bleed background -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">Find your next trail</div>
  </div>
</div>

<!-- listing: capped reading width -->
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Blue Ridge Loop</div>
    <div class="col-sm-6 col-md-4">Sunset Ridge</div>
  </div>
</div>