Typography, Colors & Utility Classes

Introduction

Bootstrap ships with hundreds of utility classes — tiny, single-purpose classes that each set one CSS property. Combine them and you can control typography, color, spacing, and layout right in your HTML. This is the same idea behind "utility-first" CSS, and it makes prototyping extremely fast.

Theory

Typography

• Headings — h1–h6 are styled automatically; .h1–.h6 apply heading size to any element.
• Display headings — .display-1 … .display-6 for large hero text.
• Text utilities — .text-center, .text-start, .text-end, .fw-bold, .fst-italic, .text-uppercase, .lead, .small, .text-truncate.

Colors & backgrounds

Bootstrap defines theme colors: primary, secondary, success, danger, warning, info, light, dark.

• Text color — .text-primary, .text-danger, .text-muted, .text-white.
• Background — .bg-success, .bg-warning, .bg-dark, .bg-light.

Spacing

The pattern is {property}{sides}-{size}:

• property: m (margin) or p (padding)
• sides: t, b, s (start/left), e (end/right), x (left+right), y (top+bottom), or blank (all)
• size: 0–5 (and auto for margins)

So mt-3 = margin-top size 3, px-4 = horizontal padding size 4, mx-auto = center horizontally.

Display & flex utilities

• .d-none, .d-block, .d-flex, .d-inline-block (and responsive variants like .d-md-flex).
• .justify-content-center, .align-items-center, .flex-column, .gap-3 for flex layouts.

Real World Example

<div class="p-4 bg-light rounded text-center">
  <h2 class="display-6 fw-bold text-primary">Big Title</h2>
  <p class="lead text-muted">A short tagline with muted text.</p>
  <span class="badge bg-success">New</span>
</div>

Live preview:

Common Mistakes

• Using Bootstrap 4 spacing on the wrong sides. In v5, l/r became s/e (start/end) — ml-2 is now ms-2.
• Forgetting text color contrast. .bg-warning and .bg-info are light — pair them with .text-dark.
• Writing custom CSS for things a utility already does. Check for a utility first; it keeps markup consistent.
• Overusing utilities until markup is unreadable. For repeated patterns, make a component class instead.

Best Practices

• Memorize the spacing scale (0–5) — it covers almost every gap you need.
• Use responsive utility variants (d-md-flex, text-lg-end) to adapt without media queries.
• Prefer semantic theme colors (text-danger for errors) so meaning stays consistent.
• Group related utilities logically in the class list (layout, then spacing, then color) for readability.

Practice Exercise

1. Create a card-like box with p-4, a light background, and rounded corners.
2. Add a centered display-5 heading and a lead text-muted paragraph.
3. Add three colored badges using bg-primary, bg-success, and bg-danger.
4. Use d-flex justify-content-center gap-2 to lay the badges out in a centered row.

Assignment

Recreate a simple pricing callout using only utilities:

1. A centered box with vertical padding and a light background.
2. A display heading for the price, a muted "per month" line, and a primary button.
3. Make the box full width on mobile and half width (centered with mx-auto) on large screens.

Interview Questions

• What is a utility class? — A small class that sets a single CSS property (e.g. .mt-3 sets margin-top), letting you style elements directly in HTML.
• What does px-4 do? — Applies horizontal padding (left and right) at size 4.
• How do you center a block element horizontally with utilities? — mx-auto (with a set width), or d-flex justify-content-center on the parent.
• How do the directional utilities differ between Bootstrap 4 and 5? — v5 uses logical sides s/e (start/end) instead of l/r.
• How do you hide an element only on small screens? — d-none d-md-block hides it below md and shows it from md up.

Additional Resources

• getbootstrap.com/docs/5.3/utilities/spacing — the spacing utility reference
• getbootstrap.com/docs/5.3/content/typography — typography classes
• getbootstrap.com/docs/5.3/utilities/colors — color and background utilities