Bootstrap 5 Line height and Monospace


Line height determines the vertical space between lines of text and can be adjusted for improved readability and aesthetics. Bootstrap provides several classes for modifying line height. Here are the common line height utility classes in Bootstrap 5:

  • .lh-sm: This class sets a smaller line height, creating tighter line spacing.
  • .lh-base: This class sets the line height to the browser default, typically around 1.5.
  • .lh-lg: This class sets a larger line height, creating more generous line spacing.
  • .lh-1, .lh-1.25, .lh-1.5, .lh-1.75, .lh-2: These classes allow you to set a specific line height value. For example, lh-1.5 sets the line height to 1.5 times the font size.
Example 
<p class="lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique imperdiet massa, vitae gravida lorem.</p>
<p class="lh-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique imperdiet massa, vitae gravida lorem.</p>
<p class="lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique imperdiet massa, vitae gravida lorem.</p>
<p class="lh-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique imperdiet massa, vitae gravida lorem.</p>
Try it Yourself

Output:


Monospace

Change a selection to our monospace font stack with .font-monospace.This font looks like a typewriter print.

Example 
<p class="font-monospace">This text will be displayed in a monospace font.</p>
Try it Yourself

Output: