Progress Bars

Prev Next

A Bootstrap 4 progress bar is a simple two-element component: an outer track, .progress, and an inner filled bar, .progress-bar. There is no built-in component prop for how full the bar should be — you control that entirely with an inline style="width: X%" on the inner bar. We'll use one as a visual "difficulty meter" on a TrailMap trail card.

Base Markup

The outer .progress div is the track (and sets the rounded corners + background); the inner .progress-bar div is the colored fill, sized with an inline width.

<div class="progress">
  <div class="progress-bar" role="progressbar"
       style="width: 60%"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

Note: Bootstrap 4 has no CSS-custom-property shortcut for the fill width — that arrived later in Bootstrap 5.3 as --bs-progress-width, settable via a style attribute holding just the custom property. In Bootstrap 4, the plain inline width style shown above is the only supported way to size the bar; there's nothing else to set.

Required ARIA Attributes

Because the visual fill conveys information (how much of something is complete), the bar needs role="progressbar" plus aria-valuenow, aria-valuemin, and aria-valuemax, so screen readers can announce the same value sighted users see. Keep aria-valuenow in sync with whatever percentage drives the inline width — Bootstrap does not do this for you automatically.

Striped and Animated Variants

.progress-bar-striped overlays diagonal stripes on the fill. Add .progress-bar-animated alongside it to slide those stripes continuously — commonly used for a bar representing an active, in-progress task rather than a fixed, completed value.

<!-- striped, static -->
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning"
       role="progressbar" style="width: 45%"
       aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

<!-- striped AND animated -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated"
       role="progressbar" style="width: 75%"
       aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

Color the fill with the same background utilities used elsewhere — .bg-success, .bg-warning, .bg-danger, and so on.

Full Worked Example: TrailMap Difficulty Meter

A three-bar difficulty breakdown on a TrailMap trail card: how "hard" a trail rates on easy, moderate, and strenuous scales, filled to reflect this particular trail (moderate).

<h6>Trail Difficulty: Moderate</h6>

<div class="progress mb-2" style="height: 8px;">
  <div class="progress-bar bg-success" role="progressbar"
       style="width: 30%"
       aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>
<small class="text-muted">Easy</small>

<div class="progress mb-2" style="height: 8px;">
  <div class="progress-bar bg-warning" role="progressbar"
       style="width: 65%"
       aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>
<small class="text-muted">Moderate (this trail)</small>

<div class="progress" style="height: 8px;">
  <div class="progress-bar bg-danger" role="progressbar"
       style="width: 10%"
       aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>
<small class="text-muted">Strenuous</small>

Each bar's aria-valuenow is kept equal to its inline width percentage, and the custom height: 8px inline style makes the three meters slim enough to stack neatly inside a trail card.

Next up: pop content into an overlay dialog with Modal.

Prev Next