Colors


Text color classes

.text-primary

.text-secondary

.text-tertiary

.text-light

.text-dark

Extra text color classes

.text-success

.text-danger

.text-warning

.text-info

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50


Main background colors

.bg-primary
.bg-secondary
.bg-tertiary
.bg-light
.bg-dark

Extra background colors

.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-white
.bg-transparent

Gradients

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-tertiary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark

Standard Spacing


Reset the $spacer variable for all margins and padding.

Margin top and bottom set to 0
Margin top and bottom set to 1
Margin top and bottom set to 2
Margin top and bottom set to 3
Margin top and bottom set to 4
Margin top and bottom set to 5
Padding set to 0
Padding set to 1
Padding set to 2
Padding set to 3
Padding set to 4
Padding set to 5

Typography


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Sample paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus pulvinar elementum integer enim neque volutpat ac. Est pellentesque elit ullamcorper dignissim. Sit amet consectetur adipiscing elit pellentesque. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.

Eu turpis egestas pretium aenean pharetra magna ac placerat. Molestie a iaculis at erat pellentesque adipiscing commodo. Sed ullamcorper morbi tincidunt ornare. Eget dolor morbi non arcu risus quis varius. Nisl vel pretium lectus quam id leo.

Interdum velit laoreet id donec ultrices tincidunt arcu. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Vel pharetra vel turpis nunc eget lorem. Ridiculus mus mauris vitae ultricies leo integer malesuada. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Duis at tellus at urna condimentum. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed risus ultricies tristique nulla aliquet.


Standard List

Note that “list-unstyled” gets rid of bullets

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Display classes

Display 1

Display 2

Display 3

Display 4


Special paragraph tags

This is a paragraph “lead”

A paragraph with an inline “small” tag

Bold text.

Normal weight text.

Light weight text.

Italic text.


Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Buttons


Standard Shadows


No shadow
.shadow-sm
.shadow
.shadow-lg

Special Elements


Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Modal