title: Why can I not make the text in these Bootstrap 4 nav pills black?
body: <p>I'm making a grid using Bootstrap rows and columns inside a nav pill. So far I have the text showing up correctly, but for some reason I can't set the text in the first nav pill black.</p>
  
  <p>I've tried moving the class for black text into different div elements/its own div element to no avail. Regardless, the first nav pill always shows up in the gray text. I've also made the black text class have an important property, but this changes nothing.</p>
  
  <p>my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active {
    color: #bdc3c7;
  }
  
  .black-text {
    color: #000000 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12 w-100"&gt;
  
      &lt;ul class="nav nav-pills nav-justified mb-3" id="pills-tab" role="tablist"&gt;
        &lt;br&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true"&gt;Mentors&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false"&gt;Members&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content" id="pills-tabContent"&gt;
        &lt;div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Sean&lt;/strong&gt; is sean&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Bean&lt;/strong&gt; is bean&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Sean Bean&lt;/strong&gt; is sean bean&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"&gt;
          &lt;div class="row black-text"&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Sean&lt;/strong&gt; is sean&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Bean&lt;/strong&gt; is bean&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row black-text"&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Sean Bean&lt;/strong&gt; is sean bean&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-6"&gt;
              &lt;p&gt;&lt;strong&gt;Bean Sean&lt;/strong&gt; is bean sean&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expected all nav pills to display black text, but only the second one does.</p>