Utility classes

• Introduction
• Color
• Background-color
• Font-size
• Font-family
• Text-align
• Text-transform
• Hidden
• Visible
• Float
• Clear
• Clearfix
• Border
• Margin
• Padding
• Row-padding
• Image

Text-align

Text-align utility classes allow authors to align content to the left, right or center at specific screen sizes.

Overall usage

Used to apply specific text-alignment to any element or component.

Accessibility

N/A

---

All sizes

<div class="u-text-left">.u-text-left</div>
<div class="u-text-right">.u-text-right</div>
<div class="u-text-center">.u-text-center</div>

---

xs only

<div class="u-text-left-xs">.u-text-left-xs</div>
<div class="u-text-right-xs">.u-text-right-xs</div>
<div class="u-text-center-xs">.u-text-center-xs</div>

---

sm only

<div class="u-text-left-sm">.u-text-left-sm</div>
<div class="u-text-right-sm">.u-text-right-sm</div>
<div class="u-text-center-sm">.u-text-center-sm</div>

---

md only

<div class="u-text-left-md">.u-text-left-md</div>
<div class="u-text-right-md">.u-text-right-md</div>
<div class="u-text-center-md">.u-text-center-md</div>

---

lg only

<div class="u-text-left-lg">.u-text-left-lg</div>
<div class="u-text-right-lg">.u-text-right-lg</div>
<div class="u-text-center-lg">.u-text-center-lg</div>