Overwriting Bootstrap CSS (link color)

Question

I am new to coding and I am trying to use Bootstrap. However, I can't find out how to overwrite the default Bootstrap code with my own CSS.

I have searched and the common suggestions were: 1. Link my own stylesheet after Bootstrap. 2. Make my references more specific than Bootstrap (such as navbar-link a instead of just a). 3. Add !important to my CSS (which should be avoided).

I tried all of these and still struggle to get my CSS applied. What am I doing wrong? Could somebody please point me in the right direction?

Below is an example using the navbar and links. The background color gets applied but none of the stylings for a elements works. I tried various grades of being more specific but none of which seem to work.

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- my css below-->
    <link rel="stylesheet" href="CSS/main.css" type="text/css">

    <title>ML</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS

body {
    background-color: #3c896d;
}

.navbar-light .navbar-nav .nav-link a:visited {
    color: #3c896d;
}

.navbar-light .navbar-nav .nav-link a:hover {
    color: #db5461;
}

.navbar-light .navbar-nav .nav-item .nav-link a {
    color: #db5461;
}

Possible duplicate of [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles),[Can't override bootstrap style with my own stylesheet](https://stackoverflow.com/questions/40867665/cant-override-bootstrap-style-with-my-own-stylesheet) — threeFatCat, Oct 01 '19 at 01:57

score 0 · Accepted Answer · answered Oct 01 '19 at 02:13

You've got the right styles. The reason you're not seeing your styles getting applied is because you're not targetting the selectors correctly in the CSS. For instance,

.navbar-light .navbar-nav .nav-item .nav-link a

should be changed to

.navbar-light .navbar-nav .nav-item .nav-link

You don't need to target the "a" tag after the .nav-link. when you add a space between selectors in CSS such as ".navbar-light .navbar-nav", it means that you are selecting all the child nodes that contain the class "navbar-nav" that belong to the parent ".navbar-light".

In your case, you had ".navbar-light .navbar-nav .nav-item .nav-link a" so the browser looks for all <a> tags/selectors that are under the ".nav-link" selector. Which, in this case, does not exist. Instead, you have an <a> tag that which itself has the class "nav-link" (and not it's child elements)

Here's a great article to help you understand how to target the CSS selectors correctly so you can apply the right styles.

https://css-tricks.com/whats-the-difference/

And as for your answer, here's what the CSS should be changed to

body {
    background-color: #3c896d;
}

.navbar-light .navbar-nav a.nav-link {
    color: #3c896d;
}

.navbar-light .navbar-nav a.nav-link:hover {
    color: #db5461;
}

.navbar-light .navbar-nav .nav-item .nav-link {
    color: #db5461;
}

Thank you so much for the thorough explanation! This was tremendously helpful :) — miliberlin, Oct 01 '19 at 02:22

Overwriting Bootstrap CSS (link color)

1 Answers1