Typography in Bootstrap

Last Updated : 05 Apr, 2024

Typography is a feature of Bootstrap for styling and formatting text content. It is used to create customized headings, inline subheadings, lists, and paragraphs, aligning, adding more design-oriented font styles, and much more. Bootstrap supports global settings for the font stack, Headings and Link styles to be used in the web app for every type of OS and Device to deliver the best user interface.

Typography can be used to create:

Headings
Subheadings
Text and Paragraph font color, font type, and alignment
Lists
Other inline elements

Some classes and Tags to implement the typography feature of bootstrap:

Inline Element	Description
h1 – h6	Font styling resembling a heading, without using the associated HTML element
text-muted	Fades the text, making it appear greyed out
display	Enhances headings for better visual presentation
lead	Makes a paragraph stand out visually
mark	Highlights the text
small	Creates secondary subheadings
initialism	Renders abbreviations in slightly smaller text size
blockquote	Indicates quoted content
blockquote-footer	Provides footer details for identifying the source of the quote
text-center	Aligns text to the center
list-inline	Makes list items appear inline
text-truncate	Shortens longer text by truncating with an ellipsis
text-uppercase	Transforms text to uppercase
text-lowercase	Transforms text to lowercase
text-capitalize	Transforms text to capitalize the first letter of each word, leaving other letters in lowercase
pre-scrollable	Makes a preformatted element scrollable
dl-horizontal	Aligns term and description elements side-by-side
list-unstyled	Removes default list-style and left margin from list items
text-right	Aligns text to the right
text-left	Aligns text to the left

Example 1: In this example we use Bootstrap classes to style headings and display properties. It includes headings from h1 to h3 with corresponding classes, along with display classes (display-3, display-4, and display-5) for different styles.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
            integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
            crossorigin="anonymous"
        />
        <title>Text-muted</title>
    </head>
    <body>
        <p class="h1">h1. Bootstrap heading</p>

        <p class="h2">h2. Bootstrap heading</p>

        <p class="h3">h3. Bootstrap heading</p>

        <h3 class="display-3">
            Display-3 property
        </h3>
        <h3 class="display-4">
            Display-4 property
        </h3>
        <h3 class="display-5">
            Display-5 property
        </h3>
    </body>
</html>

Output:

Bootstrap typographt heading and display property Example Output

Example 2: In this example we demonstrates Bootstrap typography features. It includes examples of muted text, lead paragraph, highlighted text using the mark element, blockquote with footer, and an abbreviation with initialism class.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
            integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
            crossorigin="anonymous"
        />
        <title>Bootstrap Typography</title>
    </head>
    <body>
        <!-- Muted text-->
        <p class="text-muted">
            GeeksforGeeks //A Muted Text.
        </p>
        <p>GeeksforGeeks - Normal Paragraph</p>
        <!-- using lead class-->
        <p class="lead">
            GeeksforGeeks - Lead Paragraph
        </p>
        <!-- using mark-->
        <mark>GeeksforGeeks - Highlighted</mark>

        <br><br>

        <!-- using blockquote tag and blockquote-footer class.-->
        <blockquote>GeeksforGeeks</blockquote>
        <blockquote class="blockquote-footer">
            a CS portal
        </blockquote>
        <!-- using initialism class-->
        <abbr
            title="GeeksforGeeks"
            class="text-success initialism"
        >
            GfG</abbr
        >
        is a CS portal
    </body>
</html>