Text

Alignment ()

Left aligned

Center aligned

Right aligned

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>

Justified alignment ()

Justified alignment justifies the text to the with of the parent.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus distinctio adipisci atque debitis officia dolores commodi dolore minima modi maiores, error reprehenderit, inventore numquam soluta nobis aperiam pariatur nam et ratione! Officiis debitis quo nesciunt! Magni id at ab, animi neque officia laudantium a quasi excepturi doloribus quis dolore consequuntur laboriosam. Ratione voluptatibus, earum optio quisquam provident id fuga qui sit quos culpa! Maiores accusamus qui ab distinctio cumque ad, omnis sunt exercitationem ipsum ducimus, deleniti corporis sit ratione quaerat laborum! Nam enim doloremque, corporis ipsum molestias iusto in officiis eaque soluta cum minima harum debitis, blanditiis maxime dolorem ratione.

<p class="text-justify">...</p>

Responsive alignment

Examples below are left aligned on the smallest viewport (< 576px).

Right aligned on small (sm) viewport or wider.

Right aligned on medium (md) viewport or wider.

Right aligned on large (lg) viewport or wider.

Right aligned on extra large (xl) viewport or wider.

<p class="text-left text-sm-right">Right aligned on small (sm) viewport or wider.</p>
<p class="text-left text-md-right">Right aligned on medium (md) viewport or wider.</p>
<p class="text-left text-lg-right">Right aligned on large (lg) viewport or wider.</p>
<p class="text-left text-xl-right">Right aligned on extra large (xl) viewport or wider.</p>

Transformation

This is a uppercased text.

This is a lowercased text.

This is a capitalized text.

<p class="text-uppercase">This is a uppercased text.</p>
<p class="text-lowercase">This is a lowercased text.</p>
<p class="text-capitalize">This is a capitalized text.</p>

Weights and italic

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Colors

.text-primary

.text-secondary

.text-success

.text-warning

.text-danger

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-warning">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</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">.text-white</p>

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-body">Body link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark mb-0">White link</a></p>

Wrapping and overflow

The classes for wrapping and overflow exists but the classes they can affect (ie .badge) does not yet.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, corporis?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta, architecto!

<div class="badge badge-primary text-wrap" style="width: 100px;">Lorem ipsum dolor sit amet</div>

<div class="text-no-wrap" style="width: 100px;">Lorem ipsum dolor sit amet</div>

<!-- Block level -->
<div class="row">
    <div class="col-2 text-truncate">
        Lorem ipsum dolor sit amet.
    </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
    Lorem ipsum dolor sit amet.
</span>

Word break

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

<p class="text-break">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>

Text decoration

Link without underline

<p><a href="#" class="text-decoration-none">Link without underline</a></p>

Reset color

The reset text gets the color of its parent.

Muted text with a normal link

Muted text with a reset link

<p class="text-muted">Muted text with a <a href="#">normal link</a></p>
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a></p>