Custom button color not displaying in browser

user_17059169 0
Viewed 50

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>

bootstrap-5 css html
3 Answers

As said above you can add importance to your class, you should also be able to make a more specific class as css prioritized specificity. so a class like

.card-title .mod-button {
     background-color: #6c25be;
}

Might get you a little closer to overwriting bootstrap.

This basically works because, every selector has its own numerical 'weight':

100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)

Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.

So when you add more classes to the string in your css your adding 10 points for each one you call.

Be careful using ID's as they are "supposed" to be only for a single object on the page

user_191400030

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/

user_69117030

Replace mod-button with :

.btn-custom {
    color:white;
    background-color: #6c25be;
    border-color: #6c25be;
}
    
.btn-custom:hover {
    color:#6c25be;
    background-color: white;
}
user_147665130
Related