Bootstrap 5 Typography Fundamentals: Title Hierarchy and Text Style Settings

Bootstrap 5 provides powerful typography tools to make web text display more standardized and aesthetically pleasing. This article will guide you through the most basic and commonly used typography features in Bootstrap 5, including title hierarchies and text style settings, suitable for beginners learning Bootstrap.

1. Title Hierarchy: Quickly Set Different Sizes of Titles¶

Bootstrap 5 uses a series of predefined class names to easily create different hierarchical title styles, balancing both styling and semantics.

1.1 Base Title Classes (.h1-h6)¶

Bootstrap 5 uses classes .h1 to .h6 to define title styles. These classes affect font size, weight, and line height but do not change the element’s semantics. For example, even if you apply the .h1 class to a <p> tag, it will display with h1-level size but will not be recognized by the browser as a first-level heading (unlike the <h1> tag, which carries semantic meaning).

<!-- Using h1 tag and .h1 class have the same effect -->
<h1 class="h1">This is an h1-styled title</h1>
<p class="h2">This is a paragraph styled as h2 (via .h2 class)</p>
<p class="h3">Text styled as h3</p>
<p class="h4">Text styled as h4</p>
<p class="h5">Text styled as h5</p>
<p class="h6">Text styled as h6</p>

Effect: h1 is the largest and boldest; h6 is the smallest and thinnest.

1.2 Title Spacing and Default Styles¶

Bootstrap 5 titles automatically have spacing to avoid crowding with body text:
- All h1 to h6 have a default margin-bottom: 1rem to ensure sufficient spacing between titles.
- Spacing between adjacent titles or between titles and body text is automatically adjusted via margin-top and margin-bottom.

<h1 class="h1">Large Title</h1>
<p>This is body content below the large title; spacing is automatically handled by Bootstrap.</p>
<h2 class="h2">Medium Title</h2>
<p>This is body content below the medium title.</p>

2. Text Styles: Rich Text Styling Options¶

Bootstrap 5 provides numerous text style classes to quickly adjust text alignment, color, weight, and case.

2.1 Text Alignment: Adjust Horizontal Position¶

Control text alignment with the following classes (default is left-aligned):
- .text-start: Left-aligned (default)
- .text-center: Center-aligned
- .text-end: Right-aligned
- .text-justify: Justified (ideal for multi-line text)

<p class="text-center">This text is centered</p>
<p class="text-end">This text is right-aligned</p>
<p class="text-justify">This text will be justified to fill the container width (requires sufficient container width).</p>

2.2 Text Color: Change Text and Background Colors¶

• Text Color: Use .text-* classes (e.g., .text-primary, .text-success).
• Background Color: Use .bg-* classes (less common, often paired with white text).

<p class="text-primary">Blue text (primary color)</p>
<p class="text-success">Green text (success color)</p>
<p class="text-muted">Gray text (secondary text, muted)</p>
<p class="text-danger bg-light">Red text (danger color)</p>
<p class="bg-primary text-white">White text on blue background</p>

2.3 Text Weight and Italics: Highlight Important Content¶

• Weight: fw-bold (bold), fw-normal (normal), fw-light (light).
• Italics: fst-italic (italic).

<p class="fw-bold">This text is bold</p>
<p class="fst-italic">This text is italic</p>
<p class="fw-light fst-italic">Light and italic</p>

2.4 Text Case: Standardize Text Formatting¶

• .text-lowercase: All lowercase.
• .text-uppercase: All uppercase.
• .text-capitalize: First letter of each word capitalized.

<p class="text-lowercase">HELLO WORLD → hello world</p>
<p class="text-uppercase">hello world → HELLO WORLD</p>
<p class="text-capitalize">hello world → Hello World</p>

2.5 Line Height and Spacing: Optimize Readability¶

• Line Height: lh-sm (small line height, 1.25), lh-base (default, 1.5), lh-lg (large line height, 2).
• Spacing: Adjust using margin utilities like .mb-* (margin-bottom) or .mt-* (margin-top).

<p class="lh-sm">Small line height (text is more compact)</p>
<p class="lh-lg">Large line height (text is more relaxed, ideal for long paragraphs)</p>
<p class="mb-3">This has margin-bottom to separate from the next paragraph</p>
<p class="mt-4">This has margin-top to separate from the previous paragraph</p>

2.6 Special Text Styles: Quotes, Lists, and Decorations¶

• Quotes: Use <blockquote class="blockquote"> with <footer class="blockquote-footer"> for attribution.
• Lists: .list-unstyled (remove list markers), .list-inline (inline list items).
• Text Decoration: .text-decoration-line-through (strikethrough), .text-decoration-none (remove underline).

<!-- Quote styling -->
<blockquote class="blockquote">
  <p>This is a quoted text with automatic left border and padding.</p>
  <footer class="blockquote-footer">Source: Bootstrap Documentation</footer>
</blockquote>

<!-- Unstyled list -->
<ul class="list-unstyled">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!-- Inline list -->
<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

<!-- Strikethrough text -->
<p class="text-decoration-line-through">This text has a strikethrough</p>

3. Key Considerations¶

1. Semantic Priority: Prefer <h1>-<h6> tags for titles (better for SEO and accessibility). Use .h1-.h6 classes only for styling when semantics are not critical.
2. Class vs. Tag: Avoid confusing .h1 (styling only) with <h1> (semantic heading).
3. Responsive Adjustments: Bootstrap 5 classes are responsive by default. For breakpoint-specific adjustments, use prefixes (e.g., .text-center-sm for small screens).

4. Summary¶

Mastering Bootstrap 5 typography basics requires memorizing core classes: .h1-.h6 (titles), .text-* (color/alignment), fw-* (weight), fst-* (italic), etc. These tools quickly enhance text aesthetics and structure, which, when combined with the grid system and components, will further elevate page quality.