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>