Typography
Quick and easy utilities to add some style to your text.
Contents
- Text Alignment
- Text Wrap and Truncate
- Word Break
- Text Transform
- Font Size
- Font Weight
- Italics
- Font Family
- Color Reset
- Text Decoration
- SASS Reference
- SASS Reference
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.
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.
Text Wrap and Truncate
Allow text to wrap with a .text-wrap
class.
Prevent text from wrapping with a .text-nowrap
class.
For longer content, you can add a .text-truncate
class to truncate the text with an ellipsis. Requires display: block;
or display: inline-block;
.
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).
Text Transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Note how .text-capitalize
only changes the first letter of each word, leaving the case of any other letters unaffected.
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
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
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.
Bold text.
Light weight with bolder weight text.
Bold weight with lighter weight text.
Italics
Italicize text with .font-italic
.
Italic text.
Font Family
Alter the font family for a section of text with
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.
Color Reset
Reset the text color with .text-reset
, so that it inherits the color from its parent.
Muted text with a reset link.
Text Decoration
Remove a text decoration with the .text-decoration-none
class.
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. |
$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. |
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.
text-emphasis-variant
Generate a text color rule with a hover/focus state when used as an anchor using the palette system.
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.
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.
|
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for the typography.
Name | Type | Default | Description |
---|---|---|---|
$enable-typography |
boolean | true |
Enable the generation of the typography CSS ruless.
Smaller segements of the border utilities can be disabled with the following $enable-* variables.
|
$enable-typography-headings |
boolean | true |
Enable the generation of the headings typography classes. |
$enable-typography-lead |
boolean | true |
Enable the generation of the lead typography class. |
$enable-typography-small |
boolean | true |
Enable the generation of the small typography class. |
$enable-typography-mark |
boolean | true |
Enable the generation of the mark typography class. |
$enable-typography-list-unstyled |
boolean | true |
Enable the generation of the unstyled list typography class. |
$enable-typography-initialism |
boolean | true |
Enable the generation of the initialism typography class. |
$enable-typography-blockquote |
boolean | true |
Enable the generation of the blockquote typography classes. |