Colors & Color System

Prev Next

Every colored button, alert, badge and border you'll build in this track pulls from the same eight named theme colors. Learn the names once here and the rest of the components track — buttons, badges, alerts, list groups — reuses exactly the same eight words.

1. The Eight Theme Colors

Bootstrap 4 defines eight named theme colors. Every color-aware component class (btn-*, badge-*, alert-*, and so on) is built by combining one of these eight names with a component prefix.

Name	Typical meaning	Example swatch class
`primary`	Main brand color, primary actions	`bg-primary`
`secondary`	Neutral, secondary actions	`bg-secondary`
`success`	Positive outcome, confirmation	`bg-success`
`danger`	Destructive action, error	`bg-danger`
`warning`	Caution, needs attention	`bg-warning`
`info`	Neutral informational note	`bg-info`
`light`	Light neutral background	`bg-light`
`dark`	Dark neutral background	`bg-dark`

2. Text Color: .text-{color}

Apply one of the eight names to .text-* to color the text of any element.

<p class="text-primary">.text-primary text</p>
<p class="text-success">.text-success text</p>
<p class="text-danger">.text-danger text</p>
<p class="text-warning">.text-warning text</p>
<p class="text-muted">.text-muted text</p>

3. Background Color: .bg-{color}

The matching .bg-* classes set a background color. Pair a dark background with .text-white so the text stays readable.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>

Bootstrap 4 has only plain colors — no subtle/emphasis variants. Later Bootstrap 5.3 added softer pairs like text-bg-primary-subtle and text-primary-emphasis for better light/dark theming. Bootstrap 4 does not have any of that — .text-{color} and .bg-{color} are the only two utilities, full-strength color only.

4. Worked Example: TrailMap Difficulty Badges

TrailMap tags every trail card with a difficulty badge. Mapping meaning to color keeps it consistent across the whole site: green reads as "safe/beginner", yellow as "caution", red as "hard".

<span class="badge badge-success">Easy</span>
<span class="badge badge-warning">Moderate</span>
<span class="badge badge-danger">Hard</span>

<!-- Full trail-card heading using the same color mapping -->
<h5>
  Ridgeline Loop
  <span class="badge badge-danger">Hard</span>
</h5>

Badges get their own lesson: this example previews the color mapping, but the full badge component — pill shapes, badges in buttons, sizing — is covered in Badges later in this track.

Prev Next