Bootstrap Component Reference

Live Bootstrap 5 component reference. Every element renders using your active Cassiopeia child template styles. Use this page to verify colour tokens, spacing, and component overrides after any CSS change.

 

Jump to: Color Swatches · Typography · Buttons · Badges · Alerts · Cards · Forms · Tables · Progress

Color Swatches

Live from Bootstrap’s :root CSS custom properties.

 
Primary
--bs-primary
 
Secondary
--bs-secondary
 
Success
--bs-success
 
Danger
--bs-danger
 
Warning
--bs-warning
 
Info
--bs-info
 
Light
--bs-light
 
Dark
--bs-dark
 
Body BG
--bs-body-bg
 
Body Text
--bs-body-color
 
Link
--bs-link-color
 
Border
--bs-border-color

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Display 4

Lead paragraph.

Body text. Bold. Italic. Link. Highlighted. inline code

“This is a blockquote with clear visual hierarchy.”

Someone Famous

Buttons

Badges

PrimarySecondarySuccessDangerWarningInfoLightDark
Primary PillSuccess PillDanger Pill

Alerts

Primary: A primary alert!
Success: Action completed successfully.
Danger: Something went wrong.
Warning: Check this before proceeding.
Info: Helpful information.

Cards

Default Card

Cards support headers, footers, images, and list groups.

Action
Featured
Primary Card

Card with primary header and border accent.

Action
Dark Card

Dark background variant for contrast sections.

Action

Forms

Looks good!
Please provide a valid value.

Tables

#NameStatusRole
1 Alice Johnson Active Admin
2 Bob Smith Pending Editor
3 Carol White Inactive Author

Progress & Misc

25%
50%
100%
shadow-sm
shadow
shadow-lg