Text alignment

Simple text alignment

t-left / t-start

Lorem ipsum dolor sit amet...

t-center

Lorem ipsum dolor sit amet...

t-right / t-end

Lorem ipsum dolor sit amet...

t-justify

Lorem ipsum dolor sit amet...

Responsive text-alignment

Besides the text alignment classes above, there are other text alignment classes that take effect at the different media query breakpoint widths. So, here’s the full set of text alignment utility classes:

• t-left / xxs:t-left / xs:t-left / sm:t-left / md:t-left / lg:t-left / xl:t-left / xxl:t-left
• t-center / xxs:t-center / xs:t-center / sm:t-center / md:t-center / lg:t-center / xl:t-center / xxl:t-center
• t-right / xxs:t-right / xs:t-right / sm:t-right / md:t-right / lg:t-right / xl:t-right / xxl:t-right
• t-justify / xxs:t-justify / xs:t-justify / sm:t-justify / md:t-justify / lg:t-justify / xl:t-justify / xxl:t-justify

With these, you can set the text alignment for phones first, and then override with a different text alignment for medium or large screens up.

An example card

Consider this card design:

In these cards the titles are left aligned (default) for small devices, and the cards are stacked on two rows. But for medium viewports up, the header becomes centered.

<div class="card">
  <div class="card__content flow">
    <h2 class="card__heading h4 sm:t-center">Card title</h2>
    <p class="mb-0">Lorem ipsum dolor sit amet...</p>
  </div>    
</div>