Custom button color not displaying in browser

Question

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>

score 2 · Answer 1 · answered May 31 '22 at 15:46

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

No need for the scare quotes around supposed. IDs **must be unique** to the document. — Heretic Monkey, May 31 '22 at 16:14
I know, but in practice you **can** add the same ID to multiple objects its just considered very bad practice. But nothing is reeeeallllly stopping you from doing it and regretting it later — JDawwgy, May 31 '22 at 16:18

score 1 · Accepted Answer · answered May 31 '22 at 15:37

1

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/

answered May 31 '22 at 15:37

asportnoy

2,218
2
17
31

1

`!important` should be the last tool you reach for. It's like swatting a fly with a bazooka. Just add another class to the selector to make it more specific. – Heretic Monkey May 31 '22 at 16:09

score 0 · Answer 3 · edited May 31 '22 at 17:37

0

Replace mod-button with :

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

edited May 31 '22 at 17:37

General Grievance

4,555
31
31
45

answered May 31 '22 at 15:53

VisioSoft

1

Custom button color not displaying in browser

3 Answers3