Color 8.1
Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.
When working with colors be sure to test color contrast combinations.
Notes: Details at Bootstrap Docs
src/scss/base/_typography.scss, line 173
Custom Icons 8.2
Custom and commonly used icons that use the icon font strategy, if you need more icons load up the pro kit <script src="https://kit.fontawesome.com/ca4203438a.js" crossorigin="anonymous"></script> which is javascript based and gives you full access to the 7k icon library.
Example usage in CSS .field__item::before { font-family: "fontello"; content: '\e804'; }
When to use: Some guidance on when to use this component.
When not to: Some guidance on when it is not the best choice.
Notes: This is a limited set of icons included with the base theme, for all icons use FontAwesome Pro Kit.
\e800\e801\e802\e803\e804\e805\e806\e807\e808\e809\e80a\e80b\e80c\e80d\e80e\e80f\e810\e811\e812\e813\e900\e901\e902\e903\e904\e905\e906\e907\e908\e90b\e90c\e90d\e90e\e90f\e910\e911\f096\f099\f0c9\f0f6\f1fa\f29a\f308src/scss/fontello/fontello-src.scss, line 1
Headings 8.3
Headings used in page body.
When to use: Use to break up content into meaningful chunks. Use levels to drill down into topics.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five styled like an H1
Heading Six
src/scss/base/_typography.scss, line 9
Quote 8.4
Blockquotes distinguishing quoted text from the rest of the content. The <cite> tag should be used for referencing creative work rather than the person who said or wrote the quote.
When to use: Content is quoted from another source
When not to: When you want to visually emphasize your own content a card or alert may be better choices
Notes: Bootstrap Docs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
src/scss/base/_typography.scss, line 199
Display (Size) 8.5
The Display classes are for overly large text sizes, typically used in hero, jumbotrons or banners. These Display classes are much larger than the sites Headings.
When to use: When you need to visually adjust text size, but not semantically adjust its importance as with headings.
src/scss/base/_typography.scss, line 275
Text Alignment 8.6
Easily realign text to components with text alignment classes.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Right aligned text on viewports sized SM (small) or wider.
Right aligned text on viewports sized MD (medium) or wider.
Right aligned text on viewports sized LG (large) or wider.
Right aligned text on viewports sized XL (extra-large) or wider.
src/scss/base/_typography.scss, line 341
Text Decoration 8.7
When text should not have any decorations.
When to use: When text is inside linked components like Jumbotrons or cards.
src/scss/base/_typography.scss, line 319
Transform 8.8
Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.
Notes: Details at Bootstrap Docs
src/scss/base/_typography.scss, line 156
Truncate 8.9
Truncate text after one line, overflow is hidden, works on headlines. Using CSS to truncate means it will always fill in the viewable space vs. truncating a string on the backend. OPTIONAL: Custom widths can be used with inline styles.
Untruncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.
Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.
50% Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.
src/scss/base/_base.scss, line 324
Utilities 8.10
Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.
Notes: Details at Bootstrap Docs
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
src/scss/base/_typography.scss, line 116
Weight 8.11
Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.
Notes: Details at Bootstrap Docs
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
src/scss/base/_typography.scss, line 137