CSS/Bootstrap Can't Change Pill Colors

Question

I can't for the life of me get the background colors or text colors to change on my navbar elements when using navbar-pills via bootstrap.

If I remove the pills element, the colors work correctly. I am getting the default blue pill with white text -- though the bold element is working on hover.

a:hover {
    font-weight: 900;
  }
a:link {
    color: blue;
    text-decoration: underline;
}
a:visited {
    color: green;
}
a.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
}

<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="menu.html">Menu</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="">Contact Us</a>
        </li>
    </ul>
</nav>

Does this answer your question? [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles) — shadow-lad, Apr 03 '21 at 20:05

score 0 · Accepted Answer · answered Apr 03 '21 at 20:08

0

Try this.

  a:hover {
      font-weight: 900;
  }
  a:link {
      color: blue !important;
      text-decoration: underline;
  }
  a:visited {
      color: green;
  }
  a.active {
      color: #df4759 !important;
      background-color: #323232 !important;
      text-decoration: none;
  }

answered Apr 03 '21 at 20:08

Emin Uzun

99
6

Thanks a bunch, that actually worked. Would you be able to tell me why? Is the !important property causing it to overwrite some other bootstrap formatting I can't see? Why don't the css styles apply without the important property? – Craig Johnson Apr 03 '21 at 23:07
This is because bootstrap has specifically made a css definition for another class in a class. The way to get around this is to use !important or make changes to the same definition. – Emin Uzun Apr 08 '21 at 12:04

score 0 · Answer 2 · answered Apr 04 '21 at 07:22

You do not have to use !important. While it does get the job done in this case, its use is arguable (read more here). All you really need to do is match the specificity of the bootstrap style declaration. If you simply inspect the element in your browser you will see the selector used is .nav-pills .nav-link.active. So you just need to use that same selector to override and be sure your styles are loaded after bootstrap. If the above set of style rules is just for this nav consider updating all your selectors as below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<style>
  nav-pills .nav-link:hover {
    font-weight: 900;
  }
  
  .nav-pills .nav-link:link {
    color: blue;
    text-decoration: underline;
  }
  
  .nav-pills .nav-link:visited {
    color: green;
  }
  
  .nav-pills .nav-link.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
  }
</style>

<nav class="nav-pills navbar navbar-expand-sm">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="menu.html">Menu</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="">Contact Us</a>
    </li>
  </ul>
</nav>

I see, thank you. Am I understanding correctly that my css didn't take precedence because the bootstrap css was more specifically targeting the element, so the more specified rule is used? — Craig Johnson, Apr 04 '21 at 19:27

CSS/Bootstrap Can't Change Pill Colors

2 Answers2