Why can I not make the text in these Bootstrap 4 nav pills black?

Question

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.

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.

my code:

.active {
  color: #bdc3c7;
}

.black-text {
  color: #000000 !important;
}

<div class="row">
  <div class="col-md-12 w-100">

    <ul class="nav nav-pills nav-justified mb-3" id="pills-tab" role="tablist">
      <br>
      <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Mentors</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Members</a>
      </li>
    </ul>

    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
        <div class="row">
          <div class="col-md-6">
            <p><strong>Sean</strong> is sean</p>
          </div>
          <div class="col-md-6">
            <p><strong>Bean</strong> is bean</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <p><strong>Sean Bean</strong> is sean bean</p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
        <div class="row black-text">
          <div class="col-md-6">
            <p><strong>Sean</strong> is sean</p>
          </div>
          <div class="col-md-6">
            <p><strong>Bean</strong> is bean</p>
          </div>
        </div>
        <div class="row black-text">
          <div class="col-md-6">
            <p><strong>Sean Bean</strong> is sean bean</p>
          </div>
          <div class="col-md-6">
            <p><strong>Bean Sean</strong> is bean sean</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

I expected all nav pills to display black text, but only the second one does.

Do you have a working example to see it in action? – Anton Christensen Jun 01 '19 at 00:40 — Anton Christensen, Jun 01 '19 at 00:40

score 1 · Accepted Answer · answered Jun 01 '19 at 00:42

1

You can do this by adding a class to your ul class. Here is a link for someone attempting the same thing. Changing color of Twitter bootstrap Nav-Pills

answered Jun 01 '19 at 00:42

JayG.Dev

321
1
13

Thank you for the link. Although changing the ul classes didn't work, adding it to the li classes did. – jinkokaki Jun 01 '19 at 01:42

Why can I not make the text in these Bootstrap 4 nav pills black?

1 Answers1