Typography Features

🔹 Headings

Bootstrap headings provide six levels of semantic structure with built-in responsive sizing for optimal display across all devices. Using HTML tags like <h1> to <h6> or applying classes such as .h1 through .h6 to any element ensures consistent font weight, spacing, and visual hierarchy. This system is crucial for SEO as it helps search engines understand your content's organization. Proper heading usage improves accessibility for screen readers and enhances scannability for users, directly contributing to better user engagement and search rankings by clearly defining sections and subsections.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Heading classes -->
<p class="h1">Looks like h1</p>
<p class="h2">Looks like h2</p>

🔹 Display Headings

Display headings are designed for high-impact, large-scale typography ideal for hero sections, landing pages, or any area requiring immediate visual dominance. Use classes from .display-1 (largest) to .display-6 (smallest) to create attention-grabbing titles that stand out from regular headings. These classes feature a distinct, often bolder, font stack and larger size increments. From an SEO and UX perspective, they are perfect for primary value propositions or key conversion points, helping to reduce bounce rates by instantly communicating your page's main intent and improving content structure for search engine crawlers.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

🔹 Lead Paragraph

This is a regular paragraph with normal styling.

<p class="lead">
    This is a lead paragraph. It stands out from regular text 
    and is perfect for introductions or important information.
</p>

<p>
    This is a regular paragraph with normal styling.
</p>

🔹 Text Alignment

Control the horizontal alignment of text with Bootstrap's responsive utility classes: .text-start, .text-center, .text-end, and .text-justify. These classes can be combined with breakpoint modifiers (e.g., .text-md-center) to change alignment based on screen size, optimizing readability for mobile, tablet, and desktop users. Proper text alignment improves visual structure and user experience, which contributes to lower bounce rates. For SEO, a clean, readable layout encourages users to consume more content, sending positive engagement signals to search engines about your page's quality and relevance.

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>

<!-- Responsive alignment -->
<p class="text-start text-md-center">
    Left on mobile, centered on tablet and up
</p>

🔹 Text Transformation

capitalized text

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

🔹 Font Weight and Style

Fine-tune typography with utilities for font weight (.fw-bold, .fw-light, .fw-normal) and font style (.fst-italic, .fst-normal). These classes allow you to establish a clear visual hierarchy without writing custom CSS, making your code more maintainable and your site faster to load—a direct Core Web Vitals and SEO advantage. Using .fw-bold for key terms or .fst-italic for citations helps guide the user's eye and improves content comprehension, leading to better engagement metrics that search engines use to evaluate page quality and relevance.

<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-light">Light weight text</p>
<p class="fw-lighter">Lighter weight text</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>

🔹 Text Decoration

Line through text

<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Line through text</p>
<a href="#" class="text-decoration-none">Link with no underline</a>

🔹 Lists

Bootstrap offers styled (.list-unstyled, .list-inline) and description list (<dl>) utilities for creating organized content. Use .list-inline for horizontal navigation or feature rows, and .list-unstyled for clean content lists without bullets. Well-structured lists improve content scannability for users and crawlers, enhancing semantic meaning. For SEO, lists often contain keyword-rich content and break information into digestible chunks, increasing the likelihood of featured snippets. They also improve accessibility, making your site usable for a wider audience, which aligns with Google's emphasis on inclusive, high-quality web experiences.

<!-- Unstyled list -->
<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</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>

🔹 Blockquotes

Style quotations with the .blockquote class and add a source using .blockquote-footer for proper attribution. This component visually distinguishes quoted text, making it ideal for testimonials, expert citations, or highlighting key statements. Proper use of blockquotes adds credibility and richness to your content, which users and search engines value. Citing sources can also encourage backlinks and establish topical authority. The semantic styling improves readability and shareability, as well-formatted quotes are more likely to be used in social media snippets, indirectly driving traffic and improving your site's SEO profile.

<blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">
        Someone famous in <cite title="Source Title">Source Title</cite>
    </footer>
</blockquote>