| 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",
);