PF Next

Alignment Simple

Preview

Text Left
Text Center
Text Right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
<div class="pf-u-text-align-left">
  Text Left
</div>
<div class="pf-u-text-align-center">
  Text Center
</div>
<div class="pf-u-text-align-right">
  Text Right
</div>
<div class="pf-u-text-align-justify">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. Example .pf-u-text-left-on-lg

Usage

Class Applied To Outcome
.pf-u-text-align-left{-on-[breakpoint]} * Aligns text left
.pf-u-text-align-center{-on-[breakpoint]} * Aligns text center
.pf-u-text-align-right{-on-[breakpoint]} * Aligns text right
.pf-u-text-align-justify{-on-[breakpoint]} * Aligns text justify