Bootstrap 5 Text Line height Last Updated : 08 Apr, 2024 Comments Improve Suggest changes Like Article Like 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: ClassDescriptionlh-1Set line height to 1lh-smSet line height to smalllh-baseSet line height to defaultlh-lgSet line height to largeSyntax: <tag class="Text Line height Class">...</tag>Examples of Bootstrap 5 Text Line heightExample 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/[email protected]/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/[email protected]/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> Output: Bootstrap 5 Text Line height Example Output Comment More infoAdvertise with us Next Article Bootstrap 5 Text Decoration S skyridetim Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Text Decoration Bootstrap 5 Text decoration classes are used to decorate the text components, like underlining, strike, etc. These classes can be used in many cases like on anchor tag sometime we do not want any underline. iframe { width: 100%; height: 370px;} @media (max-width: 1145px) {.article--viewer .a-wrapper 2 min read Bootstrap 5 Text In this article, we will discuss how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities. Text alignment: We can use text alignment classes to align the text in different positions in different viewports.Text wrapping and ove 4 min read Bootstrap Text Font Size Bootstrap Text Font Size refers to predefined classes provided by the Bootstrap framework to adjust the size of text elements. These classes, such as `fs-1` to `fs-6`, allow easy control over text size, enhancing readability and visual hierarchy within web pages. .article--viewer .a-wrapper .content 2 min read Bootstrap 5 Progress Height Bootstrap 5 Progress Height is used to set the height of the progress bar. To set the height of the progress bar, we will set the height property value of .progress class. Progress Height Used Class: .progress: It is the wrapper that indicates the max value of the progress bar..progress-bar: It is u 2 min read Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text 2 min read Bootstrap 5 Text Monospace Text Monospace is used to change a selection to our monospace font stack with .font-monospace. This font looks like a typewriter print. Bootstrap 5 Text Monospace Class: font-monospace: This class is used to change font stack with .font-monospace. Syntax: <tag class="font-monospace">...</ta 1 min read Like