Text Alignment

.t-left

Lorem ipsum dolor sit amet...

.t-center

Lorem ipsum dolor sit amet...

.t-right

Lorem ipsum dolor sit amet...

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 / .t-md-left / .t-lg-left
• .t-center / .t-md-center / .t-lg-center
• .t-right / .t-md-right / .t-lg-right

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. For example, consider this card design:

In this card the header is (default) left aligned for small devices, but for medium up, it becomes centered.

<div class="mb-3 rounded p-2 bg-color-warning-alt">
  <h4 class="t-md-center">Card header</h4>
  <p>Lorem ipsum dolor sit amet ...</p>
</div>