Bootstrap Text Utilities

Bootstrap 5 comes loaded with helper classes specifically designed to format text. These utilities allow you to align paragraphs, change the thickness of fonts, capitalize words, and even truncate long text—all without writing a single line of custom CSS.

1. Text Alignment

You can easily realign text to components with text alignment classes. Note that Bootstrap 5 changed "left" and "right" to start and end to properly support Right-to-Left (RTL) languages like Arabic.

Left aligned text (start).

Center aligned text.

Right aligned text (end).

<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

2. Text Transformation

Transform text in components with text capitalization classes. This is very useful when pulling untidy data from a database (e.g., automatically capitalizing a user's name).

Lowercased text.

Uppercased text.

CapiTaliZed tExt (capitalizes the first letter of each word).

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">UPPERCASED TEXT.</p>
<p class="text-capitalize">Capitalized Text.</p>

3. Font Weight and Italics

Quickly change the weight (boldness) of text or italicize it using .fw-* for font-weight and .fst-* for font-style.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style (removes italics).

<p class="fw-bold">Bold text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fst-italic">Italic text.</p>

4. Text Wrapping and Overflows

Sometimes you’ll have a long string of text (like a URL) that accidentally breaks out of its column. You can use these utility classes to handle overflows cleanly.

Preventing Text Wrap

Use .text-nowrap to physically stop text from wrapping onto a new line, forcing it to stay horizontally unbroken.

This text should wrap, but it does not because of text-nowrap!

<div class="text-nowrap" style="width: 8rem;">
    This text should wrap, but it does not because of text-nowrap!
</div>

Text Truncation

If you have content that is too long to fit in its container, you can truncate it with an ellipsis (...) using the .text-truncate class.

Important Note: The .text-truncate class strictly requires the element to either be a block level element, or an inline-block element with a predefined width.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<!-- Block level element in a grid -->
<div class="col-4 text-truncate">
    Praesent commodo cursus magna...
</div>

<!-- Inline element with set max-width -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
    Praesent commodo cursus magna...
</span>

« Previous Lesson Next Lesson »