How to change the accordion's color?

[michelami]

I would like to change the background, to another color as seen in the picture (the pink part) , using a new css file and override the bootstrap's one. I tried everything but it doesn't change the background behind the title, but the one behind the body. What code do i need to write?

[Edditoria]

You can use the CSS variables provided by Bootstrap, and apply to .accordion:

.accordion {
	--bs-accordion-btn-color: ghostwhite;
	--bs-accordion-btn-bg: pink;
	--bs-accordion-active-color: maroon;
	--bs-accordion-active-bg: lightpink;
}

Hope it helps. Happy Coding :)

[Mahamadou-Nouridine]

Thank you it worked for me

[uvistix]

You can use the CSS variables provided by Bootstrap, and apply to .accordion:

.accordion {
	--bs-accordion-btn-color: ghostwhite;
	--bs-accordion-btn-bg: pink;
	--bs-accordion-active-color: maroon;
	--bs-accordion-active-bg: lightpink;
}

Hope it helps. Happy Coding :)

Thanks. worked for me

[michealpeerodada]

To change the background behind a title, create a custom.css file and add:

.header-title {
  background-color: #desiredColor; /* Replace with your color */
}

Include it in your HTML after Bootstrap's CSS:

<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/custom.css">

very recently, i have changes the accrodian background of inasaldiningprices.com, a great filipino site that covers [[local fast food menu]