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     lt ul class  nav nav-pills  gt      lt li class  active  gt  lt a href   tab1  data-toggle  tab  gt Overview lt  a gt  lt  li gt      lt li gt  lt a href   tab2  data-toggle  tab  gt Sample lt  a gt  lt  li gt      lt li gt  lt a href   tab3  data-toggle  tab  gt Sample lt  a gt  lt  li gt    lt  ul gt     How  can I do this in CSS

User · Answer

This worked for me perfectly in bootstrap 4 4 1      nav-pills  gt  li  gt  a active    background-color  46b3e6  important    color white  important        nav-pills  gt  li active  gt  a hover     background-color  46b3e6  important    color white  important              nav-link-color     color   46b3e6

User · Answer

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   lt ul class  nav nav-pills red  gt       lt li class  active  gt  lt a href   tab1  data-toggle  tab  gt Overview lt  a gt  lt  li gt       lt li gt  lt a href   tab2  data-toggle  tab  gt Sample lt  a gt  lt  li gt       lt li gt  lt a href   tab3  data-toggle  tab  gt Sample lt  a gt  lt  li gt   lt  ul gt    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  gt   active  gt  a   nav-pills  gt   active  gt  a hover       background-color  red

User · Answer

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    lt style gt       nav-pills  gt  li active  gt  a   nav-pills  gt  li active  gt  a hover   nav-pills  gt  li active  gt  a focus           color   fff          background-color   337ab7  important              nav  gt  li  gt  a hover   nav  gt  li  gt  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         lt  style gt    Tab Section     lt section class  form-toolbar row  gt       lt div class  form-title col-sm-12  id  tabs  gt           lt ul class  nav nav-pills nav-justified  gt               lt li class  applycolor  gt  lt a data-toggle  pill  href   instance  style  font-size  1 8rem  font-weight  800   gt My Apps lt  a gt  lt  li gt               lt li class  active applycolor  gt  lt a data-toggle  pill  href   application  style  font-size  1 8rem  font-weight  800   gt Apps Collection lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  section gt

User · Answer

This is specific to Bootstrap 4 0   HTML   lt ul class  nav nav-pills  gt     lt li class  nav-item  gt       lt a class  nav-link nav-link-color  href   about  gt home lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link nav-link-color   href   contact  gt contact lt  a gt     lt  li gt   lt  ul gt    CSS   nav-pills  gt  li  gt  a active     background-color   ffffff  important    color   ffffff  important      nav-pills  gt  li  gt  a hover     color   ffffff  important      nav-link-color     color   ffffff

User · Answer

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  gt  li  gt  a active       background-color   ff0000 important      The  important was also necessary

User · Answer

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      lt div class  col-2 nav-secondary  gt               lt div class  nav flex-column nav-pills  id  v-pills-tab  role  tablist  aria-orientation  vertical  gt                   lt a class  nav-link  aria-expanded  true  aria-controls  addService  data-toggle  pill  href   addService  role  tab  aria-selected  false  gt                      Add Service                  lt  a gt                   lt a class  nav-link  aria-expanded  true  aria-controls  bonusPayment  data-toggle  pill  href   bonusPayment  role  tab  aria-selected  false  gt                      Bonus Payment                  lt  a gt                   lt a class  nav-link  aria-expanded  true  aria-controls  oneTimeInvoice  data-toggle  pill  href   oneTimeInvoice  role  tab  aria-selected  false  gt                      Invoice - One Time                  lt  a gt                   lt a class  nav-link active  aria-expanded  true  aria-controls  oneTimePayment  data-toggle  pill  href   oneTimePayment  role  tab  aria-selected  true  gt                      Payment - One Time                  lt  a gt               lt  div gt           lt  div gt

User · Answer

Bootstrap 4 x Solution  nav-pills  nav-link active       background-color   ff0000  important

User · Answer

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   lt 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  gt  x000D   x000D   lt script src  https   code jquery com jquery-3 4 1 min js  integrity  sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo   crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt ul class  nav nav-pills p-3  gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active  href     gt Normal lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active btn-primary  href     gt Primary lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active btn-secondary  href     gt Secondary lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active btn-success  href     gt Success lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active btn-warning  href     gt Warning lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D           lt a class  nav-link active btn-danger  href     gt Danger lt  a gt  x000D       lt  li gt  x000D   x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

The following code worked for me -   nav-pills  nav-link active   nav-pills  show gt  nav-link       color   fff      background-color  rgba 0 123 255  5       Note - This worked for me using Bootstrap 4

User · Answer

The most voted solution did not work for me  Bootstrap 3 0 0  However  this did    nav-pills  gt  li active  gt  a   nav-pills  gt  li active  gt  a hover   nav-pills  gt  li active  gt  a focus       color black      background-color  fcd900          including this on the page  lt style gt  lt  style gt  tags serves for the per page basis well   and mixing it on two shades gives a brilliant effect like    lt style gt       nav-pills  gt  li active  gt  a   nav-pills  gt  li active  gt  a focus           color  black          background-color   fcd900                  nav-pills  gt  li active  gt  a hover               background-color   efcb00              color black             lt  style gt

User · Answer

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

User · Answer

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

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

Examples related to twitter-bootstrap

Examples related to nav

Examples related to nav-pills