PHP Bootstrap 5 Typography

Table of Contents

Default Settings

Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem(16px by default). You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:

Example 1

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container mt-3">
        <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
        <h1>h1 Bootstrap heading</h1>
        <h2>h2 Bootstrap heading</h2>
        <h3>h3 Bootstrap heading</h3>
        <h4>h4 Bootstrap heading</h4>
        <h5>h5 Bootstrap heading</h5>
        <h6>h6 Bootstrap heading</h6>
    </div>

</body>

</html>

Result View Example

.h1 to .h6

Example 2

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container mt-3">
        <p class="h1">h1 Bootstrap heading</p>
        <p class="h2">h2 Bootstrap heading</p>
        <p class="h3">h3 Bootstrap heading</p>
        <p class="h4">h4 Bootstrap heading</p>
        <p class="h5">h5 Bootstrap heading</p>
        <p class="h6">h6 Bootstrap heading</p>
    </div>

</body>

</html>

Result View Example

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are six classes to choose from: .display-1 to .display-6:

Example 3

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container mt-3">
        <h1>Display Headings</h1>
        <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
        <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>
    </div>

</body>

</html>

Result View Example

Document

Document in project

You can Download PDF file.

Refference