How to Change Bootstrap Accordion Background Color

The Bootstrap Accordion component has several subcomponents that can be styled with text color, background color, and borders. These components are created by adding classes to elements and include the accordion-header, the accordion-button, the accordion-collapse, and the accordion-body.

In this tutorial, we will style the accordion components by customizing existing Bootstrap variables that these classes use, for example $accordion-button-active-bg. Another method we will use to style the components is to targeting existing Bootstrap CSS tags, for example --bs-accordion-border-color.

Here is the Accordion with different color properties that we will build in this demo:

Full code for this demo is in the Resources section.

Bootstrap Accordion Header Background Color

Each item inside the accordion wrapper component is composed of several subcomponents. Take a look at the Bootstrap accordion DOM screenshot below:

The components that are most useful for styling are the accordion-button inside the accordion-header, and the accordion-body inside the accordion-collapse.

First, lets modify the accordion header background color. The easiest way to change header color is actually to change the button element color nested inside the header.

Simply add a Bootstrap class like bg-primary to the button element inside the accordion-header h2. This will customize the button background color, which will visually control the accordion header color:

<button className="accordion-button bg-primary">
  Accordion Item #1
</button>

Bootstrap Accordion Button Color

The button in the accordion actually overlays the header and makes the header invisible. I did not find a reason to target the accordion-header class instead of the button, which has the accordion-button class.

The accordion-button does not have any background color by default, but we can add some. I used the following code to give the second button the Bootstrap “secondary” background color:

<button className="accordion-button bg-secondary">
  Accordion Item #2
</button>

Here’s how to customize the icons inside the accordion button.

Bootstrap Accordion Active Background Color and Text Color

The accordion component expresses an “active” state for the selected child accordion item. This active state is controlled by classes and Bootstrap variables.

In the following HTML, the second accordion item is open and active. For the header. this active state is implied by the lack of a collapsed class on the button. For the body, this active state is implied by the show class.

If we explore the styles section of dev tools, we can see some of the tags applied by the active state (accordion-button:not(.collapsed):

If we explore the _accordion.scss file using the link in the top right in the dev tools screenshot, we see that the easiest way to change the button color is by overriding the active variable $accordion-button-active-bg.

Here’s the code:

$accordion-button-active-bg: purple;

Alternatively, we can target the tag shown in the screenshot above. Create the following selector and you can customize the accordion active background color in a more localized way:

.accordion {
  --bs-accordion-active-bg: purple;
}

We can also change the text color of the accordion header button with a variable override:

$accordion-button-active-color: grey;

Bootstrap Accordion Body Background Color

The best way to target the content background color is by targeting the according-body class:

.accordion-body {
  background-color: $warning;
}

I used an existing Bootstrap variable of $warning. This will add an orange background color to all the accordion-body subcomponents.

However, the default Bootstrap accordion behavior is to only open one item at a time, so only one accordion-body component is show at a time. This gives he illusion that it is only active accordion-body components that have a background color.

Bootstrap Accordion Change and Remove Border

The border width and color can be updated by changing the following variables (example values are shown):

• $accordion-border-width: 2px;
• $border-color: green;

Alternatively, you can dig into dev tools and target tags inside of classes like this:

.accordion-item {
  --bs-accordion-border-color: green;
}

Here’s where you can observe the border behavior through dev tools:

Bootstrap Accordion Change Focus Color

The Accordion focus styling is applied by default to the button element, so that’s where we dig into dev tools to find how to apply some custom styling:

Now that we have discovered the SASS variable name, we can change it in our .scss file to a brown color like this:

$accordion-button-focus-box-shadow: 0 0 0 0.25rem brown;

Make sure that you add the box-shadow sizing values or else the box shadow will disappear.

There are many other Bootstrap CSS tags and variables that we can explore and target to style our accordion components. Don’t be afraid to dig into dev tools to find more, especially for the button component.

I dive deep into InputGroup focus styling here and form control focus styling here.

Resources

Here’s how to have multiple accordion items open at the same time.

Here is the complete code for this tutorial:

//CustomBackgroundColorAccordion.scss
$accordion-button-active-bg: purple;
$accordion-button-active-color: grey;

$accordion-button-focus-box-shadow: 0 0 0 0.25rem brown;
$accordion-border-width: 2px;
$border-color: green;

@import "bootstrap/scss/bootstrap";

.accordion-body {
  background-color: $warning;
}

// .accordion-item {
//   --bs-accordion-border-color: green;
// }

// .accordion {
//   --bs-accordion-active-bg: purple;
// }

// .accordion {
//   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem brown;
// }


//CustomBackgroundColorAccordion.tsx
import React from "react";
import "./CustomBackgroundColorAccordion.scss";

export default function CustomBackgroundColorAccordion() {
  const [openItem, setOpenItem] = React.useState(1);
  return (
    <div className="accordion" id="accordionExample">
      <div className="accordion-item">
        <h2 className="accordion-header" id="headingOne">
          <button className={`${openItem === 1 ? "" : "collapsed"} accordion-button bg-primary`} type="button" onClick={() => openItem !== 1 ? setOpenItem(1) : setOpenItem(0)}>
            Accordion Item #1
          </button>
        </h2>
        <div className={`${openItem === 1 ? "show" : ""} accordion-collapse collapse`} data-bs-parent="#accordionExample">
          <div className="accordion-body">
            Body 1
          </div>
        </div>
      </div>
      <div className="accordion-item">
        <h2 className="accordion-header" id="headingTwo">
          <button className={`${openItem === 2 ? "" : "collapsed"} accordion-button bg-secondary`} type="button" onClick={() => openItem !== 2 ? setOpenItem(2) : setOpenItem(0)}>
            Accordion Item #2
          </button>
        </h2>
        <div className={`${openItem === 2 ? "show" : ""} accordion-collapse collapse`} data-bs-parent="#accordionExample">
          <div className="accordion-body">
            Body 2
          </div>
        </div>
      </div>
      <div className="accordion-item">
        <h2 className="accordion-header" id="headingThree">
          <button className={`${openItem === 3 ? "" : "collapsed"} accordion-button`} type="button" onClick={() => openItem !== 3 ? setOpenItem(3) : setOpenItem(0)}>
            Accordion Item #3
          </button>
        </h2>
        <div className={`${openItem === 3 ? "show" : ""} accordion-collapse collapse`} data-bs-parent="#accordionExample">
          <div className="accordion-body">
            Body 3
          </div>
        </div>
      </div>
      <div className="accordion-item">
        <h2 className="accordion-header" id="headingFour">
          <button className={`${openItem === 4 ? "" : "collapsed"} accordion-button`} type="button" onClick={() => openItem !== 4 ? setOpenItem(4) : setOpenItem(0)}>
            Accordion Item #4
          </button>
        </h2>
        <div className={`${openItem === 4 ? "show" : ""} accordion-collapse collapse`} data-bs-parent="#accordionExample">
          <div className="accordion-body">
            Body 4
          </div>
        </div>
      </div>
      <div className="accordion-item">
        <h2 className="accordion-header" id="headingFive">
          <button className={`${openItem === 5 ? "" : "collapsed"} accordion-button`} type="button" onClick={() => openItem !== 5 ? setOpenItem(5) : setOpenItem(0)}>
            Accordion Item #5
          </button>
        </h2>
        <div className={`${openItem === 5 ? "show" : ""} accordion-collapse collapse`} data-bs-parent="#accordionExample">
          <div className="accordion-body">
            Body 5
          </div>
        </div>
      </div>
    </div>
  );
}