Layout
Containers
Containers are the most basic layout element. There are:
container min-width: 1200px
containerlarge min-width: 992px
containermedium min-width: 768px
containersmall min-width: 576px
Typography
Global settings
- For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
- Set the global link color via link-color and apply link underlines only on :hover.
- For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
Headings
All HTML headings, <h1> through <h6>, are available.</h6></h1>
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Display headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
D1
display-1 for Display 1
D2
display-2 for Display 2
D3
display-3 for Display 3
D4
display-4 for Display 4
Lead
Make a paragraph stand out by adding lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Inline text elements
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text. mark
This line of text will render as underlined. underline
This line of text is meant to be treated as fine print. small
This line rendered as bold text. bold
This line rendered as italicized text. italic
Text utilities
Transform text in components with text capitalization classes.
Left aligned text on all viewport sizes.align-left
Center aligned text on all viewport sizes. align-center
Right aligned text on all viewport sizes.align-right
Text transform
Transform text in components with text capitalization classes.
Uppercased text uppercase
Blockquotes
For quoting blocks of content from another source within your document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naming a source
Add a blockquote-footer for identifying the source. Wrap the name of the source work in blockquote-footer-title.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Utilities
Sizing
Width and height includes support for 25%, 50%, 75%, and 100% by default.
width
25% width-25
50% width-50
75% width-75
100% width-100
height
25% height-25
50% height-25
75% height-75
100% h-100