Remove Outline from Accordion Buttons using shadow-none class
The .shadow-none utility class is used to remove the box shadow that appears when an accordion button is focused. While this won’t remove the outline, it will reduce the focus indicator’s visibility.
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">
</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 shadow-none"
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 shadow-none"
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.