Utilities

<!-- Text color -->
<p class="text-primary">.text-primary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark p-2">.text-light</p>
<p class="text-body">.text-body</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark p-2">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark p-2">.text-white-50</p>

// Text color
p.text-primary .text-primary
p.text-success .text-success
p.text-danger .text-danger
p.text-warning .text-warning
p.text-info .text-info
p.text-light.bg-dark.p-2 .text-light
p.text-dark .text-dark
p.text-body .text-body
p.text-muted .text-muted
p.text-white.bg-dark.p-2 .text-white
p.text-black-50 .text-black-50
p.text-white-50.bg-dark.p-2 .text-white-50

<!-- Background color -->
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white">.bg-white</div>
<div class="p-3 mb-2 bg-transparent">.bg-transparent</div>

// Background color
.p-3.mb-2.bg-primary.text-white .bg-primary
.p-3.mb-2.bg-secondary .bg-secondary
.p-3.mb-2.bg-success.text-white .bg-success
.p-3.mb-2.bg-danger.text-white .bg-danger
.p-3.mb-2.bg-warning.text-white .bg-warning
.p-3.mb-2.bg-info.text-white .bg-info
.p-3.mb-2.bg-light .bg-light
.p-3.mb-2.bg-dark.text-white .bg-dark
.p-3.mb-2.bg-white .bg-white
.p-3.mb-2.bg-transparent .bg-transparent

<!-- Faded background color -->
<div class="p-3 mb-2 bg-faded-primary text-primary">.bg-faded-primary</div>
<div class="p-3 mb-2 bg-faded-success text-success">.bg-faded-success</div>
<div class="p-3 mb-2 bg-faded-danger text-danger">.bg-faded-danger</div>
<div class="p-3 mb-2 bg-faded-warning text-warning">.bg-faded-warning</div>
<div class="p-3 mb-2 bg-faded-info text-info">.bg-faded-info</div>
<div class="p-3 mb-2 bg-faded-light text-white">.bg-faded-light</div>
<div class="p-3 mb-2 bg-faded-dark text-dark">.bg-faded-dark</div>
<div class="p-3 mb-2 bg-faded-white text-white">.bg-faded-white</div>

// Faded background color
.p-3.mb-2.bg-faded-primary.text-primary .bg-faded-primary
.p-3.mb-2.bg-faded-success.text-success .bg-faded-success
.p-3.mb-2.bg-faded-danger.text-danger .bg-faded-danger
.p-3.mb-2.bg-faded-warning.text-warning .bg-faded-warning
.p-3.mb-2.bg-faded-info.text-info .bg-faded-info
.p-3.mb-2.bg-faded-light.text-white .bg-faded-light
.p-3.mb-2.bg-faded-dark.text-dark .bg-faded-dark
.p-3.mb-2.bg-faded-white.text-white .bg-faded-white

<!-- Opacity -->
<div class="text-dark opacity-25">Opacity 25%</div>
<div class="text-dark opacity-50">Opacity 50%</div>
<div class="text-dark opacity-60">Opacity 60%</div>
<div class="text-dark opacity-70">Opacity 70%</div>
<div class="text-dark opacity-75">Opacity 75%</div>
<div class="text-dark opacity-80">Opacity 80%</div>
<div class="text-dark opacity-90">Opacity 90%</div>

// Opacity
.text-dark.opacity-25 Opacity 25%
.text-dark.opacity-50 Opacity 50%
.text-dark.opacity-60 Opacity 60%
.text-dark.opacity-70 Opacity 70%
.text-dark.opacity-75 Opacity 75%
.text-dark.opacity-80 Opacity 80%
.text-dark.opacity-90 Opacity 90%

<!-- Text alignment -->
<div class="text-left mb-3">Left aligned text on all viewport sizes.</div>
<div class="text-center mb-3">Center aligned text on all viewport sizes.</div>
<div class="text-right mb-3">Right aligned text on all viewport sizes.</div>
<div class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</div>

// Text alignment
.text-left.mb-3
  | Left aligned text on all viewport sizes.
.text-center.mb-3
| Center aligned text on all viewport sizes.
.text-right.mb-3
  | Right aligned text on all viewport sizes.
.text-justify
  | Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<!-- Force text wrapping -->
<button type="button" class="btn btn-primary text-wrap mb-4" style="width: 9rem;">
  This text should wrap.
</button>

<!-- Text no wrap -->
<p class="bg-secondary border p-2 text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</p>

<!-- Truncated text -->
<span class="d-inline-block text-truncate" style="width: 9rem;">
  Praeterea iter est quasdam res quas ex communi.
</span>

// Force text wrapping
button.btn.btn-primary.text-wrap.mb-4(type="button", style="width: 9rem;")
  | This text should wrap.

// Text no wrap
p.bg-secondary.border.p-2.text-nowrap(style="width: 8rem;")
  | This text should overflow the parent.

// Truncated text
span.d-inline-block.text-truncate(style="width: 9rem;")
  | Praeterea iter est quasdam res quas ex communi.

<!-- Word break -->
<p class="text-break">
  MStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStrore
</p>

// Word break
p.text-break MStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStroreMStrore

<!-- Text transform -->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text goes here.</p>

// Text transform
p.text-lowercase Lowercased text.
p.text-uppercase Uppercased text.
p.text-capitalize.mb-1 Capitalized text goes here.

<!-- Font weight and italics -->
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-semibold">Semi-bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

// Font weight and italics
p.font-weight-bold Bold text.
p.font-weight-semibold Semi-bold text.
p.font-weight-normal Normal weight text.
p.font-weight-light Light weight text.
p.font-italic.mb-1 Italic text.

<!-- Border: Additive -->
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

// Border: Additive
span.border
span.border-top
span.border-right
span.border-bottom
span.border-left

<!-- Border: Subtractive -->
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

// Border: Subtractive
span.border-0
span.border-top-0
span.border-right-0
span.border-bottom-0
span.border-left-0

<!-- Border: Colors -->
<span class="border"></span>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

// Border: Colors
span.border
span.border.border-primary
span.border.border-secondary
span.border.border-success
span.border.border-danger
span.border.border-warning
span.border.border-info
span.border.border-light
span.border.border-dark
span.border.border-white

<!-- Border: Colors -->
<img src="path-to-image" class="rounded" alt="Image">
<img src="path-to-image" class="rounded-top" alt="Image">
<img src="path-to-image" class="rounded-right" alt="Image">
<img src="path-to-image" class="rounded-bottom" alt="Image">
<img src="path-to-image" class="rounded-left" alt="Image">
<img src="path-to-image" class="rounded-circle" alt="Image">
<img src="path-to-image" class="rounded-pill" alt="Image">
<img src="path-to-image" class="rounded-0" alt="Image">

// Border: Colors
img(src="path-to-image", alt="Image").rounded
img(src="path-to-image", alt="Image").rounded-top
img(src="path-to-image", alt="Image").rounded-right
img(src="path-to-image", alt="Image").rounded-bottom
img(src="path-to-image", alt="Image").rounded-left
img(src="path-to-image", alt="Image").rounded-circle
img(src="path-to-image", alt="Image").rounded-pill
img(src="path-to-image", alt="Image").rounded-0