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
<!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">
w3wiki: 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">
w3wiki: 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:
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.
<!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">
w3wiki: 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">
w3wiki: 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">
w3wiki: 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">
w3wiki: 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
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>