Ask any question about Bootstrap here... and get an instant response.
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:
✅ Answered with Bootstrap 5 best practices.- 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.
Recommended Links:
