const changeColor= document.querySelector(".bg-success");
const toggler = document.querySelector(".btn");
toggler.addEventListener("click", function(){
changeColor.classList.toggle("mainHeader")
});
.mainHeader{
background-color:red!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<header id="main-header" class="bg-success text-white p-4 mb-3">
<div class="container">
<h1 id="header-title">
Item Lister
</h1>
</div>
<button class="btn btn-dark">Press Me </button>
</header>
</body>
Hola, soy nuevo en la comunidad y quisiera saber si podrian aclararme una duda, al momento de usar el classList.toggle sin bootstrap funciona de maravilla, pero cuando intento usarlo con bootstrap y sus clases no me funciona, incluso aplicandole !important en el css, agradeceria su ayuda, muchas gracias!