Bootstrap 5 Typography

Last Updated : 10 Apr, 2024

Bootstrap 5 Typography styles and formats text, providing customized headings, subheadings, lists, paragraphs, and font styles. It supports global settings for font stack, headings, link styles, ensuring consistency across devices.

Here's the information represented in a table format:

Term	Description
Headings	Classes available from `.h1` to `.h6`. Helps create font-style-like headings without HTML heading tags.
Display headings	Classes from `.display-1` to `.display-6`. Used for larger font size and lighter font weight headings.
Lead	Uses `.lead` class for creating standout paragraphs.
Inline text elements	Provides styling for common HTML elements. For example, `<mark>` tag for highlighting text within paragraphs.
Text utilities	Used for changing text alignment, style, weight, line-height, and other decorations.
Blockquotes	`<blockquote>` tag used to display long quotations, with unique alignment.
Lists	Used to style lists on the webpage, removing pre-defined styles and adding new ones.

Syntax:

<p class="Typography classes">
    ...
</p>

Example 1: Let us see an example of Typography Headings.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-5">
        <h3>Bootstrap 5 Typography</h3>

        <div class="h6">GeeksforGeeks</div>
        <div class="h5">GeeksforGeeks</div>
        <div class="h4">GeeksforGeeks</div>
        <div class="h3">GeeksforGeeks</div>
        <div class="h2">GeeksforGeeks</div>
        <div class="h1">GeeksforGeeks</div>
    </body>
</html>

Output:

Example 2: Let us see an example of display heading classes.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-5">
     
        <h3>Bootstrap5 Typography display</h3>
        <p class="display-5">GFG 5</p>
        <p class="display-4">GFG 4</p>
        <p class="display-3">GFG 3</p>
        <p class="display-2">GFG 2</p>
        <p class="display-1">GFG 1</p>
    </body>
</html>

Output:

display

Bootstrap 5 Images

ys973caiv

Improve

Article Tags :

Bootstrap 5 Typography

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?