Remove Outline from Accordion Buttons using Custom CSS
The basic method to remove the outline from Bootstrap 5 accordion buttons is by adding custom CSS to target the .accordion-button class and set the outline property to none.
Example: Demonstrating the use of Bootstrap 5 to create an accordion interface with collapsible sections for displaying information about programming languages like C++ and Java.
<!DOCTYPE html>
<html>
<head>
<title>Accordion Example</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
.accordion-button:focus {
outline: none;
box-shadow: none;
}
</style>
</head>
<body>
<h1 class="text-success text-center">
w3wiki
</h1>
<h2 class="text-center">Bootstrap 5 Accordion</h2>
<div class="container mt-5">
<div class="accordion accordion-flush mt-4"
id="accordionExample">
<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">
C++
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
C++ is a high level programming
language used for developing
applications, games, etc.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
Java
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Java is a programming language
that is used in modern
development worldwide.
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
How to Remove Outline from Accordion Buttons in Bootstrap?
Bootstrap 5 provides a convenient way to create collapsible accordion elements. However, by default, accordion buttons receive an outline when focused for accessibility reasons. In some cases, you might want to remove this outline for aesthetic purposes, while ensuring that your website remains accessible.