→ Ankit khedkar
→ Accordion example with Bootstrap 5.3

Accordion example with Bootstrap 5.3

This bootstrap css example is contributed by Ankit khedkar, on 24-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is collapsible

Tags: Accordion

Author Ankit khedkar

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="accordion" id="modernAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Accordion Item #1
                            </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#modernAccordion">
                        <div class="accordion-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Accordion Item #2
                            </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#modernAccordion">
                        <div class="accordion-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Accordion Item #3
                            </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#modernAccordion">
                        <div class="accordion-body">
                            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.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

8 months ago

3.9k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

5 months ago

2k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

8 months ago

3.3k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

3 months ago

1.2k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

1 month ago

871

v.5.3
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

2.1k

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

6 months ago

372

v.5.3
404 error page template

Author:
Ross Wille

8 months ago

1.5k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

5 months ago

970

v.5.3
Image gallery in bootstrap
Responsive Image gallery

Author:
Mateo Rojas

3 months ago

1.2k

v.5.3
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

7 months ago

1.2k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

6 months ago

1.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent