→ Ankit khedkar
→ Accordion example with Bootstrap 5.3

Accordion example with Bootstrap 5.3

Forked from> @ankit/accordion-example-with-bootstrap-5-3

accordion with animation

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

1.4k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="accordion" id="sleekAccordion">
                <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">
                                Features
                            </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#sleekAccordion">
                        <div class="accordion-body">
                            Discover our product's cutting-edge features designed to enhance your productivity and
                            streamline your workflow.
                        </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">
                                Pricing
                            </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#sleekAccordion">
                        <div class="accordion-body">
                            Explore our flexible pricing options tailored to fit your needs, from individual users
                            to enterprise solutions.
                        </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">
                                Support
                            </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#sleekAccordion">
                        <div class="accordion-body">
                            Get assistance from our dedicated support team, available 24/7 to help you with any
                            questions or issues you may encounter.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

9 months ago

1.1k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 week ago

99

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

5 months ago

1.3k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

5 months ago

1.2k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

1 month ago

732

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

5 months ago

439

v.5.3
Button pair
sign up and login buttons

Author:
Anonymous

3 months ago

148

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

3 months ago

321

v.4.6
About us section
about us section with image

Author:
Kemaya m

8 months ago

263

v.4.6
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

3 months ago

234

v.4.6
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

3 months ago

186

v.4.6
Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

6 months ago

397

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent