Skip to content
Related Articles

Related Articles

Bootstrap 5 Text Line height

Improve Article
Save Article
  • Last Updated : 28 Nov, 2022
Improve Article
Save Article

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:

  • lh-1: This class is used to set the line height 1.
  • lh-sm: This class is used to set the line height small.
  • lh-base: This class is used to set the line height default.
  • lh-lg: This class is used to set the line height large.

Syntax:

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

Example 1: Below examples illustrate the Bootstrap 5 Text Line height. In this example, we will use the two classes for line height to compare with the default one.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link crossorigin="anonymous"
          rel="stylesheet"
          href=
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
 
<body class="ms-2 me-2">
    <h1 class="text-center text-success">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <p>
        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>
    <!-- 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 2: Below examples illustrate the Bootstrap 5 Text Line height. In this example, we will use all 4 classes of line-height classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
          crossorigin="anonymous"
          href=
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
 
<body class="ms-2 me-2">
    <h1 class="text-center text-success">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <!-- 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>


Output:

Bootstrap 5 Text Line height

Reference: https://getbootstrap.com/docs/5.0/utilities/text/#line-height


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!