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
Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
text-primary
text-secondary
success
text-success
text-warning
text-info
text-light
text-white
text-dark
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Add any of the below mentioned modifier classes to change the appearance of a background.
bg-primary
bg-secondary
bg-danger
bg-warning
bg-light
bg-dark
bg-white
bg-001
bg-002
bg-003
And links for text and background (buttons etc.) with hover states:
Display
Quickly and responsively toggle the display value of components and more with display utilities.
As such, the classes are named using the format: display-{value}.
Where value is one of:
As such, the classes are named using the format: display-{value}.
Where value is one of:
- none
- inline
- inline-block
- block
- flex
display-inline
display-inline
display-inline-block
display-inline-block
display-block
display-block
display-flex
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
Components
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
This is a primary alert with an example link. Give it a click if you like.
This is a secondary alert with an example link. Give it a click if you like.
This is a success alert with an example link. Give it a click if you like.
This is a danger alert with an example link. Give it a click if you like.
This is a warning alert with an example link. Give it a click if you like.
This is a light alert with an example link. Give it a click if you like.
This is a dark alert with an example link. Give it a click if you like.
Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges can be used as part of links or buttons to provide a counter.
Contextual variations
Buttons
This template includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Mouse move in viewport
Mouse hover
Image when mouse move over the text:
New Here’s a notice bar to bring attention to new features of your website.
