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.
HTML
<!doctype html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script></head> <body> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Accordion</strong> <div class="accordion accordion-flush" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> DSA </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> A data structure is defined as a particular way of storing and organizing data in our devices to use the data efficiently and effectively.The main idea behind using data structures is to minimize the time and space complexities. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> JavaScript </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also known as the scripting language for webpages.It is well-known for the development of web pages, many non-browser environments also use it. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Bootstrap </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> Bootstrap is a framework that is suitable for mobile-friendly web development. It means the code and the template available on bootstrap are applicable to various screen sizes. </div> </div> </div> </div></body> </html> |
Output:
Bootstrap5 accordion
Example 2: The code below demonstrates how we can implement an accordion flush with one tab always open using Bootstrap 5.
HTML
<!doctype html><html lang="en"> <head> rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head><!doctype html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script></head> <body> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Accordion Flush</strong> <div class="accordion accordion-flush mt-4" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Bootstrap </button> </h2> <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> JavaScript </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also known as the scripting language for webpages. It is well-known for the development of web pages, many non-browser environments also use it. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> DSA </button> </h2> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> A data structure is defined as a particular way of storing and organizing data in our devices to use the data efficiently and effectively. The main idea behind using data structures is to minimize the time and space complexities. </div> </div> </div> </div> </body> </html></html> |
Output:
Accordion Flush
Reference: https://getbootstrap.com/docs/5.0/components/accordion/#flush
Please Login to comment...