[twitter-bootstrap] Changing color of Twitter bootstrap Nav-Pills

I'm trying to change the active color (after its clicked it remains twitter's light-blue color) for each tab:

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(How) can I do this in CSS?

This question is related to twitter-bootstrap nav nav-pills

The answer is


The Solution to this problem, tends to differ slightly from case to case. The general way to solve it is to
1.) right-click the bootstrap pill and select inspect or inspect element if firefox
2.) copy the css selector for the rule that changes the color
3.) modify it in your custom css file like so...

.TheCssSelectorYouJustCopied{
    background-color: #ff0000!important;//or any other color
}

This worked for me perfectly in bootstrap 4.4.1 !!

.nav-pills > li > a.active{
  background-color:#46b3e6 !important;
  color:white !important;
}

  .nav-pills > li.active > a:hover {
  background-color:#46b3e6 !important;
  color:white !important;
        }

.nav-link-color {
  color: #46b3e6;
}

The following code worked for me:-

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(0,123,255,.5);
}

Note:- This worked for me using Bootstrap 4


For Bootstrap 4.0 (in alpha as of the moment of typing) you should specify the .active class on the a element.

For me only the following worked:

.nav-pills > li > a.active {
    background-color: #ff0000!important;
}

The !important was also necessary.


Step 1: Define a class named applycolor which can be used to apply the color you choose.

Step 2: Define what actions happens to it when it hovers. If your form background is white, then you must make sure that on hover the tab does not turn white. To achieve this use the !important clause to force this feature on hover property. We are doing this to override Bootstrap's default behavior.

Step 3: Apply the class to the Tabs which you are targetting.

CSS section:

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
        color: #fff;
        background-color: #337ab7 !important;
    }

    .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: none !important;
    }

    .applycolor {
        background-color: #efefef;
        text-decoration: none;
        color: #fff;
    }

    .applycolor:hover {
        background-color: #337ab7;
        text-decoration: none;
        color: #fff;
    }
</style>

Tab Section :

<section class="form-toolbar row">
    <div class="form-title col-sm-12" id="tabs">
        <ul class="nav nav-pills nav-justified">
            <li class="applycolor"><a data-toggle="pill" href="#instance" style="font-size: 1.8rem; font-weight: 800;">My Apps</a></li>
            <li class="active applycolor"><a data-toggle="pill" href="#application" style="font-size: 1.8rem; font-weight: 800;">Apps Collection</a></li>
        </ul>
    </div>
</section>

SCSS option for changing all of the buttons...

// do something for each color
@each $color, $value in $theme-colors {

  // nav-link outline colors on the outer nav element
  .nav-outline-#{$color} .nav-link {
    @include button-outline-variant($value);
    margin: 2px 0;
  }

  // nav-link colors on the outer nav element
  .nav-#{$color} .nav-link {
    @include button-variant($value, $value);
    margin: 2px 0;
  }
}

so you end up with all the defined colors .nav-primary
similar to the .btn-primary...

<div class="col-2 nav-secondary">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link" aria-expanded="true" aria-controls="addService" data-toggle="pill" href="#addService" role="tab" aria-selected="false">
                    Add Service
                </a>
                <a class="nav-link" aria-expanded="true" aria-controls="bonusPayment" data-toggle="pill" href="#bonusPayment" role="tab" aria-selected="false">
                    Bonus Payment
                </a>
                <a class="nav-link" aria-expanded="true" aria-controls="oneTimeInvoice" data-toggle="pill" href="#oneTimeInvoice" role="tab" aria-selected="false">
                    Invoice - One Time
                </a>
                <a class="nav-link active" aria-expanded="true" aria-controls="oneTimePayment" data-toggle="pill" href="#oneTimePayment" role="tab" aria-selected="true">
                    Payment - One Time
                </a>
            </div>
        </div>

enter image description here


The most voted solution did not work for me.(Bootstrap 3.0.0) However, this did:

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:black;
    background-color:#fcd900;
    }

including this on the page <style></style> tags serves for the per page basis well

and mixing it on two shades gives a brilliant effect like:

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:focus {
        color: black;
        background-color: #fcd900;
    }

        .nav-pills > li.active > a:hover {
            background-color: #efcb00;
            color:black;
        }
</style>

I use this snipped to change the active class for all pills in the same ul (applied at document ready):

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

If you don't want to include any extra CSS you can just use the button color classes into the nav-link element, it will format the pill just the same as a regular button.

_x000D_
_x000D_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>_x000D_
_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
_x000D_
<ul class="nav nav-pills p-3">_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active" href="#">Normal</a>_x000D_
    </li>_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active btn-primary" href="#">Primary</a>_x000D_
    </li>_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active btn-secondary" href="#">Secondary</a>_x000D_
    </li>_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active btn-success" href="#">Success</a>_x000D_
    </li>_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active btn-warning" href="#">Warning</a>_x000D_
    </li>_x000D_
    <li class="nav-item">_x000D_
        <a class="nav-link active btn-danger" href="#">Danger</a>_x000D_
    </li>_x000D_
_x000D_
</ul>
_x000D_
_x000D_
_x000D_


This is specific to Bootstrap 4.0.

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link nav-link-color" href="#about">home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link nav-link-color"  href="#contact">contact</a>
  </li>
</ul>

CSS

.nav-pills > li > a.active {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

.nav-pills > li > a:hover {
  color: #ffffff !important;
}

.nav-link-color {
  color: #ffffff;
}

Bootstrap 4.x Solution

.nav-pills .nav-link.active {
    background-color: #ff0000 !important;
}