French
Spanish
German
Accordion
Default Accordion
This is the first item’s accordion body. It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It’s also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the second item’s accordion body.
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It’s also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the third item’s accordion body. It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It’s also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
Flush Accordions
Add .accordion-flush to remove some borders and
rounded corners to render accordions edge-to-edge with their
parent container.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is
the first item’s accordion body.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is
the second item’s accordion body. Let’s imagine this being
filled with some actual content.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is
the third item’s accordion body. Nothing more exciting
happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more
representative of how this would look in a real-world
application.
Bordered Accordions
Using the card component, you can extend the default collapse
behavior to create an accordion. To properly achieve the accordion
style, be sure to use .accordion as a wrapper.
This is the first item's accordion body. It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the second item's accordion body.
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the third item's accordion body. It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
Accordion Without Arrow
Using the card component, you can extend the default collapse
behavior to create an accordion. To properly achieve the accordion
style, be sure to use .accordion as a wrapper.
This is the first item's accordion body. It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the second item's accordion body.
It is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
This is the third item's accordion body. It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the
.accordion-body, though the
transition does limit overflow.
