→ 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

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

Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

4 months ago

1.6k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

6 months ago

2k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

11 months ago

4.1k

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

Author:
Prajwal Hallale

1 year ago

3.1k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

11 months ago

6k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

11 months ago

5.4k

v.5.3
Call-to-Action Example
Call-to-Action section with bootstrap 5

Author:
Omar Khaled

10 months ago

848

v.5.3
Simple portfolio card

Author:
Maria Garcia

11 months ago

666

v.5.3
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

1 month ago

390

v.5.3
User Profile Card with Bootstrap 5

Author:
Anonymous

4 months ago

1.5k

v.5.3
Responsive image galary with tabs

Author:
Arturo

6 months ago

3.3k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

1 year ago

968

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent