Bootstrap Q&A Logo
Bootstrap Q&A Part of the Q&A Topic Learning Network
Real Questions. Clear Answers.
Ask any question about Bootstrap here... and get an instant response.
Q&A Balloon Q&A Logo
Post this Question & Answer:

How can I customize Bootstrap's accordion component for a unique look?

Asked on Jan 26, 2026

Answer

To customize Bootstrap's accordion component, you can modify its appearance using custom CSS classes. Here's a simple example to get you started.
<!-- BEGIN COPY / PASTE -->
        <style>
            .custom-accordion .accordion-button {
                background-color: #f8f9fa;
                color: #333;
                border: 1px solid #ddd;
            }
            .custom-accordion .accordion-button:not(.collapsed) {
                background-color: #e9ecef;
                color: #000;
            }
            .custom-accordion .accordion-body {
                background-color: #fff;
                border-top: 1px solid #ddd;
            }
        </style>

        <div class="accordion custom-accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        This is the first item's accordion body.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        This is the second item's accordion body.
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->
Additional Comment:
  • The custom CSS styles are applied to the `.accordion-button` and `.accordion-body` to change background colors and text colors.
  • The `.custom-accordion` class is added to the accordion to scope the styles.
  • You can further customize by adjusting the CSS properties like padding, margins, or adding shadows.
✅ Answered with Bootstrap 5 best practices.
← Back to All Questions

Q&A Network
Real Questions. Clear Answers.
Bootstrap
Ask Questions / Get Answers about Bootstrap!
AI Education
Ask Questions / Get Answers about AI Education!
Networking
Ask Questions / Get Answers about Networking!
Film Production
Ask Questions / Get Answers about Film Production!
DevOps
Ask Questions / Get Answers about DevOps!
Analytics
Ask Questions / Get Answers about Analytics!
AI Video
Ask Questions / Get Answers about AI Video!
Data Science
Ask Questions / Get Answers about Data Science!
WordPress
Ask Questions / Get Answers about WordPress!
VR & AR
Ask Questions / Get Answers about VR & AR!
Graphic Design
Ask Questions / Get Answers about Graphic Design!
MobileDev
Ask Questions / Get Answers about Mobile Developement!
JavaScript
Ask Questions / Get Answers about JavaScript!
Robotics
Ask Questions / Get Answers about Robotics!
Monetization
Ask Questions / Get Answers about Ad & Monetization!
Web Hosting
Ask Questions / Get Answers about Hosting!
Web Development
Ask Questions / Get Answers about Web Development!
Web Languages
Ask Questions / Get Answers about Web Languages!
AI Coding
Ask Questions / Get Answers about AI Coding!
AI Images
Ask Questions / Get Answers about AI Images!
Cloud Computing
Ask Questions / Get Answers about Cloud Computing!
AI
Ask Questions / Get Answers about AI!
AI Marketing
Ask Questions / Get Answers about AI Marketing!
Motion Graphics
Ask Questions / Get Answers about Motion Graphics!
UI/UX Design
Ask Questions / Get Answers about UI/UX Design!
Chatbots
Ask Questions / Get Answers about Chatbots!
Business Finance
Ask Questions / Get Answers about Business Finance!
Cybersecurity
Ask Questions / Get Answers about Cybersecurity!
Security
Ask Questions / Get Answers about Website Security!
AI Design
Ask Questions / Get Answers about AI Design!
Tailwind
Ask Questions / Get Answers about Tailwind!
Nursing
Ask Questions / Get Answers about Nursing!
AI Business
Ask Questions / Get Answers about AI Business!
Quantum
Ask Questions / Get Answers about Quantum Computing!
Podcasting
Ask Questions / Get Answers about Podcasting!
3D Design
Ask Questions / Get Answers about 3D Design!
IoT
Ask Questions / Get Answers about IoT!
CSS
Ask Questions / Get Answers about CSS!
Digital Burnout
Ask Questions / Get Answers about Digital Burnout!
Creative Writing
Ask Questions / Get Answers about Creative Writing!
AI Audio
Ask Questions / Get Answers about AI Audio!
AI Ethics
Ask Questions / Get Answers about AI Ethics!
Performance
Ask Questions / Get Answers about Web Vitals!
Illustration
Ask Questions / Get Answers about Illustration!
SEO
Ask Questions / Get Answers about SEO!
Photography
Ask Questions / Get Answers about Photography!
Video Editing
Ask Questions / Get Answers about Video Editing!
Sound Design
Ask Questions / Get Answers about Sound Design!
AI Writing
Ask Questions / Get Answers about AI Writing!
Social Media Psychology
Ask Questions / Get Answers about Social Media Psychology!
Animation
Ask Questions / Get Answers about Animation!
HTML
Ask Questions / Get Answers about HTML!