Accordion
Basic
Use the accordion class to expand/collapse the accordion content.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
Flush
Use accordion-flush class to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
Accordions with Icons
Use accordion-icon class to show custom icon at accordion.
Accordions without Icons
Use the .accordion-icon-none class to create Bootstrap accordions without icons. This class hides any default icons, giving your accordion a cleaner look.
Accordions with Plus Icon
Use the .accordion-with-plus class to add a plus icon to your Bootstrap accordion. Place the icon inside the .accordion-header to indicate expand/collapse functionality.
Accordions with Left Icon
Use the .accordion-with-left-icon class to add an icon on the left of each accordion item. Place your icon in an <i> tag within the .accordion-header.
Accordions with theme color
Customize your Bootstrap accordion header with theme colors by applying classes like .accordion-primary or .text-white.
Accordions with subtitle
Add subtitles to Bootstrap accordions by including a <h6> or <small> tag in the .accordion-header. This provides extra context for each section.
Accordion With Content
You can create an accordion with images in Bootstrap by including <img> tags within the .accordion-header section. This lets you display images alongside text content, enhancing visual appeal and information delivery.
Frontend Development
Press to expand
Frontend Development
Press to expand
Backend Development
Press to expand
Backend Development
Press to expand
Bootstrap Customizations
Press to expand
Bootstrap Customizations
Press to expand
Nesting Accordions
With Bootstrap, you can create nested accordions to organize content hierarchically. To do this, simply place an <accordion> component inside another <accordion>. Make sure each nested accordion has a unique ID for proper functionality.
Collapse Example
You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
More Details
Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
Horizontal Collapse
Use the collapse-horizontal class to make elements slide open and closed horizontally, instead of vertically. Make sure to set a specific width on the child element that you want to collapse.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.
Collapse with Icon
Click the icon to toggle the collapse.
Controlling Multiple Collapses
You can use a <button> or <a> to control multiple collapsible elements at once by using the same data-bs-target or href attribute. Similarly, a single <button> or <a> can control multiple collapsible elements if you use the same attribute value for all.