CSS Text

Text styling

You can use .text-type-1 through .text-type-7 classes when you need to match styling but can't use its HTML element. Use text-type-{size}-{weight}, medium or bold, when you want to adjust the font's weight.

Text alignment

Text can be realigned with components by using text alignment classes. There are responsive classes for left, right, and center alignments that use the same viewport width breakpoints as the grid system text-{size}-{align} for sm, md, lg, and xl.

Example

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ad doloremque rem quasi voluptatum temporibus voluptates non unde, veritatis molestias velit impedit iste tenetur officiis et quae nisi facilis atque!</p>
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>

Text wrapping and overflow

You can have text wrap with a `.text-wrap` class.

<div class="badge badge--md badge--primary text-center text-wrap" style="width: 6rem">
  This text should wrap.
</div>

Sometimes, you need to stop text from wrapping, such as when you want the text of two elements to be on the same line. In this case, you can use the .text-nowrap class to keep text from wrapping.

<div class="p-0_5 bg-light-gray text-nowrap" style=" width: 8rem; border: 1px solid #d0d0d0;">
  This text should overflow the parent.
</div>

Text transform

When you need to capitalize text in sentence case, you can use the text capitalization class text-capitalize. This puts the first letter in every word in uppercase, while the rest of the letters will be in lowercase.

Font utilities

When you need to change a text's weight or style, use the following classes:

• font-weight-bold for bold text
• font-italic for italic text
• font-weight-normal for normal weight text