Open In App

Bootstrap 5 Text Line height

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 28 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads