Style guide

Layout

Containers

Containers are the most basic layout element. There are:
container min-width: 1200px
containerlarge min-width: 992px
containermedium min-width: 768px
containerxs min-width: 576px

Typography

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.

Display 1

display-1 for Display 1

Display 2

display-2 for Display 2

Display 3

display-3 for Display 3

Display 4

display-4 for Display 4

Lead

Make a paragraph stand out by adding lead.
Our lenses are designed to provide sharp vision and all-day comfort. You’ll see everything without feeling anything.

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.
Someone famous in Source Title

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-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-tertiary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
And links for text and background (buttons etc.) with hover states:
text-primary-linktext-secondary-linktext-success-linktext-danger-linktext-warning-linktext-info-linktext-light-linktext-dark-link
bg-primary-link
bg-secondary-link
bg-success-link
bg-danger-link
bg-warning-link
bg-info-link
bg-light-link
bg-dark-link
bg-link

Borders

Rounded
content
Rounded
top
Rounded
bottom
Rounded
left
Rounded
right

Display

Quickly and responsively toggle the display value of components and more with display utilities.

As such, the classes are named using the format: d-{value}.

Where value is one of:
  • none
  • inline
  • inline-block
  • block
  • flex
d-inline
d-inline
d-inline-block
d-inline-block
d-block
d-block
d-flex

Hiding elements

To hide elements simply use the .d-none class or one of the .d-{t,m,ml,mp}-none classes for any responsive screen variation.
Screen Size

Hidden on all

Hidden only on tablet

Hidden only on mobile

Hidden only on mobile landscape

Hidden only on mobile portrait

Class

d-none

d-t-none

d-m-none

d-ml-none

d-mp-none

{this text hidden on all}
{this text hidden on tablet}
{this text hidden on mobile}
{this text hidden on mobile landscape}
{this text hidden on portrait}

Sizing

Width and height includes support for 25%, 50%, 75%, and 100% by default.
width
25% w-25
50% w-50
75% w-75
100% w-100
height
25% h-25
50% h-25
75% h-75
100% h-100