title: Change color of bootstrap nav text
body: <p>I am trying to change the text color inside my bootstrap links. I am trying to use the same method in <a href="https://stackoverflow.com/questions/24420080/change-navbar-text-color-bootstrap">this</a> post but that solution is not working. How do I change the color of the text? Thank you. <a href="https://codepen.io/centem/pen/ab03100c2e152c19a899f90e38e7a6aa?editors=1100" rel="nofollow noreferrer">This</a> is the codepen of the entire code.</p>
  <p>Markup:</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
      &lt;img src=&quot;images/DISA.png&quot; height=&quot;40&quot;&gt;
      &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot;&gt;EU34&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot;&gt;Support Tracker&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot;&gt;Rolling Log&lt;/a&gt;&lt;/li&gt;                
      &lt;/ul&gt;
      &lt;img src=&quot;images/DISALogoEUROPE.png&quot; style=&quot;margin-left: auto; padding-right: 20px;&quot; height=&quot;50&quot;&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.navbar.navbar-nav.nav-item li a {
      font-size: 1.5em;
      font-weight: bold;
      color: red;
  }
  </code></pre>