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 to change size of padding and margins. $spacer is in ems so the size will change depending on the parent element (e.g. mb-1 on a h1 tag will be different than on a p tag).

Margin top and bottom set to 0 (my-0)
Margin top and bottom set to 1 (my-1)
Margin top and bottom set to 2 (my-2)
Margin top and bottom set to 3 (my-3)
Margin top and bottom set to 4 (my-4)
Margin top and bottom set to 5 (my-5)
Padding set to 0 (p-0)
Padding set to 1 (p-1)
Padding set to 2 (p-2)
Padding set to 3 (p-3)
Padding set to 4 (p-4)
Padding set to 5 (p-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

You can use fontawesome to change bullets to icons.

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

Note: These are all have h1 tags with a display class

display-1

display-2

display-3

display-4


Special paragraph tags

This is a paragraph “lead”

A paragraph with an inline “small” tag

font-weight-bold (or b / strong tags)

font-wight-normal

font-weight-light

font-italic (or i / em tags)


Blockquote

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

Someone famous in Source Title

Buttons


Standard Shadows

Note: you can get rounded corners with the class “rounded”


No shadow
shadow-sm
shadow
shadow-lg