What Is Bootstrap 5 Text Utilities?
Bootstrap 5 text utilities are CSS classes that control how text is aligned, wrapped, transformed and decorated without writing custom CSS, for example .text-center, .text-nowrap, .text-uppercase and .text-decoration-none. The alignment classes also have responsive versions such as .text-md-start, so text can be centred on phones and aligned to the start on larger screens.
What Are Bootstrap 5 Text Utilities?
Text utilities are part of Bootstrap's utility API, a set of single-purpose classes that each change one CSS property. They cover text alignment (.text-start, .text-center, .text-end), wrapping and overflow (.text-wrap, .text-nowrap, .text-break, .text-truncate), transformation (.text-lowercase, .text-uppercase, .text-capitalize), decoration (.text-decoration-underline, .text-decoration-line-through, .text-decoration-none) and a few related helpers such as .text-reset, which makes an element inherit its parent's colour, and .font-monospace. They sit alongside Bootstrap's other typography utilities for size (.fs-1 to .fs-6), weight (.fw-*), style (.fst-italic), line height (.lh-1, .lh-sm, .lh-base, .lh-lg) and colour (.text-primary, .text-body-secondary). Bootstrap 5 renamed version 4's .text-left and .text-right to .text-start and .text-end so they flip correctly in right-to-left layouts, and it dropped .text-justify.
How Bootstrap 5 Text Utilities Work
Each class maps to one CSS declaration marked !important, so it overrides component styles regardless of source order. .text-center sets text-align: center, .text-uppercase sets text-transform: uppercase, and .text-nowrap sets white-space: nowrap, which keeps text on one line even if it overflows its container. .text-wrap does the opposite (white-space: normal), which is useful inside components that prevent wrapping, such as badges. .text-break applies word-wrap: break-word and word-break: break-word, so a long URL or code string breaks instead of stretching a narrow column. .text-truncate combines overflow: hidden, text-overflow: ellipsis and white-space: nowrap to cut a single line with an ellipsis; it only works on elements that are display: block or inline-block. Alignment classes are responsive and follow the grid breakpoints (sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px): .text-center .text-lg-start centres text below 992px and aligns it to the start from 992px upwards. Classes that use "start" and "end" follow the document direction, so on a page with dir="rtl", .text-start aligns text to the right. Wrapping, transform and decoration classes are not responsive by default, but the utilities API can generate responsive versions if you need them.
Best Practices for Bootstrap 5 Text Utilities
Use utilities for small, local adjustments and a custom class when the same combination repeats across many elements; five utilities on every heading is a sign the style belongs in your CSS or Sass. Choose .text-start and .text-end rather than hard-coded left and right alignment so the layout adapts to right-to-left languages. Centre short content such as hero headlines, section intros and card titles, but keep paragraphs longer than two or three lines aligned to the start, because a ragged starting edge makes long text harder to read. Use .text-uppercase for small labels and eyebrow text rather than typing capitals into the HTML, since some screen readers may read words typed in capitals letter by letter, and the transformed text stays easy to edit; add a little letter spacing in CSS to keep uppercase labels legible. Apply .text-truncate only when the full text is available elsewhere, for example in a title attribute or on a detail page, so no information is lost. Use .text-break in table cells and narrow columns that display user-generated content, email addresses or URLs. Do not remove underlines from links inside body text with .text-decoration-none unless another visual cue makes them identifiable, because WCAG's use-of-colour criterion means colour alone is often not enough to identify a link. Finally, prefer semantic elements such as <em>, <strong> and <del> when text carries meaning, and use utility classes when the change is purely visual.
Bootstrap 5 Text Utilities and Canvas Builder
Canvas Builder generates Bootstrap 5 markup, so alignment, wrapping and text transforms in the generated pages can be adjusted with the standard text utilities in the exported HTML. For example, switching a centred hero to start-aligned text on desktop is a matter of adding .text-lg-start. The free Bootstrap 5 Cheatsheet on canvasbuilder.co lists these classes with plain descriptions.
Frequently asked questions
How do I centre text in Bootstrap 5?
Add .text-center to the element or its parent, for example <p class="text-center">. To centre text only on small screens, combine classes such as .text-center .text-md-start, which centres text below 768px and aligns it to the start from 768px upwards. To centre a block element itself rather than its text, use .mx-auto with a set width, or flexbox utilities.
What replaced text-left and text-right in Bootstrap 5?
Bootstrap 5 uses .text-start and .text-end instead of .text-left and .text-right. The new names describe the start and end of the reading direction, so they work correctly for both left-to-right and right-to-left languages. The responsive versions follow the same pattern, such as .text-md-end.
How do I truncate text with an ellipsis in Bootstrap 5?
Add .text-truncate to an element that is display: block or display: inline-block and has a limited width. The text is cut to one line and ends with an ellipsis. For multi-line truncation you need custom CSS such as -webkit-line-clamp, because Bootstrap does not include a multi-line class.
Is there a text-justify class in Bootstrap 5?
No, Bootstrap 5 dropped .text-justify. Justified text can create uneven gaps between words that make paragraphs harder to read, especially in narrow columns, so start-aligned text is usually the better choice. If you still need justification, add a custom class with text-align: justify.