Bootstrap Typography

Typography refers to the design and presentation of text on a webpage. It includes font size, weight, style, spacing, alignment, and hierarchy.

Good typography makes website content easier to read and understand.

Bootstrap provides sensible default styling for common HTML text elements such as headings, paragraphs, lists, and other elements.

<h1>Bootstrap Typography</h1>

<p>
This is a Bootstrap paragraph.
</p>

Bootstrap's CSS applies its typography styles automatically when the Bootstrap stylesheet is loaded.

Bootstrap styles the standard HTML heading elements from <h1> through <h6>.

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

Bootstrap provides larger display heading classes from display-1 through display-6.

<h1 class="display-1">
    Display Heading
</h1>

Display headings are useful for large titles and hero sections.

Bootstrap provides six display heading sizes.

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

The smaller display number represents a larger display heading.

The .lead class makes a paragraph stand out from normal body text.

<p class="lead">
    Welcome to our Bootstrap tutorial.
</p>

It is commonly used for introductory text.

Bootstrap provides utility classes for aligning text.

<p class="text-start">
    Left Aligned Text
</p>

<p class="text-center">
    Center Aligned Text
</p>

<p class="text-end">
    Right Aligned Text
</p>

These utilities use Bootstrap's responsive and utility system.

Text alignment can also change at different breakpoints.

<p class="text-start text-md-center">
    Responsive Text
</p>

This text is left-aligned by default and centered from the medium breakpoint upward.

Bootstrap provides font-weight utility classes.

<p class="fw-light">
    Light Text
</p>

<p class="fw-normal">
    Normal Text
</p>

<p class="fw-bold">
    Bold Text
</p>

Other useful classes include fw-medium and fw-semibold.

Bootstrap provides classes for normal and italic text styles.

<p class="fst-normal">
    Normal Text
</p>

<p class="fst-italic">
    Italic Text
</p>

Bootstrap provides classes for changing the visual case of text.

<p class="text-lowercase">
    HELLO WORLD
</p>

<p class="text-uppercase">
    hello world
</p>

<p class="text-capitalize">
    hello world
</p>

These classes change the visual presentation of text without requiring you to manually change the text content.

Bootstrap provides contextual text color utilities.

<p class="text-primary">
    Primary Text
</p>

<p class="text-success">
    Success Text
</p>

<p class="text-danger">
    Danger Text
</p>

<p class="text-warning">
    Warning Text
</p>

The text-body-secondary utility can be used for less prominent secondary text.

<p class="text-body-secondary">
    This is secondary information.
</p>

It is useful for descriptions, supporting information, and metadata.

Bootstrap provides text-decoration utilities.

<p class="text-decoration-underline">
    Underlined Text
</p>

<p class="text-decoration-line-through">
    Deleted Text
</p>

<p class="text-decoration-none">
    No Decoration
</p>

The text-wrap utility allows text to wrap normally. The text-nowrap utility prevents normal wrapping.

<div class="text-wrap">
    This is wrapping text.
</div>

<div class="text-nowrap">
    This text does not wrap normally.
</div>

Use text-nowrap carefully because long content may overflow its container.

The text-truncate utility can truncate overflowing text with an ellipsis when the element has appropriate width constraints.

<div
class="text-truncate"
style="max-width: 250px;">

    This is a very long text that may be truncated.

</div>

The text will display an ellipsis when it overflows the available single-line space.

The text-break utility helps long words or strings break when they would otherwise overflow their container.

<p class="text-break">
    verylongwordexamplethatneedstobreak
</p>

This can be useful for long URLs and other unbroken strings.

Bootstrap provides the user-select-all, user-select-auto, and user-select-none utilities.

<p class="user-select-all">
    Click this text to select it all.
</p>

<p class="user-select-none">
    This text cannot normally be selected.
</p>

Normal HTML inline elements can be combined with Bootstrap typography utilities.

<p>
    Learn
    <strong>Bootstrap</strong>
    and become a
    <em>better developer</em>.
</p>

HTML elements such as <strong> and <em> provide semantic meaning in addition to visual styling.

The HTML <blockquote> element can be used to display quoted content.

<blockquote class="blockquote">

    <p>
        Learning never stops.
    </p>

</blockquote>

Bootstrap's blockquote class provides suitable styling for the quotation.

