Typography

Text Alignment

Easily realign text to components with text alignment classes.

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

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

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

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

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

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

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

Text Transform

Transform text in components with text capitalization classes.

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

<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

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

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

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

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

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

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

(
  "small":    1.25,
  "base":     $line-height-base,
  "large":    1.75
)

(
  "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)
)

(
    "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
)

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

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