Text align

Utilities for controlling the alignment of text.

In this article

Class Properties
.text-left text-align: left;
.text-center text-align: center;
.text-right text-align: right;
.text-justify text-align: justify;

Usage

Control the text alignment of an element using the .text-left, .text-center, .text-right, and .text-justify utilities.

<p class="text-left ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-center ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-right ...">The quick brown fox jumped over the lazy dog.</p>
<p class="text-justify ...">The quick brown fox jumped over the lazy dog.</p>

Variants

By default, only responsive variants are generated for text alignment utilities.

Responsive

To control the text alignment of an element at a specific breakpoint, add a {screen}: prefix to any existing text alignment utility.

For example, use .md:text-center to apply the text-center utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:text-center, add "text-align" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "text-align",
);

Questions or feedback about this article? Let us know