You can use blockquote-footer for the source or author of a quotation.

<figure>

    <blockquote class="blockquote">

        <p>
            Practice makes progress.
        </p>

    </blockquote>

    <figcaption class="blockquote-footer">
        Learning Principle
    </figcaption>

</figure>

Bootstrap works with standard HTML unordered and ordered lists.

<ul>

    <li>HTML</li>
    <li>CSS</li>
    <li>Bootstrap</li>

</ul>

You can also use Bootstrap utility classes to customize list appearance.

The list-unstyled class removes the default list markers and left padding from an unordered or ordered list.

<ul class="list-unstyled">

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ul>

The list-inline and list-inline-item classes can be used to display list items horizontally.

<ul class="list-inline">

    <li class="list-inline-item">
        Home
    </li>

    <li class="list-inline-item">
        About
    </li>

    <li class="list-inline-item">
        Contact
    </li>

</ul>

Bootstrap provides font-size utilities such as fs-1 through fs-6.

<p class="fs-1">
    Large Text
</p>

<p class="fs-4">
    Medium Text
</p>

<p class="fs-6">
    Smaller Text
</p>

These classes provide a convenient way to control font size using the Bootstrap utility system.

Bootstrap provides line-height utilities from lh-1 through lh-lg.

<p class="lh-1">
    Compact line height.
</p>

<p class="lh-base">
    Normal line height.
</p>

<p class="lh-lg">
    Larger line height.
</p>

Line-height utilities are useful for controlling the vertical spacing between lines of text.

Bootstrap typography utilities can be combined with responsive display and spacing utilities to build adaptable text layouts.

<h1 class="display-4 text-center text-md-start">

    Welcome

</h1>

The heading is centered by default and becomes left-aligned from the medium breakpoint upward.

• Using too many large headings on one page.
• Ignoring readability and contrast.
• Using very small font sizes for important content.
• Using text-nowrap on content that must wrap.
• Using decorative styles instead of semantic HTML elements.
• Using typography classes without understanding their purpose.
• Creating inconsistent text hierarchy across pages.

• Use semantic HTML headings in a logical order.
• Use display headings for prominent titles.
• Use lead for introductory paragraphs when appropriate.
• Use font-weight utilities for emphasis.
• Use text alignment utilities instead of unnecessary custom CSS.
• Keep body text comfortable to read.
• Use responsive typography utilities when needed.
• Maintain a consistent visual hierarchy.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">

    <title>
        Bootstrap Typography
    </title>

    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

<div class="container py-5">

    <h1 class="display-4 text-center">
        Learn Bootstrap
    </h1>

    <p class="lead text-center">
        Build responsive and beautiful websites.
    </p>

    <hr>

    <h2 class="fw-bold">
        Our Courses
    </h2>

    <p class="text-body-secondary">
        Choose a course and start learning today.
    </p>

    <div class="row g-4 mt-2">

        <div class="col-md-4">

            <div class="card h-100">

                <div class="card-body">

                    <h3 class="fw-bold">
                        HTML
                    </h3>

                    <p>
                        Learn the structure of webpages.
                    </p>

                    <p class="text-success fw-semibold">
                        Beginner Friendly
                    </p>

                </div>

            </div>

        </div>

        <div class="col-md-4">

            <div class="card h-100">

                <div class="card-body">

                    <h3 class="fw-bold">
                        CSS
                    </h3>

                    <p>
                        Learn webpage styling and layouts.
                    </p>

                    <p class="text-primary fw-semibold">
                        Design Skills
                    </p>

                </div>

            </div>

        </div>

        <div class="col-md-4">

            <div class="card h-100">

                <div class="card-body">

                    <h3 class="fw-bold">
                        Bootstrap
                    </h3>

                    <p>
                        Learn responsive web design.
                    </p>

                    <p class="text-danger fw-semibold">
                        Responsive Design
                    </p>

                </div>

            </div>

        </div>

    </div>

    <blockquote class="blockquote mt-5">

        <p>
            Practice is the key to improvement.
        </p>

        <footer class="blockquote-footer">
            Learning Principle
        </footer>

    </blockquote>

</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

This example combines Bootstrap display headings, lead text, text alignment, font weights, contextual text colors, cards, grid classes, and blockquotes.