Text

src
utilities
text.scss

displayn/a positionn/a z-indexn/a font-size scalingn/a breakpointsno

Class list

.text-left
.text-center
.text-right
.text-justify

.text-capitalize
.text-uppercase
.text-lowercase

.text-line-through
.text-underline
.text-overline

.text-black
.text-muted
.text-white
.text-white-muted

.va-top
.va-middle
.va-bottom
.va-text-top
.va-text-bottom

.fw-lighter
.fw-normal
.fw-bold
.fs-italic

.lh-1

Description

Use these text utlity classes to adjust the styles associated with text. The CSS properties starting with text, as well as the color property, have a class name starting with .text-.

Text Align

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nihil consequatur ullam ipsa deserunt.

<p class="text-left">Lorem ipsum dolor sit amet.</p>
<p class="text-center">Lorem ipsum dolor sit amet.</p>
<p class="text-right">Lorem ipsum dolor sit amet.</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nihil consequatur ullam ipsa deserunt.</p>

Text Transform

Lorem ipsum dolor.

LOREM IPSUM DOLOR.

<p class="text-capitalize">Lorem ipsum dolor.</p>
<p class="text-uppercase">Lorem ipsum dolor.</p>
<p class="text-lowercase">LOREM IPSUM DOLOR.</p>

Text Decoration

Lorem ipsum dolor.

<p class="text-line-through">Lorem ipsum dolor.</p>
<p class="text-underline">Lorem ipsum dolor.</p>
<p class="text-overline">Lorem ipsum dolor.</p>

Color

Lorem ipsum.

<div class="light r">
    <p class="text-black">Lorem ipsum.</p>
    <p class="text-muted">Lorem ipsum.</p>
    <p class="text-white">Lorem ipsum.</p>
    <p class="text-white-muted">Lorem ipsum.</p>
</div>

Vertical Align

Lorem ipsum.lorem

<h3>Lorem ipsum.<span class="tag h6 va-top">lorem</span></h3>
<h3>Lorem ipsum.<span class="tag h6 va-middle">lorem</span></h3>
<h3>Lorem ipsum.<span class="tag h6 va-bottom">lorem</span></h3>
<h3>Lorem ipsum.<span class="tag h6 va-text-top">lorem</span></h3>
<h3>Lorem ipsum.<span class="tag h6 va-text-bottom">lorem</span></h3>

Font Weight and Font Style

Lorem ipsum.

<p class="fw-lighter">Lorem ipsum.</p>
<p class="fw-normal">Lorem ipsum.</p>
<p class="fw-bold">Lorem ipsum.</p>
<p class="fs-italic">Lorem ipsum.</p>

Line Height

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolores porro nobis corporis, quas exercitationem natus delectus libero laborum, nam!

<p class="lh-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolores porro nobis corporis, quas exercitationem natus delectus libero laborum, nam!</p>

previous next