Text

Text utilities control text alignment, weight, and style.

Text Alignment

Control the horizontal alignment of text within a container. These classes support responsive breakpoint suffixes (@sm, @md, @lg, @xl, @print).

.util-text-left

.util-text-center

.util-text-right

<p
  class="util-text-left util-background-light-gray util-pad-all-sm util-margin-all-none"
>
  .util-text-left
</p>
<p
  class="util-text-center util-background-light-gray util-pad-all-sm util-margin-all-none"
>
  .util-text-center
</p>
<p
  class="util-text-right util-background-light-gray util-pad-all-sm util-margin-all-none"
>
  .util-text-right
</p>

Text Weight and Style

Class	Description
.util-text-bold	font-weight: bold
.util-text-italic	font-style: italic

Examples

Bold text with .util-text-bold

Italic text with .util-text-italic

<p class="util-text-bold util-margin-all-none">
  Bold text with .util-text-bold
</p>
<p class="util-text-italic util-margin-all-none">
  Italic text with .util-text-italic
</p>