Getting started

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:
  • 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 hover

Mouse hover

Image when mouse move over the text:
New Here’s a notice bar to bring attention to new features of your website.