→ Alaric Sloane
→ Beautiful Bootstrap Accordion

Beautiful Bootstrap Accordion

This bootstrap css example is contributed by Alaric Sloane, on 27-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is collapsible

Tags: Accordion

Author Alaric Sloane

4.2k

v.5.3

Fork Fullscreen

<div class="container accordion-container">
    <h2 class="text-center mb-4">Project Development Stages</h2>

<div class="accordion" id="projectAccordion">
        
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        <i class="fas fa-clipboard-list feature-icon"></i>
                        Project Planning
                        <span class="badge bg-success badge-custom">Completed</span>
                    </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#projectAccordion">
                <div class="accordion-body">
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                    </div>
                    <ul class="list-group list-group-flush mt-3">
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Requirements Analysis
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Resource Allocation
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Timeline Planning
                        </li>
                    </ul>
                </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">
                        <i class="fas fa-code feature-icon"></i>
                        Development Phase
                        <span class="badge bg-primary badge-custom">In Progress</span>
                    </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#projectAccordion">
                <div class="accordion-body">
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 65%"></div>
                    </div>
                    <ul class="list-group list-group-flush mt-3">
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Frontend Development
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-spinner fa-spin text-primary status-icon"></i>
                            Backend Integration
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-clock text-secondary status-icon"></i>
                            Database Optimization
                        </li>
                    </ul>
                </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">
                        <i class="fas fa-vial feature-icon"></i>
                        Testing & QA
                        <span class="badge bg-warning badge-custom">Pending</span>
                    </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#projectAccordion">
                <div class="accordion-body">
                    <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 25%"></div>
                    </div>
                    <ul class="list-group list-group-flush mt-3">
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Unit Testing Setup
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-clock text-secondary status-icon"></i>
                            Integration Testing
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-clock text-secondary status-icon"></i>
                            User Acceptance Testing
                        </li>
                    </ul>
                </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="#collapseFour">
                        <i class="fas fa-rocket feature-icon"></i>
                        Deployment
                        <span class="badge bg-secondary badge-custom">Upcoming</span>
                    </button>
            </h2>
            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#projectAccordion">
                <div class="accordion-body">
                    <div class="progress">
                        <div class="progress-bar bg-secondary" role="progressbar" style="width: 10%"></div>
                    </div>
                    <ul class="list-group list-group-flush mt-3">
                        <li class="list-group-item">
                            <i class="fas fa-check-circle text-success status-icon"></i>
                            Server Configuration
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-clock text-secondary status-icon"></i>
                            Production Deployment
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-clock text-secondary status-icon"></i>
                            Post-deployment Monitoring
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 year ago

3.1k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

1 year ago

8.9k

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

Author:
Prajwal Hallale

1 year ago

5.1k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

11 months ago

2.8k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

1 year ago

5.6k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

8.8k

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

2.4k

v.4.6
Progress bars
Progress bar variations

Author:
Reza Farhadi

1 year ago

1k

v.5.3
Bootstrap Tabs with Gradient

Author:
Prajwal Hallale

1 year ago

2.2k

v.5.3
Animated hero section

Author:
Anonymous

1 year ago

6.4k

v.5.3
Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

1 year ago

3.2k

v.5.3
Newsletter Form
Rounded newsletter form

Author:
Ross Wille

1 year ago

2.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent