Alignment
Easily realign text within an element with text alignment classes
Text Alignment
| Example | Class Name | Behavior |
|---|---|---|
Text left aligned |
.text-align-left | Left aligned text on all viewport sizes. |
Text center aligned |
.text-align-center | Center aligned text on all viewport sizes. |
Text center aligned |
.text-align-right | Right aligned text on all viewport sizes. |
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
<p class="text-align-left">Left aligned text on all viewport sizes.</p>
<p class="text-align-center">Center aligned text on all viewport sizes.</p>
<p class="text-align-right">Right aligned text on all viewport sizes.</p>Responsive Text Alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
| Class Name | Behavior | Viewport Sizes |
|---|---|---|
| .text-align-left-sm | Left aligned on only small viewports. | 543px and under |
| .text-align-right-sm | Right aligned on only small viewports. | 543px and under |
| .text-align-center-sm | Center aligned on only small viewports. Left aligned for all other viewport sizes. | 543px and under |
| .text-align-left-md | Left aligned on medium viewports and up. | 768px and up |
| .text-align-right-md | Right aligned on medium viewports and up. | 768px and up |
| .text-align-center-md | Center aligned on medium viewports and up. Left aligned for all other viewport sizes. | 768px and up |
| .text-align-left-lg | Left aligned on large viewports and up. | 1012px and up |
| .text-align-right-lg | Right aligned on large viewports and up. | 1012px and up |
| .text-align-center-lg | Center aligned on large viewports and up. Left aligned for all other viewport sizes. | 1012px and up |
| .text-align-left-xl | Left aligned on extra-large viewports and up. | 1280px and up |
| .text-align-right-xl | Right aligned on extra-large viewports and up. | 1280px and up |
| .text-align-center-xl | Center aligned on extra-large viewports and up. Left aligned for all other viewport sizes. | 1280px and up |
| .text-align-left-xxl | Left aligned on widescreen viewports and up. | 1366px and up |
| .text-align-right-xxl | Right aligned on widescreen viewports and up. | 1366px and up |
| .text-align-center-xxl | Center aligned on widescreen viewports and up. Left aligned for all other viewport sizes. | 1366px and up |
Left aligned on only small viewports.
Right aligned on only small viewports.
Center aligned on only small viewports.
Left aligned on medium viewports and up.
Right aligned on medium viewports and up.
Center aligned on medium viewports and up.
Left aligned on large viewports and up.
Right aligned on large viewports and up.
Center aligned on large viewports and up.
<p class="text-align-sm-left">Left aligned on only small viewports.</p>
<p class="text-align-sm-right">Right aligned on only small viewports.</p>
<p class="text-align-sm-center">Center aligned on only small viewports.</p>
<p class="text-align-md-left">Left aligned on medium viewports and up.</p>
<p class="text-align-md-right">Right aligned on medium viewports and up.</p>
<p class="text-align-md-center">Center aligned on medium viewports and up.</p>
<p class="text-align-lg-left">Left aligned on large viewports and up.</p>
<p class="text-align-lg-right">Right aligned on large viewports and up.</p>
<p class="text-align-lg-center">Center aligned on large viewports and up.</p>Vertical Alignment
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
.align-baseline
.align-top
.align-bottom
.align-text-top
.align-text-bottom
<span class="align-baseline font-size-9 margin-right-3">.align-baseline</span>
<span class="align-top font-size-9 margin-right-3">.align-top</span>
<span class="align-bottom font-size-9 margin-right-3">.align-bottom</span>
<span class="align-text-top font-size-9 margin-right-3">.align-text-top</span>
<span class="align-text-bottom font-size-9">.align-text-bottom</span>