Accordions
Accordions
Basic Accordion
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
Include Bootstrap's CSS and JS files in your project, then use the extensive library of components and utilities.
Bootstrap can be customized using Sass variables, or you can use the official Bootstrap Customizer tool.
Flush Accordion
Add
.accordion-flush to remove the default background-color, some borders, and some rounded corners.
Flush accordions provide a seamless, borderless look that integrates well with various design schemes.
Always Open Accordion
This accordion item is always open by default. Remove
data-bs-parent to keep multiple items open.
This item can be opened independently without closing others, as there's no parent specified.
Nested Accordions
This is the main topic content.
Details about Subtopic A go here.
Details about Subtopic B go here.
Content for another main topic.
Accordion with Custom Content
John Doe
Software Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1,234
Page Views567
Conversions89%
Conversion RateAccordion with Form
Accordion with Custom Colors
This accordion uses a primary blue color scheme for the header.
This accordion uses a success green color scheme for the header.
This accordion uses a warning yellow color scheme for the header.
This accordion uses a danger red color scheme for the header.