Buttons
Use primary for call to action. Use info for interactive and active-state emphasis.
Button Styles
Button Sizes
Button States
Forms
Text Input
Checkboxes
Select
Radio Buttons
Cards
Info Card
Card with an info border for active or interactive emphasis.
Header
With Header
Card with a separate header section.
Accordions
Note: When accordion labels act as section titles, use an appropriate heading level for each .accordion-header to preserve document structure.
This is the body content for the first accordion item.
This is the body content for the second accordion item.
This is the body content for the third accordion item.
Two-Column Accordion Layout
For larger collections of accordion items, use .accordion-two-column to create a responsive two-column layout at the md breakpoint. Wrap items in a .row, then wrap each .accordion-item inside a .col-md-6 div. Bootstrap's gutter provides horizontal gap (default 1.5rem), and custom row-gap: 0.5rem provides vertical gap.
Content for item 1.
Content for item 2.
Content for item 3.
Content for item 4.
Lists
List Group
- Item 1
- Item 2
- Item 3
List Group with Links
Tables
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
| Data 7 | Data 8 | Data 9 |
Icons (FontAwesome)
FontAwesome icons can be used in various sizes and styles: