v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

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.
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 layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).

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.

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 #

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.