Bootstrap 5.3 Style Guide

Time Recording
Home

🎨 Colors

Bootstrap's theme colors and extended color palette.

Theme Colors (Background)

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body-tertiary
.bg-white
.bg-transparent

Theme Colors (Text)

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body (default)

.text-muted

.text-black-50

.text-white-50

Background Subtle & Emphasis (New in 5.3)

.bg-primary-subtle .text-primary-emphasis
.bg-secondary-subtle .text-secondary-emphasis
.bg-success-subtle .text-success-emphasis
.bg-danger-subtle .text-danger-emphasis
.bg-warning-subtle .text-warning-emphasis
.bg-info-subtle .text-info-emphasis
.bg-light-subtle .text-light-emphasis
.bg-dark-subtle .text-dark-emphasis

Opacity

100%
75%
50%
25%

🖋️ Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Inline Text Elements

You can use the mark tag to highlight text.

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

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

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

This line rendered as bold text.

This line rendered as italicized text.

Font Weight & Italics

Bold text. (.fw-bold)

Bolder weight text (relative to the parent element). (.fw-bolder)

semibold weight text. (.fw-semibold)

Normal weight text. (.fw-normal)

Light weight text. (.fw-light)

Lighter weight text (relative to the parent element). (.fw-lighter)

Italic text. (.fst-italic)

Text with normal font style. (.fst-normal)

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

Text Decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed.

Blockquotes

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

Lists

Unstyled

Inline


↔️ Spacing (Margin & Padding)

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

Format: {property}{sides}-{size} for xs, {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Margin Examples:

.mt-3 (margin-top: 1rem)
.ms-5 (margin-start: 3rem)
.mx-auto (horizontal centering)
.my-4 (margin-top & bottom: 1.5rem)

Padding Examples:

.pt-3 (padding-top: 1rem)
.pe-5 (padding-end: 3rem)
.p-2 (padding: 0.5rem on all sides)
.px-4 (padding-left & right: 1.5rem)

🔘 Buttons

Standard Buttons

Outline Buttons

Button Sizes





Disabled State

Primary link Link

📝 Forms

We'll never share your email with anyone else.

🧩 Common Components

Alerts

Badges

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

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

Modal

Navs and Tabs

This is some placeholder content for the Home tab.
This is some placeholder content for the Profile tab.
This is some placeholder content for the Contact tab.

Pagination

Placeholders

Progress Bars

25%

Spinners

Loading...
Loading...

Toasts

Tooltips & Popovers