Bootstrap 5 Text Font Size

Last Updated : 09 Apr, 2024

Bootstrap 5 Text font size is used to set the text font size. We all know that we have 6 different header tags, and depending on that we have 6 classes to set the font size. Heading class applies font-size, font-weight and line-height properties.

Text Font size classes:

Class	Description
fs-1	Set text size equal to the h1 tag
fs-2	Set text size equal to the h2 tag
fs-3	Set text size equal to the h3 tag
fs-4	Set text size equal to the h4 tag
fs-5	Set text size equal to the h5 tag
fs-6	Set text size equal to the h6 tag

Syntax:

<tag class="fs-1">...</tag>

Examples of Bootstrap 5 Text Font Size

The below example illustrates the Bootstrap 5 Text Font size:

Example 1: In this example, we will use three sizes fs-1, fs-3, and fs-5.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
    </head>

    <body>
        <div class="container">
            <!-- Bootstrap Font Size classes used -->
            <u>Font size: fs-1</u>
            <p class="fs-1">
                A Computer Science Portal for
                Geeks
            </p>

            <u>Font size: fs-3</u>
            <p class="fs-3">
                A Computer Science Portal for
                Geeks
            </p>

            <u>Font size: fs-5</u>
            <p class="fs-5">
                A Computer Science Portal for
                Geeks
            </p>
        </div>
    </body>
</html>

Output:

Bootstrap 5 Text Font Size Example Output

Example 2: In this example, we will use three sizes fs-2, fs-4, and fs-6.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
    </head>

    <body>
        <div class="container">

            <!-- Bootstrap Font Size classes used -->
            <u>Font size: fs-2</u>
            <p class="fs-2">
                A Computer Science Portal for
                Geeks
            </p>
            <u>Font size: fs-4</u>
            <p class="fs-4">
                A Computer Science Portal for
                Geeks
            </p>
            <u>Font size: fs-6</u>
            <p class="fs-6">
                A Computer Science Portal for
                Geeks
            </p>
        </div>
    </body>
</html>