Skip to main content Skip to docs navigation

Text alignment

Easily realign text with text alignment utilities for start, end, and center alignment.

GitHub Edit on GitHub MDN MDN
On this page
Class Styles
.text-start text-align: start;
.text-end text-align: end;
.text-center text-align: center;

Alignment

Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized 2xl (extra extra large) or wider.

HTML
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-2xl-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>

Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

Responsive

Responsive variations also exist for text-align.

  • .text-start
  • .text-center
  • .text-end
  • .text-sm-start
  • .text-sm-center
  • .text-sm-end
  • .text-md-start
  • .text-md-center
  • .text-md-end
  • .text-lg-start
  • .text-lg-center
  • .text-lg-end
  • .text-xl-start
  • .text-xl-center
  • .text-xl-end
  • .text-2xl-start
  • .text-2xl-center
  • .text-2xl-end

CSS

Sass utilities API

Text alignment utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS
"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: left,
    end: right,
    center: center,
  )
),