Bootstrap 5 Accordion Flush

Bootstrap 5 Accordion Flush is a type of accordion who are more edge-to-edge with the parent container. Also, it reduces the rounding of the corners and removes the borders & background color. This setting makes the accordion blend into its parent container.

Bootstrap 5 Accordion Flush Class:

• accordion-flush: This class is used to make the accordion of accordion flush type. 

Syntax:

<div class="accordion accordion-flush" id=" ">
 <div class="accordion-item">...</div>
 <div class="accordion-item">...</div>
</div>

Example 1: The code below demonstrates how we can implement an accordion flush using Bootstrap 5.

Output:

👁 Image

Example 2: The code below demonstrates how we can implement an accordion flush with one tab always open using Bootstrap 5.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/accordion/#flush