📝 Bootstrap 5 – Text Utilities: Alignment, Wrapping, Sizing & More
🧲 Introduction – Why Use Text Utilities in Bootstrap 5?
Bootstrap 5 offers a full suite of text utility classes that help you style, align, transform, wrap, truncate, and size your text without needing custom CSS. These utilities enable fast development of clean, consistent typography across different devices and screen sizes.
🎯 In this guide, you’ll learn:
- How to align and transform text responsively
- Use text wrapping, truncation, and reset utilities
- Control text sizes and weight with Bootstrap classes
- Apply responsive text behaviors for real-world components
✅ Example 1 – Text Alignment Utilities
<p class="text-start">Aligned left (start)</p>
<p class="text-center">Aligned center</p>
<p class="text-end">Aligned right (end)</p>
| Class | Description |
|---|---|
text-start | Aligns text to the left (LTR) |
text-center | Aligns text to the center |
text-end | Aligns text to the right (LTR) |
📱 Add responsive suffixes like text-md-end for alignment on specific breakpoints.
✅ Example 2 – Text Wrapping & Truncation
<div class="text-nowrap bg-light border p-2">This text will not wrap to the next line</div>
<div class="text-truncate" style="width: 150px;">
This long text will be truncated with ellipsis
</div>
| Class | Description |
|---|---|
text-nowrap | Prevents wrapping (text stays in one line) |
text-truncate | Truncates text with ... if it overflows width |
⚠️ text-truncate works only with overflow: hidden; and a fixed width container.
✅ Example 3 – Text Transformation Utilities
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize every word</p>
| Class | Description |
|---|---|
text-lowercase | Converts all letters to lowercase |
text-uppercase | Converts all letters to uppercase |
text-capitalize | Capitalizes the first letter of each word |
📌 Great for headings, navigation labels, or titles.
✅ Example 4 – Font Weight and Italics
<p class="fw-bold">Bold font weight</p>
<p class="fw-light">Light font weight</p>
<p class="fst-italic">Italic text style</p>
| Class | Effect |
|---|---|
fw-bold | Makes text bold |
fw-light | Applies light weight |
fst-italic | Italicizes text |
🧱 You can combine them for stylized emphasis: fw-bold fst-italic.
✅ Example 5 – Responsive Text Sizing
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-3">Font size 3</p>
<p class="fs-6">Font size 6 (smallest)</p>
| Class | Font Size Purpose |
|---|---|
fs-1 | Largest heading-sized text |
fs-6 | Smallest readable text |
🎯 Ideal for dashboards, headers, footers, cards, and buttons.
📘 Text Utility Class Reference
| Utility Group | Common Classes |
|---|---|
| Alignment | text-start, text-center, text-end |
| Wrapping | text-wrap, text-nowrap, text-break |
| Truncation | text-truncate |
| Transformation | text-uppercase, text-lowercase, text-capitalize |
| Font Style | fst-italic, fst-normal |
| Font Weight | fw-light, fw-normal, fw-bold |
| Font Size | fs-1 to fs-6 |
✅ All utilities support responsive suffixes (e.g., text-md-center, fs-lg-3).
🛠️ Best Practices for Text Utilities
| Best Practice | Why It Matters |
|---|---|
| Use semantic class names | Keeps typography consistent and accessible |
| Combine text utilities with spacing | Aligns and positions content clearly |
| Truncate only when necessary | Avoids UX confusion; provide full text on hover |
| Test across screen sizes | Ensure readability and layout responsiveness |
| Use responsive text alignment | Helps align text differently for mobile vs desktop |
📌 Summary – Recap & Next Steps
Bootstrap 5 text utilities allow for fast, flexible, and consistent typography control across your UI. From alignment to truncation, transformation, and responsive sizing, you can build well-structured and readable layouts with just classes.
🔍 Key Takeaways:
- Use
text-start,text-end,text-centerfor alignment - Apply
text-uppercase,text-lowercase,text-capitalizefor transformation - Utilize
fw-*andfs-*for font weight and size text-truncateandtext-nowrapare handy for limited-width layouts- Combine with spacing and color classes for full visual control
⚙️ Best for landing pages, dashboards, cards, headers, navbars, and forms.
❓ FAQs – Bootstrap 5 Text Utilities
❓ What’s the difference between text-wrap and text-nowrap?
✅ text-wrap allows text to break and flow normally. text-nowrap forces text to stay in a single line, potentially overflowing if no truncation is set.
❓ How do I use text utilities responsively?
✅ Add breakpoint suffixes like text-md-center or fs-lg-4 to change text alignment or size based on device width.
❓ Can I combine font size and weight utilities?
✅ Yes. For example, use fs-3 fw-bold for a medium-bold heading.
❓ Is text-truncate accessible?
✅ Only partially. Consider adding tooltips or ARIA labels to show full content if the text is truncated.
Share Now :
