Typography and Utility Classes

Bootstrap replaces dozens of small custom CSS rules with short, memorable utility classes. Once you know the typography and spacing utilities, you can style an entire page without opening a stylesheet. This lesson tours headings, display text, inline text utilities, and the spacing, display and flex helpers you will use daily.

Headings and Display Classes

Standard h1 through h6 elements are styled automatically with a responsive font scale. When you need heading styles on other elements, use .h1 to .h6 classes. For hero sections, display classes render larger, lighter headlines:

html

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>
<p class="lead">A lead paragraph stands out with larger, lighter text.</p>

.lead is perfect for the introductory sentence under a headline.

Inline Text Utilities

Alignment: text-start, text-center, text-end, all with responsive infixes like text-md-end.
Transform: text-lowercase, text-uppercase, text-capitalize.
Weight and style: fw-bold, fw-semibold, fw-light, fst-italic.
Size: fs-1 through fs-6 match heading sizes without semantics.
Wrapping: text-wrap, text-nowrap, text-truncate (truncate needs a width and d-block or d-inline-block).
Decoration: text-decoration-none removes underlines from links.

html

<p class="text-center text-uppercase fw-bold fs-5">Section label</p>
<a href="#" class="text-decoration-none">Clean link</a>

The Spacing System

Spacing utilities follow the pattern {property}{sides}-{size}:

Property: m for margin, p for padding.
Sides: t top, b bottom, s start, e end, x horizontal, y vertical, or blank for all sides.
Size: 0 to 5 on a scale based on 1rem (3 equals 1rem), plus auto for margins.

html

<div class="mt-4 px-3 pb-2">Spaced box</div>
<div class="mx-auto" style="width: 200px;">Horizontally centered</div>

Responsive infixes work here too: p-2 p-lg-4 gives small padding on phones and more on laptops. Because the scale is consistent, spacing across your site stays rhythmical instead of arbitrary.

Display and Visibility Utilities

Display utilities set the CSS display property per breakpoint: d-none, d-block, d-inline-block, d-flex, d-grid and more. The classic show-and-hide pattern combines two of them:

html

<div class="d-none d-md-block">Visible on md and up only</div>
<div class="d-md-none">Visible below md only</div>

This is how you serve different navigation or imagery to mobile and desktop without JavaScript.

Flexbox Utilities

Any element with d-flex becomes a flex container you can control with utilities: flex-row, flex-column, justify-content-between, align-items-center, flex-wrap, gap-2 and friends. A toolbar with a title on the left and buttons on the right takes one line:

html

<div class="d-flex justify-content-between align-items-center">
  <h2 class="mb-0">Orders</h2>
  <button class="btn btn-primary">New order</button>
</div>

Key Takeaways

Display classes and .lead handle hero and intro text; fs-* and fw-* fine-tune the rest.
Spacing follows {property}{sides}-{size} on a 0-5 scale with responsive infixes.
d-none plus d-{breakpoint}-block shows or hides content per screen size.
Flex utilities turn any container into a precise alignment tool.

Next lesson: Colors, Backgrounds and Borders, where the theme color system comes in.