Changing color of Twitter bootstrap Nav-Pills

Question

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?

Manipulate color how? you mean change the blue to something else? — Andres I Perez, May 12 '12 at 12:23

score 102 · Accepted Answer · answered May 12 '12 at 23:06

102

You can supply your own class to the nav-pills container with your custom color for your active link, that way you can create as many colors as you like without modifying the bootstrap default colors in other sections of your page. Try this:

Markup

<ul class="nav nav-pills red">
    <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>

And here is the CSS for your custom color:

.red .active a,
.red .active a:hover {
    background-color: red;
}

Also, if you prefer to replace the default color for the .active item in your nav-pills you can modify the original like so:

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}

answered May 12 '12 at 23:06

Andres I Perez

75,075
21
157
138

3

You also have to add `.nav-pills > .active > a:focus` to that list in the CSS file, to make sure the color stays the same even when you click on the navpill. – Teemu Leisti Mar 28 '13 at 12:38
10

@raffian In 3.X you have to be more specific, for the last example: `.nav-pills > li.active > a, .nav-pills > li.active > a:hover` - bootstrap CSS specifies `li.active` now, not only `.active` – Stoffe Feb 25 '14 at 12:58
4

This didn't work for me directly, I had to add !important to the background color. – Sirar Salih Jan 24 '16 at 13:19

Nezam · Answer 2 · 2015-05-19T11:33:20.627

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>

Thanks this worked for me too...should be marked as correct answer! — Vibhore Agg, Apr 15 '17 at 20:33

Felipe Maia · Answer 3 · 2021-04-16T14:24:41.607

20

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.

--

Edit: added space before the !important according to comment below by CodeMantle

edited Apr 16 '21 at 14:24

answered Apr 18 '17 at 00:20

Felipe Maia

358
3
7

This won't work in Firefox as written. It needs a space before the `!important;` – CodeMantle Feb 09 '21 at 22:09

score 14 · Answer 4 · edited Feb 10 '21 at 07:52

14

Bootstrap 4.x Solution

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

edited Feb 10 '21 at 07:52

RockPaperLz- Mask it or Casket

5,361
10
45
69

answered Oct 12 '18 at 20:07

Tomasz

4,847
2
32
41

This works on Chrome 88, but does not work as written on Firefox 85. It needs to have a space before the `!important;` – CodeMantle Feb 09 '21 at 22:11

score 7 · Answer 5 · edited Dec 28 '17 at 02:01

7

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;
}

edited Dec 28 '17 at 02:01

Derek Hopper

2,110
12
19

answered Dec 27 '17 at 22:59

Sam Sokeye

81
1
3

Hi @sam-sokeye, I think the top answer may already be working for Bootstrap 4. – Derek Hopper Dec 27 '17 at 23:13

score 5 · Answer 6 · answered Jun 29 '21 at 07:33

5

On Bootstrap 5.0.x :

<style>
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        color: #fff;
        background-color: #af2e89;
    }
</style>

answered Jun 29 '21 at 07:33

Roberto Peribáñez Iglesias

171
2
6

score 3 · Answer 7 · answered Jul 30 '12 at 12:52

3

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');           
});

answered Jul 30 '12 at 12:52

Michael Simons

4,640
1
27
38

score 3 · Answer 8 · answered Jan 04 '20 at 23:53

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.

<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">

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul class="nav nav-pills p-3">
    <li class="nav-item">
        <a class="nav-link active" href="#">Normal</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active btn-primary" href="#">Primary</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active btn-secondary" href="#">Secondary</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active btn-success" href="#">Success</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active btn-warning" href="#">Warning</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active btn-danger" href="#">Danger</a>
    </li>

</ul>

score 2 · Answer 9 · answered Dec 24 '18 at 07:10

2

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

answered Dec 24 '18 at 07:10

Shashishekhar Hasabnis

1,636
1
15
36

score 1 · Answer 10 · answered May 06 '20 at 14:58

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>

score 0 · Answer 11 · answered Sep 22 '17 at 09:48

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>

score 0 · Answer 12 · edited Sep 19 '18 at 10:46

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
}

score 0 · Answer 13 · answered Dec 01 '19 at 05:26

0

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;
}

answered Dec 01 '19 at 05:26

Sriyashree Swain

111
11

there is no nav-link-color in 4.4.x – Artistan May 06 '20 at 14:22

score 0 · Answer 14 · answered May 21 '21 at 13:44

0

that's worked for me Bootstrap v3.3.7 write that in your css file!

.nav > li > a:hover,
.nav > li > a:focus {
   text-decoration: none;
   background-color: #0d0d0d;
}

answered May 21 '21 at 13:44

Abdallah

79
1
7

khellendros74 · Answer 15 · 2022-11-15T16:58:42.333

Bootstrap 5.x Dynamique Solution

from standard exemple just add the following html & css btn btn-color-class i add "[data-bs-target]" not to interfere with nav-link from navbar

.nav-link[data-bs-target] {
}
.nav-link[data-bs-target]:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.nav-link[data-bs-target].active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link btn btn-primary active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
        <button class="nav-link btn btn-info" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
        <button class="nav-link btn btn-danger" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
        <button class="nav-link btn btn-success" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
    </div>
</nav>
    <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Changing color of Twitter bootstrap Nav-Pills

15 Answers15

Bootstrap 4.x Solution

Bootstrap 5.x Dynamique Solution

Linked