Nerfair Nerfair - 2 months ago 21
CSS Question

Bootstrap 4 overwrite rule

I am trying to change navbar link color in bootstrap 4 like that

.nav-link {
color: red;
}


My scss file looks like that

@import '../../public_html/static/vendor/bootstrap/scss/bootstrap';

.nav-link {
color: red;
}


But without !important this doesn't work.

enter image description here

What have i missed?

Answer

It looks like the first rule is more specific that the one you had added and therefore takes priority.

If you change your selector to:

.navbar-light
.navbar-nav .nav-link {
  color: red;
}

Then it should work since it's the same level of specific-ness but further down in the source.

If you don't want to change the selector, you can always add !important, e.g.

.nav-link {
  color: red !important;
}

but it's generally not a good idea to throw in !important when it can solved in a nicer way as it might cause you problems further down the line.