Change color of bootstrap nav text

Question

I am trying to change the text color inside my bootstrap links. I am trying to use the same method in this post but that solution is not working. How do I change the color of the text? Thank you. This is the codepen of the entire code.

Markup:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <img src="images/DISA.png" height="40">
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">EU34</a></li>
        <li class="nav-item"><a class="nav-link">Support Tracker</a></li>
        <li class="nav-item"><a class="nav-link">Rolling Log</a></li>                
    </ul>
    <img src="images/DISALogoEUROPE.png" style="margin-left: auto; padding-right: 20px;" height="50">
</nav>

CSS:

.navbar.navbar-nav.nav-item li a {
    font-size: 1.5em;
    font-weight: bold;
    color: red;
}

use `!important` .. like this .. maybe it will work.. `color: red !important;` — نور, Sep 23 '20 at 10:14
you should never use `!important` as there is no need to use it in this case. — Ahmad Dalao, Sep 23 '20 at 10:19

score 2 · Accepted Answer · answered Sep 23 '20 at 10:17

2

To change the color override the bootstrap classes.

.navbar-dark .navbar-nav .nav-link {
  color: gold;
}

and to change color on hover or focus.

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: red;
}

answered Sep 23 '20 at 10:17

Ahmad Dalao

1,968
1
8
14

score 0 · Answer 2 · answered Sep 23 '20 at 10:13

0

You can use class in bootstrap, like this :

<li class="nav-item"><a class="nav-link text-primary">EU34</a></li>

answered Sep 23 '20 at 10:13

Pooriya Mostaan

257
1
5
21

score 0 · Answer 3 · answered Sep 23 '20 at 10:23

0

try this, using class to override bootstrap class.

.navbar-nav .nav-item .nav-link{
  color:#00cc00
}

Codepen demo

answered Sep 23 '20 at 10:23

Rayees AC

4,426
3
8
31

Change color of bootstrap nav text

3 Answers3