Containers

Prev Next

Every Bootstrap 4 grid needs a container as its outermost wrapper — rows and columns are not meant to sit directly against the page edge. Bootstrap 4 gives you three container types, and picking the right one is the first layout decision on any page, including a TrailMap trail listing or detail page.

.container: A Responsive Max-Width Wrapper

.container is fixed-width at each breakpoint and centers itself with automatic side margins. Its max-width steps up as the viewport grows:

Breakpoint	Screen width	.container max-width
Extra small	<576px	100%
Small	≥576px	540px
Medium	≥768px	720px
Large	≥992px	960px
Extra large	≥1200px	1140px

<div class="container">
  <h1>TrailMap</h1>
</div>

.container-fluid: Always 100% Width

.container-fluid never gets a max-width — it stays at width: 100% across every breakpoint, only adding the same side padding as .container. Use it when content should stretch edge-to-edge, like a full-width filter bar above a trail listing.

<div class="container-fluid">
  <p>Filter trails by difficulty and distance</p>
</div>

.container-{breakpoint}: Fluid Below, Fixed Above

Added in Bootstrap 4.4, .container-sm, .container-md, .container-lg, and .container-xl stay at 100% width below the named breakpoint, then switch to the matching fixed max-width at and above it — a middle ground between .container and .container-fluid.

<div class="container-md">
  <!-- 100% wide below 768px, 720px max-width from 768px up -->
</div>

A TrailMap Page Layout Example

A trail detail page combining a full-width hero with a standard fixed-width content area beneath it:

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>Blue Ridge Loop</h1>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8">Trail description and photos</div>
    <div class="col-md-4">Distance, elevation, difficulty</div>
  </div>
</div>

Note: .jumbotron is a Bootstrap-4-only component covered later in this track — Bootstrap 5 dropped it in favor of plain utility classes.

Choosing the Right Container

Default to .container for ordinary page content that should stay readable at wide widths. Reach for .container-fluid for full-bleed sections like hero banners or image strips. Use a .container-{breakpoint} variant only when you specifically want fluid behavior on small screens that locks to a fixed width past one particular breakpoint.

Up next: With a container in place, learn how rows and columns divide the space inside it in Grid System Basics.

Prev Next