Bootstrap Typography

Overview

Bootstrap provides a complete typography system including styles for headings, paragraphs, lists, and other text elements. These styles ensure cross-browser consistency and good readability.

Headings

HTML Headings

Bootstrap provides styles for all HTML heading elements (<h1> to <h6>):

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Heading Classes

When you want the styling of a heading but cannot use the associated HTML element, you can use .h1 to .h6 classes:

<p class="h1">Paragraph that looks like h1</p>
<p class="h2">Paragraph that looks like h2</p>
<p class="h3">Paragraph that looks like h3</p>
<p class="h4">Paragraph that looks like h4</p>
<p class="h5">Paragraph that looks like h5</p>
<p class="h6">Paragraph that looks like h6</p>

Display Headings

Traditional heading elements are designed to work in the hierarchy of your page content. When you need a heading to stand out, you can use display headings:

<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>

Paragraphs

Basic Paragraphs

<p>This is a regular paragraph. Bootstrap provides appropriate line height and bottom margin for paragraphs.</p>
<p>This is another paragraph, showing the spacing between paragraphs.</p>

Lead Paragraph

Use the .lead class to make a paragraph stand out:

<p class="lead">
    This is a lead paragraph. It stands out more than regular paragraphs and is typically used for important introductory text.
</p>

Inline Text Elements

Marked Text

<p>You can use the <mark>mark tag</mark> to highlight text.</p>

Deleted Text

<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

Inserted Text

<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>

Small Text

<p><small>This line of text is meant to be treated as fine print.</small></p>

Bold and Italic

<p><strong>This line of text renders as bold text.</strong></p>
<p><em>This line of text renders as italic text.</em></p>

Text Utility Classes

Text Alignment

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

Text Wrapping and Overflow

<p class="text-wrap">This is a piece of text that will wrap.</p>
<p class="text-nowrap">This is a piece of text that will not wrap.</p>
<p class="text-break">This is a piece of text that will break at long words.</p>

Text Transformation

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Font Weight and Italics

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder text (relative to the parent element).</p>
<p class="fw-semibold">Semibold text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light text.</p>
<p class="fw-lighter">Lighter text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Normal style text.</p>

Lists

Unstyled Lists

Remove the default list-style and left margin:

<ul class="list-unstyled">
    <li>This is a list item.</li>
    <li>And another list item.</li>
    <li>But they don't have bullets.</li>
</ul>

Inline Lists

Place list items on the same line:

<ul class="list-inline">
    <li class="list-inline-item">This is a list item.</li>
    <li class="list-inline-item">And another list item.</li>
    <li class="list-inline-item">But they're all on the same line.</li>
</ul>

Description List Alignment

Align terms and descriptions using grid system's predefined classes:

<dl class="row">
    <dt class="col-sm-3">Description lists</dt>
    <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    
    <dt class="col-sm-3">Term</dt>
    <dd class="col-sm-9">
        <p>Definition for the term.</p>
        <p>And some more placeholder definition text.</p>
    </dd>
    
    <dt class="col-sm-3">Another term</dt>
    <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
</dl>

Blockquotes

Basic Blockquote

<blockquote class="blockquote">
    <p>Life is short, use Python.</p>
</blockquote>

Blockquote Source

<blockquote class="blockquote">
    <p>Life is short, use Python.</p>
    <footer class="blockquote-footer">
        From <cite title="Python Community">Python Developer</cite>
    </footer>
</blockquote>

Centered Blockquote

<blockquote class="blockquote text-center">
    <p>Life is short, use Python.</p>
    <footer class="blockquote-footer">
        From <cite title="Python Community">Python Developer</cite>
    </footer>
</blockquote>

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Typography Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1 class="display-4">Bootstrap Typography System</h1>
        <p class="lead">This is an example page showcasing Bootstrap typography features.</p>
        
        <hr>
        
        <h2>Heading Examples</h2>
        <h1>Main Heading (h1)</h1>
        <h2>Secondary Heading (h2)</h2>
        <h3>Tertiary Heading (h3)</h3>
        
        <h2>Paragraphs and Text</h2>
        <p>This is a regular paragraph. Bootstrap provides good default typography styles.</p>
        <p class="lead">This is a lead paragraph, used for important introductory text.</p>
        
        <p>You can use various inline elements:</p>
        <ul>
            <li><strong>Bold text</strong></li>
            <li><em>Italic text</em></li>
            <li><mark>Highlighted text</mark></li>
            <li><small>Small text</small></li>
        </ul>
        
        <h2>Text Alignment</h2>
        <p class="text-start">Left aligned text</p>
        <p class="text-center">Center aligned text</p>
        <p class="text-end">Right aligned text</p>
        
        <h2>Blockquotes</h2>
        <blockquote class="blockquote">
            <p>Is it not a pleasure to learn and to repeat from time to time what has been learned?</p>
            <footer class="blockquote-footer">
                From <cite title="Analects">Confucius</cite>
            </footer>
        </blockquote>
        
        <h2>Lists</h2>
        <h3>Unstyled List</h3>
        <ul class="list-unstyled">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
        
        <h3>Inline List</h3>
        <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>
    </div>
</body>
</html>

Responsive Typography

Bootstrap's typography is responsive, with font sizes automatically adjusting based on screen size. You can also use responsive utility classes:

<!-- Responsive text alignment -->
<p class="text-start text-md-center text-lg-end">
    Left aligned on small screens, centered on medium, right aligned on large
</p>

<!-- Responsive font size -->
<h1 class="fs-1 fs-md-2 fs-lg-3">Responsive heading</h1>

Best Practices

1. Maintain hierarchy: Use heading hierarchy correctly (h1-h6)
2. Use lead paragraphs appropriately: Only use .lead for important introductory text
3. Consider readability: Ensure sufficient contrast between text color and background
4. Responsive considerations: Test text readability on different devices
5. Semantic markup: Use correct HTML elements to express content meaning

Next Steps

Now that you've mastered Bootstrap's typography system, we'll next learn about the color system.

Next Chapter: Bootstrap Colors →