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
Extra background colors
Gradients
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).
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” tagfont-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.
Buttons
Standard Shadows
Note: you can get rounded corners with the class “rounded”