Open In App

Bootstrap 5 Accordion Flush

Last Updated : 25 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads