Accordions
Default Accordion
Use the accordion class to expand/collapse the
accordion content.
Accordion 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.
Accordions with Icons
Use custom-accordionwithicon class to show custom
icon at accordion.
Accordions without Icons
Use accordion-icon-none class to remove icon at
accordion.
Accordions with Plus Icon
Use custom-accordionwithicon-plus class to show
plus icon at the accordion.
Left Icon Accordions
Use lefticon-accordion class to show the icon on
the left side of the accordion.
Accordions Bordered
Use custom-accordion-border class to create the
border at the accordion.
Nesting Accordions
Use nesting-accordion class to create a nesting
accordion.
Accordions Fill Colored
Use accordion-fill- class with modifier class to
the color accordion.
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.
Horizontal Collapse
Use the collapse-horizontal class to transition
the width instead of height and set a
width on the immediate child element for horizontal collapse.
Collapse with Icon
Here is the example of collapse in which the icon is wrapped within the button collapse toggle.
Inline & Block Element Collapse
Inline element collapse takes all horizontal space hence you can activate the collapse within by clicking on full-width horizontal space. Block element collapse can be activated by clicking on collapse toggle only.
<h6> Inline Element Collapse
<span> Block Element Collapse
Multiple Targets Collapse
A <button> or <a> can show and hide
multiple elements by referencing them with a selector in its href or
data-bs-target attribute. Multiple <button> or
<a> can
show and hide an element if they each reference it with their href or
data-bs-target attribute.