Text align
HTML
apply align by adding .text-{align} class to text elements
Text align left
Text align right
Text align center
HTML
<p class="text-left">Text align left</p>
<p class="text-right">Text align right</p>
<p class="text-center">Text align center</p>
Responsive
Apply responsive align with .{breakpoint}:text-{align} class to text elements
| Class prefix example | |
|---|---|
| Default > 0px | text-{align} |
| Extra extra small > 320px | xxs:text-{align} |
| Extra small > 480px | xs:text-{align} |
| Small > 640px | sm:text-{align} |
| Medium > 768px | md:text-{align} |
| Large > 991px | lg:text-{align} |
| Extra large > 1200px | xl:text-{align} |
| Extra extra large > 1440px | xxl:text-{align} |
Left aligned text on viewport size MD or wider
Center aligned text on viewport size SM or wider
Right aligned text on viewport size XS or wider
HTML
<p class="md:text-left">Left aligned text on viewport size MD or wider</p>
<p class="sm:text-center">Center aligned text on viewport size SM or wider</p>
<p class="xs:text-right">Right aligned text on viewport size XS or wider</p>