Text & Links
Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.
Text Align
Text & Link Color
Link Stretched
Text & Link Various
Text muted
Text dashed
Text dotted
Text Decoration
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removedText Warp
This text should wrap.
This text should overflow the parent.
Text Break
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Text Transform
Lowercased text.
Uppercased text.
CapiTaliZed text.
Text Truncate
Block level est quasdam res quas ex communi.
<p class="text-muted">Text muted</p>
<p class="text-dashed">Text dashed</p>
<p class="text-dotted">Text dotted</p>
<!-- Text Decoration -->
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
<!-- Text Wrap -->
<div class="badge bg-primary text-wrap p-2" style="width: 6rem;">
This text should wrap.
</div>
<div class="text-nowrap bg-gray-300 p-2" style="width: 8rem;">
This text should overflow the parent.
</div>
<!-- Text break -->
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm </p>
<!-- Text transform -->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
<!-- Truncate : Block level -->
<div class="row">
<div class="col-2 text-truncate">
<b>Block level</b> est quasdam res quas ex communi.
</div>
</div>
<!-- Truncate : Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
<b>Inline level</b> Praeterea iter est quasdam res quas ex communi.
</span>