Typography

Quick and easy utilities to add some style to your text.

Page Contents

Text Alignment

Easily realign text to components with text alignment classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit et mauris suscipit fermentum. Mauris massa dolor, mollis id augue ac, pretium faucibus massa. Ut posuere efficitur justo et luctus. Integer eget aliquam magna. In in vulputate nulla. Vivamus tristique leo id odio efficitur interdum eu ut metus.

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit et mauris suscipit fermentum. Mauris massa dolor, mollis id augue ac, pretium faucibus massa. Ut posuere efficitur justo et luctus. Integer eget aliquam magna. In in vulputate nulla. Vivamus tristique leo id odio efficitur interdum eu ut metus.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. Please refer to how our breakpoint nomenclature is used.

Instead of using left/right designators, the text alignment utilities use start/end designators to match up with the flexbox utilities.

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.

<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>

Text Wrap and Truncate

Allow text to wrap with a .text-wrap class.

This text should wrap.

<div class="badge badge-secondary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.

<div class="card card-body text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: block; or display: inline-block;.

Praeterea iter est quasdam res quas ex communi.

<!-- Block -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline block -->
<div class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</div>

Word Break

Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<div class="border p-0_5 text-break" style="width: 8rem;">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

Text Transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Line Height

A few line height adjustment classes are available, .lh-{size}.

Where size is one of the following:

small - 1.25;
base - 1.5;
large - 1.75;

.lh-small

.lh-base

.lh-large

<p class="lh-small">Lorem ipsum dolor sit amet ...</p>
<p class="lh-base">Lorem ipsum dolor sit amet ...</p>
<p class="lh-large">Lorem ipsum dolor sit amet ...</p>

<p class="fs-xsmall">The quick brown fox ...</p>
<p class="fs-small">The quick brown fox ...</p>
<p class="fs-base">The quick brown fox ...</p>
<p class="fs-large">The quick brown fox ...</p>
<p class="fs-xlarge">The quick brown fox ...</p>
<p class="fs-2xlarge">The quick brown fox ...</p>
<p class="fs-3xlarge">The quick brown fox ...</p>
<p class="fs-4xlarge">The quick brown fox ...</p>
<p class="fs-5xlarge">The quick brown fox ...</p>

Font Weight

Quickly change the weight (boldness) of text.

The .font-weight-lighter and .font-weight-bolder classes are relative by default, with lighter and bolder values respectively, but can be configured with numeric weights by overriding their values in the _settings.scss.

Light weight text.

Normal weight text.

Semi-bold weight text.

Bold weight text.

Black weight text.

Light weight with bolder weight text.

Bold weight with lighter weight text.

<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-semibold">Semi-bold weight text.</p>
<p class="font-weight-bold">Bold weight text.</p>
<p class="font-weight-black">Black weight text.</p>
<p class="font-weight-light">Light weight with <span class="font-weight-bolder">bolder weight</span> text.</p>
<p class="font-weight-bold">Bold weight with <span class="font-weight-lighter">lighter weight</span> text.</p>

Font Style

Italicize or reset the font style for a section of text.

Italic text.

Text without font style

<p class="font-italic">Italic text.</p>
<p class="font-normal">Text without font style</p>

Font Family

Alter the font family for a section of text.

This is an example of the sans serif font.

This is an example of the serif font.

This is an example of the monospace font.

<p class="font-family-sans-serif">This is an example of the sans serif font.</p>
<p class="font-family-serif">This is an example of the serif font.</p>
<p class="font-family-monospace">This is an example of the monospace font.</p>

Color Reset

Reset the text color with .text-reset, so that it inherits the color from its parent.

Muted text with a reset link.

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Text Decoration

Decorate text in components with text decoration classes.

Non-underlined link

This text has a line underneath it.

This text has a line going through it.

<p><a href="#" class="text-decoration-none">Non-underlined link</a></p>
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-text`	boolean	`true`	Enable the generation of the typography utility classes.
`$enable-utility-text-justify`	boolean	`true`	Enable the generation of the text justify utility class.
`$enable-utility-text-wrap`	boolean	`true`	Enable the generation of the `.text-wrap` utility class.
`$enable-utility-text-nowrap`	boolean	`true`	Enable the generation of the `.text-nowrap` utility class.
`$enable-utility-text-align`	boolean	`true`	Enable the generation of the text alignment utility classes.
`$enable-utility-text-transform`	boolean	`true`	Enable the generation of the text transform utility classes.
`$enable-utility-text-truncate`	boolean	`true`	Enable the generation of the text truncate utility classes.
`$enable-utility-text-decoration`	boolean	`true`	Enable the generation of the text decoration utility classes.
`$enable-utility-text-break`	boolean	`true`	Enable the generation of the `.text-break` utility class.
`$enable-utility-text-weight`	boolean	`true`	Enable the generation of the font weight utility classes.
`$enable-utility-text-style`	boolean	`true`	Enable the generation of the font style utility classes.
`$enable-utility-text-family`	boolean	`true`	Enable the generation of the font family utility classes.
`$enable-utility-text-colors`	boolean	`true`	Enable the generation of the theme text color utility classes.
`$enable-utility-text-palette`	boolean	`true`	Enable the generation of the palette text color utility classes.
`$enable-utility-text-special`	boolean	`true`	Enable the generation of the body, black, white, and muted background color utility classes.
`$enable-utility-text-reset`	boolean	`true`	Enable the generation of the reset color utility class.
`$enable-utility-text-height`	boolean	`true`	Enable the generation of the line-height utility classes.
`$enable-utility-text-size`	boolean	`true`	Enable the generation of the font-size utility classes.
`$utility-text-colors`	map	`$base-colors`	Themed text colors.
`$palette-colors-text`	map	`$palette-colors`	Palette-based text colors.
`$palette-levels-text`	list	`$palette-levels`	List of palette levels to use with palette text colors.
`$line-heights`	map	`( "small": 1.25, "base": $line-height-base, "large": 1.75 )`	Map used to generate the line-height utility classes.
`$font-sizes`	map	`( "xsmall": ($font-size-base * .75), "small": ($font-size-base * .875), "base": $font-size-base, "large": ($font-size-base * 1.125), "xlarge": ($font-size-base * 1.25), "2xlarge": ($font-size-base * 1.5), "3xlarge": ($font-size-base * 1.75), "4xlarge": ($font-size-base * 2), "5xlarge": ($font-size-base * 2.5) )`	Map used to generate the font-size utility classes.
`$font-weights`	map	`( "light": $font-weight-light, "normal": $font-weight-normal, "semibold": 600, "bold": $font-weight-bold, "black": 900, "lighter": $font-weight-lighter, "bolder": $font-weight-bolder )`	Map used to generate the font-weight utility classes.

Mixins

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

text-truncate

Visually truncate a line of text.

@include text-truncate();

text-emphasis-variant

Generate a text color rule with a hover/focus state when used as an anchor using the palette system.

@include text-emphasis-variant($parent, $color, $level-delta);

Argument	Type	Default	Description
`$parent`	string	`null`	Designated CSS rule.
`$color`	string	`null`	Base color.
`$level-delta`	string	`null`	Alter palette `$level` to mix base color to for hover/focus states when used as an anchor, Uses `500` as the base palette level.

text-emphasis-palette-variant