→ 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:
Ankit khedkar

8 months ago

3.9k

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
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

884

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

8 months ago

3.3k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

8 months ago

3k

v.5.3
Button group
solid button group

Author:
Mishti

11 months ago

449

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
César Ferreira

2 months ago

1.5k

v.5.3
Parallax Image Gallery
An eye-catching gallery section with parallax scrolling effects and image captions.

Author:
Prajwal Hallale

1 year ago

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
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

3 months ago

2.3k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

1 month ago

506

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent