Bootstrap Makers/Tools
|
Buttons
|
Tables
|
Modal
|
Carousel
|
Dropdown
|
Accordion
|
Badges
|
Other Tools
Popovers
Breadcrumbs
Progress
Alerts
Tooltips
Spinner
Pagination
Range
Floating Labels
Text Styles
Link Maker
|
About
Bootstrap 5 Accordion Maker
Accordion Type
Standard
Edge-to-Edge (Flush)
Accordion Items
Add Item
Accordion Settings
Allow multiple items open at once
Add border
Add shadow
Use rounded corners
Add spacing between items
Spacing Size:
Small (0.25rem)
Medium (0.5rem)
Large (1rem)
Extra Large (1.5rem)
Icon Settings
Add icons to headers
Icon Type:
Chevron
Angle
Caret
Plus
Arrow
Circle Arrow
Rotate icon when active
Styling
Active Item Style:
Default
Primary
Success
Info
Warning
Danger
Button Style:
Default
Light
Primary
Success
Info
Warning
Danger
Custom Classes:
Accessibility
Add accessibility attributes
ARIA Label:
Live Preview
Generated Code
Copy
Accordion Options Explained:
What is the "Flush" option?
Adding the
.accordion-flush
class removes borders and rounded corners, making the accordion fit edge-to-edge with its container.
What does "Allow multiple items open at once" do?
Omitting the
data-bs-parent
attribute allows multiple accordion items to stay open at the same time.
How do I customize panel colors?
Use the "Styling" section to select a Bootstrap contextual class for the accordion panels.
How do I change accordion icons?
Use the "Icon Settings" options to select different icons for opening and closing accordion items.
Edit Accordion Item
Header Text:
Content:
Expanded by default