Text Utilities
-
Style and align text using Bootstrap utility classes.
Introduction to Text Utilities
Text is the core content of any website.
How text looks, aligns, and behaves directly affects:Readability
Accessibility
Visual hierarchy
User experience
In Bootstrap 5, text utilities provide predefined classes to control text behavior without writing custom CSS.
What Are Text Utilities ?
Text utilities are Bootstrap classes that control:
Text alignment
Text transformation
Font weight
Font style
Line height
Text wrapping and overflow
Text decoration
They apply single-purpose styling, following the utility-first approach.
Text Alignment Utilities
What Is Text Alignment ?
Text alignment defines how text is positioned horizontally inside its container.
CSS equivalent:
text-align: center;
Bootstrap provides utility classes for alignment.
Text Alignment Classes
Class Effect text-start Align left (LTR) text-center Center text text-end Align right (LTR)
Bootstrap Text Alignment
Use Bootstrap text alignment classes to align text left, center, or right, and change alignment based on screen size.
<!-- Basic Text Alignment Examples -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Centered text</p>
<p class="text-end">Right aligned text</p>
<!-- Responsive Text Alignment -->
<p class="text-center text-md-start">
Centered on mobile, left aligned on desktop
</p>Behavior:
Mobile → center
Medium screens and above → left
Text Transformation Utilities
What Is Text Transformation ?
Text transformation controls letter casing without changing the actual content.
CSS equivalent:
text-transform: uppercase;
Bootstrap provides transformation utilities.
Text Transformation Utilities
What is Text Transformation ?
Text transformation controls letter casing without changing the actual content.
CSS equivalent:
text-transform: uppercase;
Bootstrap provides transformation utilities.
Bootstrap Text Transformation
Use Bootstrap text transformation classes to change text to uppercase, lowercase, or capitalize format.
<p class="text-uppercase">bootstrap utilities</p>
<p class="text-lowercase">BOOTSTRAP UTILITIES</p>
<p class="text-capitalize">bootstrap utilities</p>Important:
Content remains unchanged in HTML
Only visual appearance is modified
Font Weight Utilities
Font Weight Classes
Bootstrap provides font weight utilities for emphasis.
Class Weight fw-light Light fw-normal Normal fw-medium Medium fw-bold Bold fw-bolder Bolder
Bootstrap Font Weight
Use Bootstrap font weight classes to control the thickness of text such as bold or light.
<p class="fw-bold">Important text</p>
<p class="fw-light">Less emphasis text</p>Used for:
Headings
Highlights
UI labels
Font Style Utilities
Font Style Classes
Class Effect fst-normal Normal style fst-italic Italic style
Font Style
Use the fst-italic class in Bootstrap to apply italic styling to text.
<p class="fst-italic">Italic text example</p>Line Height Utilities
Line Height Classes
Line height improves readability, especially for paragraphs.
Class Effect lh-1 Tight line height lh-sm Small lh-base Default lh-lg Large
Bootstrap Line Height, Wrapping & Truncation
Use Bootstrap utilities to control line height, text wrapping behavior, and truncate long text with an ellipsis.
<!-- Line Height Example -->
<p class="lh-lg">
This paragraph has increased line height for better readability.
</p>
<!-- Text Wrapping -->
<p class="text-wrap">
This text will wrap normally inside the container.
</p>
<p class="text-nowrap">
This text will stay on one line and may overflow.
</p>
<!-- Text Truncation -->
<p class="text-truncate" style="max-width: 200px;">
This is a very long piece of text that will be truncated.
</p>Used in:
Cards
Tables
Lists
Dashboards
Text Decoration Utilities
Text Decoration Classes
Class Effect text-decoration-none Removes underline text-decoration-underline Underlined text text-decoration-line-through Strikethrough
Bootstrap Text Decoration & Combined Utilities
Use Bootstrap text decoration and utility classes together to control link styles, alignment, case, and font weight.
<!-- Text Decoration Example -->
<a href="#" class="text-decoration-none">
Link without underline
</a>
<!-- Combining Text Utilities -->
<h5 class="text-center text-uppercase fw-bold">
Section Title
</h5>This applies:
Center alignment
Uppercase letters
Bold font weight
No custom CSS needed.
Common Mistakes
Overusing uppercase text
Using alignment utilities inconsistently
Applying text utilities without considering readability
Ignoring responsive text alignment
Using text utilities for layout instead of spacing or flex
Best Practices for Text Utilities
Use text utilities to enhance readability
Prefer default styles unless change is needed
Use responsive alignment thoughtfully
Avoid excessive transformations
Maintain consistent typography hierarchy