→ 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

5.3k

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 FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

2 years ago

11.4k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

1 year ago

4k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

2 years ago

11k

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

Author:
Prajwal Hallale

2 years ago

6.6k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 year ago

5.3k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

2 years ago

6.8k

v.5.3
Personal Biography section
idem

Author:
Anonymous

4 months ago

527

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

2 years ago

3.5k

v.4.6
Flexbox and Bootstrap 3 Modals

Author:
Anonymous

1 month ago

241

v.3.4
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

2 years ago

2.1k

v.5.3
Jquarry

Author:
Zahid Hasan Riyad

2 months ago

356

v.5.3
contact form
Contact form

Author:
Md. Hasibur Rahman

2 months ago

386

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent