Bootstrap 5 Text Line height

Last Updated : 08 Apr, 2024

Text Line height classes are used to set the gap between the two lines. there are several classes to set the line height. The default line height of the class is lh-base.

Bootstrap 5 Text Line height Classes:

Class	Description
lh-1	Set line height to 1
lh-sm	Set line height to small
lh-base	Set line height to default
lh-lg	Set line height to large

Syntax:

<tag class="Text Line height Class">...</tag>

Examples of Bootstrap 5 Text Line height

Example 1: In this example we are using Bootstrap 5’s line-height classes (lh-1 and lh-base) to adjust the line height of paragraphs containing text

HTML

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

    <body class="ms-2 me-2">
        <h1>Bootstrap 5 Text Line height</h1>
        <!-- Bootstrap 5 Line height Class used-->
        <p class="lh-1">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
        <p class="lh-base">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
    </body>
</html>

Output:

Bootstrap 5 Text Line height Example Output

Example 2: In this example we are using Bootstrap 5’s line-height classes (lh-1, lh-base, lh-sm, lh-lg) to adjust text line height in paragraphs.

HTML

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

    <body class="ms-2 me-2">
        <!-- Bootstrap 5 Line height Class used-->
        <p><u>Text Line: lh-1</u></p>
        <p class="lh-1">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
        <p><u>Text Line: lh-base</u></p>
        <p class="lh-base">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
        <p><u>Text Line: lh-sm</u></p>
        <p class="lh-sm">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
        <p><u>Text Line: lh-lg</u></p>
        <p class="lh-lg">
            Geeksforgeeks: A Computer Science
            Portal for Geeks, here we Geeks learn
            Together. Helping each other will help
            us to clear the concept of better
            learning.
        </p>
    </body>
</html>