→ 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

488

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

Author:
Ankit khedkar

3 months ago

1k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

3 months ago

888

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

3 months ago

1k

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

Author:
Prajwal Hallale

8 months ago

876

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

7 months ago

287

v.4.6
Minimal breadcrumb

Author:
Anonymous

4 months ago

268

v.5.3
Gradient Footer Component
A modern, responsive footer component with a smooth gradient background, social icons, quick links, and newsletter subscription - perfect for contemporary web applications.

Author:
Alaric Sloane

2 weeks ago

59

v.5.3
Gradient Buttons

Author:
Prajwal Hallale

8 months ago

342

v.5.3
Invoice template with bootstrap

Author:
Anonymous

4 months ago

214

v.4.6
Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

7 months ago

228

v.4.6
Features section
Showcase features with icons

Author:
Prajwal Hallale

7 months ago

231

v.4.6
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

8 months ago

265

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent