CSS from Classes not being applied to nav content

Question

I am trying to customize the content in my Bootstrap Nav tabs. The CSS classes are being applied but none of the styling shows.

The HTML (took out the other tabs for readability)

.unpublished {
  background-color: $green !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                <span class="fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class="tab-content unpublished">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="unpublished">
                <span class="fas fa-times-circle"></span>Course space is not published
                <a href="#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>

Answer 1

It seems you are using sass variables. Make sure all the sass setup is correct. By that I mean the main.scss and all the partials that you are using are working fine. If not fix that fixed and try again.

Also the bootstrap CSS link (or CDN link) must precede our local custom stylesheet file to over-ride the default styling applied by bootstrap.

A quick tip though, whenever you find yourself in such a condition where your styling is not being applied and many such things, You must inspect code in Developer Window (Ctrl+shift+I on windows and check the styling.

It's the best way you can learn and resolve your issues by yourself.

Thank you

Answer 2

I'm not sure where you're getting $gray-medium as a color but changing that to gray will make the background color work. Perhaps your styling precedence is off and the styles for the a tag are overwriting them. Making styles for the a tag will successfully style the links in your HTML.

.unpublished {
  background-color: gray !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

a {
  color: green;
}

<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                <span class="fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class="tab-content unpublished">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="unpublished">
                <span class="fas fa-times-circle"></span>Course space is not published
                <a href="#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>