Loading...
 
Skip to main content
Page actions
PDF

Bootstrap 5.3 Color and Style Reference Guide


Feel free to copy and adapt this Bootstrap 5.3 Cheatsheet on your website—it's provided as-is. Please note that some theme colors are declared that may not be part of the theme you’re using on your Tiki. You may need to adjust them to match your design.

Regular Headings

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Reports Headings

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Documentation Headings

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Links

This is an example of an external link in text using (.brand-link).
This is an example of an internal link in text (.brand-link).

Text decoration

This line of text is meant to be bold text.
This line of text is meant to be italic text.
This line of text is meant to be underlined.
This line of text is meant to be treated as deleted text.

You can use the mark tag to highlight text.

This is a lead paragraph. It stands out from regular paragraphs. And this word is a link: sample link.

This line of text is meant to be treated as fine print.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Text Colors

text-primary
text-primary-dark
text-primary-light
text-secondary
text-secondary-dark
text-secondary-light
text-secondary-lightlight
text-info
text-info-dark
text-info-light
text-success
text-warning
text-warning-dark
text-warning-light
text-danger
text-light
text-dark
text-third
text-third-dark
text-third-light
text-fourth
text-gray-500
text-gray-700
text-gray-300
text-white
text-black

Background Colors

bg-primary
bg-primary-dark
bg-primary-light
bg-secondary
bg-secondary-dark
bg-secondary-light
bg-secondary-lightlight
bg-info
bg-info-dark
bg-info-light
bg-success
bg-warning
bg-warning-dark
bg-warning-light
bg-danger
bg-light
bg-dark
bg-third
bg-third-dark
bg-third-light
bg-fourth
bg-gray-500
bg-gray-700
bg-gray-300
bg-white
bg-black

Lists

Unordered list

  • This is a list
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Ordered list

  1. This is an ordered list
  2. This is a level one list element
    1. This is a level two list element
    2. This is a another level two list element
      1. This is a level three element.

Inline item list

  • This is a list item.
  • And another one.
  • But they're displayed inline.

List group

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Buttons

Regular buttons

Outlined buttons

Small buttons

Button groups

Badges

Regular badges

New New New

New

New New New New

Rounded badges

Primary Secondary Success Danger Warning Info Light Dark

NavBar

Dropdown

Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Cards

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Pagination

Alerts

Documentation

List group

Documentation
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item