Bootstrap Text Font Size

Last Updated : 07 May, 2024

Bootstrap Text Font Size refers to predefined classes provided by the Bootstrap framework to adjust the size of text elements. These classes, such as `fs-1` to `fs-6`, allow easy control over text size, enhancing readability and visual hierarchy within web pages.

Bootstrap 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 Text Font size:

Example 1: In this example, we demonstrates the usage of Bootstrap Font Size classes (fs-1, fs-3, fs-5) to control the font size of text elements within a container.

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 Bootstrap Font Size classes (fs-2, fs-4, fs-6) to adjust the font size of text elements within a container for improved readability and visual appeal.

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>