I’m currently making a little webpage listing my favorite Zelda bosses using HTML, CSS, and Bootstrap 5. I didn’t want to use the standard Bootstrap colors for buttons so I tried to make my own, however the custom color is not showing up in the webpage, but will show up in Codepen. Below you will find the HTML and CSS code that I have written so far. Is there something that I did that I’m just not seeing?
.header-custom {
background-color: #bea925;
}
.header-heading-text {
font-weight: bold;
}
.main-container-color {
background-color: #2596be;
}
/* Modal Stuff */
.mod-button {
background-color: #6c25be;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zelda Mini-wiki</title>
<meta name="description" content="This mini guide will cover all of the important facts and aspects of The Legend of Zelda franchise. Not as big as the full wiki, but still powerful enough to get the job done.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="p-5 header-custom text-white text-center">
<h1 class="header-heading-text"> Top 10 Zelda Bosses (In my opinion)</h1>
<p>Please don't come after me!</p>
</div>
<!--Main container-->
<div class="p-5 container-fluid main-container-color">
<div class="row text-center">
<div class="col-lg-4 col-md-6">
<div class="card" style="width:400px">
<img class="card-img-top" src="images/koloktos_image.webp" alt="" style="width:100%">
<div class="card-body">
<h4 class="card-title">Koloktos</h4>
<button type="button" class="btn mod-button" data-bs-toggle="modal" data-bs-target="myModal">
More Info
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Must stay at the end of the body tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>>Solution :
Mark the style as important in order to override the Bootstrap style.
/* Modal Stuff */
.mod-button {
background-color: #6c25be !important;
}
Working fiddle: https://jsfiddle.net/xvbctL54/