Typography & Colors

Bootstrap ships a small, consistent palette of theme colors and a set of text utility classes that use them — so "primary blue" or "danger red" means the same thing everywhere on your page, without you picking a hex code by hand each time.

The theme colors

Bootstrap defines a handful of named contextual colors: primary, secondary, success, danger, warning, info, light, and dark. They show up as a suffix on many different utility and component classes:

HTML index.html

<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted, low-emphasis text</p>

Rendered result

Four lines of text, each a different color: the first in Bootstrap's blue, the second in green, the third in red, and the fourth in a soft gray that's clearly de-emphasized compared to normal body text — useful for captions or secondary details.

Background colors

The same color names work as backgrounds with the bg- prefix. Darker backgrounds need light text to stay readable, so text-white is a common pairing:

HTML index.html

<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-dark text-white p-3">Dark background</div>
<div class="bg-light p-3">Light background</div>

Rendered result

Three stacked boxes with padding: a solid blue box with white text, a near-black box with white text, and a very light gray box with normal dark text — each block clearly filled edge-to-edge with its color.

Text alignment and weight

HTML index.html

<p class="text-center fw-bold">Centered and bold</p>
<p class="text-end fst-italic">Right-aligned and italic</p>
<p class="text-uppercase">shouted at you</p>

Rendered result

A centered, bold line of text; a right-aligned, italic line beneath it; and a third line reading "SHOUTED AT YOU" — the actual lowercase text in the HTML, transformed to all-caps purely by CSS.

fw-bold sets font weight, fst-italic sets font style, and text-uppercase transforms the displayed case without changing the underlying text — a screen reader still reads the original lowercase words.

Note: Bootstrap's contextual colors are meant to carry meaning consistently — danger for destructive actions and errors, success for confirmations, and so on. Using btn-danger for an unrelated "Learn more" button, just because you like the shade of red, undermines the whole point: users learn to associate that color with "this is risky" across your entire site, and a mismatched use breaks that trust.

PreviousThe Grid System NextButtons