Base

Text

Documentation and examples for common text utilities to control color, alignment, casing and more.

Text alignment (horizontal)

Text can be aligned left, right, and center. Responsive classes are available that use the same viewport width breakpoints as the grid system.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

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

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

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

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

<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="text-sm-center">Center aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-center">Center aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-center">Center aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-center">Center aligned text on viewports sized XL (extra-large) or wider.</p>

Text casing (lowercase, uppercase etc.)

Text can be transformed using text capitalization classes.

LOWERCASED TEXT

text uppercase

text capitalize

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">text uppercase</p>
<p class="text-capitalize">text capitalize</p>

Text decoration

Text decoration can be applied using helper classes.

<a href="#" class="text-decoration-underline">.text-decoration-underline</a>
<a href="#" class="text-decoration-none ">.text-decoration-none </a>

Truncate text

Truncate text using either a helper class or a SCSS mixin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus imperdiet nisi et vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus imperdiet nisi et vestibulum

Apply with class

Apply with SCSS mixin

<p class="text-truncate">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. unc faucibus 
imperdiet nisi et vestibulum. Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. Nunc faucibus 
imperdiet nisi et vestibulum</p>
.text-truncate {
  @include text-truncate;
}

Dense text

Make a dense text section using either a helper class or a SCSS mixin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. unc faucibus imperdiet nisi et vestibulum. Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nunc faucibus imperdiet nisi et vestibulum, consectetur dipiscing elit. Nunc faucibus imperdiet nisi et vestibulum.

Apply with class

Apply with SCSS mixin

<p class="text-dense">Lorem ipsum...</p>
.text-dense {
  @include text-dense;
}
Back to top