Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style text with Bootstrap 5.

Word Break

Bootstrap provides the .text-break class to set the word-wrap: reak-word CSS property.

For example, we can write:

<p class="text-break">  
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff  
</p>

to add a p element with the long word broken up to prevent overflowing the viewport.

Text Transform

We can transform text to upper case, lower case, or capitalized case with various classes.

For example, we can write:

<p class="text-lowercase">lower case</p>  
<p class="text-uppercase">upper case</p>  
<p class="text-capitalize">capital case</p>

to change the case of the text in the classes.

text-lowercase changes the text to lower case.

text-uppercase change the text to upper case.

text-capitalize change the case to capitalized case.

Font Weight and Italics

We can also make text bold or italic with classes provided by Bootstrap 5.

For example, we can write:

<p class="font-weight-bold">Bold text.</p>  
<p class="font-weight-bolder">Bolder text</p>  
<p class="font-weight-normal">Normal text.</p>  
<p class="font-weight-light">Light text.</p>  
<p class="font-weight-lighter">Lighter text.</p>  
<p class="font-italic">Italic text.</p>  
<p class="font-normal">unstyled text</p>

The font-weight-bold class makes text bold.

font-weitght-bolder makes text bolder relative to the parent.

font-weight-light makes text light.

font-weight-lighter makes text lighter relative to the parent.

font-italic makes text italic.

font-normal makes text unstyled.

Line Height

We can change the line height with the .lh-* classes.

For example, we can write:

<p class="lh-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p>

lh-l makes the space between each line short.

lh-sm makes the space between each line a bit bigger.

lh-base makes the space between each line bigger than lh-sm.

lh-l makes the space between each line large.

Monospace

We can make text monospace with the font-monospace class.

For example, we can write:

<p class="font-monospace">monospace</p>

to show text in a monospaced font.

Reset Color

To make a piece of text or a link’s color reset to the same style as the parent, we can use the .text-reset class.

For example, we can write:

<p class="text-muted">  
  <a href="#" class="text-reset">reset link</a>.  
</p>

Since we have the text-muted class make the text muted in the p element.

text-reset will make that style apply to the link.

Text Decoration

Bootstrap 5 has classes for changing text decoration.

For example, we can write:

<p class="text-decoration-underline">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p><p class="text-decoration-line-through">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p><a href="#" class="text-decoration-none">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</a>

text-decoration-underline makes the text underlined.

text-decoration-line-through makes the text have a line going through the middle.

text-decoration-none removes all text decorations.

Conclusion

Bootstrap 5 provides many classes for styling text our way.

They include underline, strikethrough, muted text, and more.