Typography

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

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 bg-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="text-nowrap bg-light border" 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.
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

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.

.lh-base

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.

.lh-large

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

Font Size

Responsive font size utilities use the format .fs{-breakpoint}-{size}.

Where size is one of the following:

  • xsmall - .75rem
  • small - .875rem
  • normal - 1rem
  • large - 1.125rem
  • xlarge - 1.25rem
  • 2xlarge - 1.5rem
  • 3xlarge - 1.75rem
  • 4xlarge - 2rem
  • 5xlarge - 2.5rem
.fs-xsmall

The quick brown fox jumped over the lazy dog.

.fs-small

The quick brown fox jumped over the lazy dog.

.fs-base

The quick brown fox jumped over the lazy dog.

.fs-large

The quick brown fox jumped over the lazy dog.

.fs-xlarge

The quick brown fox jumped over the lazy dog.

.fs-2xlarge

The quick brown fox jumped over the lazy dog.

.fs-3xlarge

The quick brown fox jumped over the lazy dog.

.fs-4xlarge

The quick brown fox jumped over the lazy dog.

.fs-5xlarge

The quick brown fox jumped over the lazy dog.

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

Medium 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-medium">Medium 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,
    "medium":   $font-weight-medium,
    "semibold": $font-weight-semibold,
    "bold":     $font-weight-bold,
    "black":    $font-weight-black,
    "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

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

@include text-emphasis-palette-variant($parent, $color, $level, $level-delta);
Argument Type Default Description
$parent string null Designated CSS rule.
$color string null Base color.
$level string null Palette level to mix base color to.
$level-delta string null Alter palette $level to mix base color to for hover/focus states when used as an anchor.