HTML
apply align by adding .text-{align}
class to text elements
Text align left
Text align right
Text align center
<p class="text-left">Text align left</p>
<p class="text-right">Text align right</p>
<p class="text-center">Text align center</p>
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
<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>