How to change TAB color in bootstrap

Navigation
1

I want to change the color of when a tab is selected, it is blue, I want to change to black, I also want to change the color of the letters inside the tab, when not selected, to gray. How should I proceed? I'll leave a link to the code I'm using to see: link 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<div class="container">
    <div class="row">

        <div class="col-md-6">
            <h3>Pills left</h3>
            <!-- tabs left -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-md-3">
                    <li><a href="#a" data-toggle="tab">One</a></li>
                    <li class="active"><a href="#b" data-toggle="tab">Two</a></li>
                    <li><a href="#c" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-md-9">
                    <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius rci quis tortor imperdiet venenatis quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum auctor accumsan. Duis pharetra
                    varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->
        </div>

        <div class="col-md-6">
            <h3>Pills right</h3>

            <!-- tabs right -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-sm-3 col-sm-push-9">
                    <li class="active"><a href="#d" data-toggle="tab">One</a></li>
                    <li><a href="#e" data-toggle="tab">Two</a></li>
                    <li><a href="#f" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-sm-9  col-sm-pull-3">
                    <div class="tab-pane active" id="d">Lorem ipsum dolor sit amet, rci quis tortor imperdiet venenatischaretra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="e">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor rci quis tortor imperdiet venenatis. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="d">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->

        </div>

    </div>
    <!-- /row -->
</div>

<hr>
    
asked by anonymous 29.04.2017 / 19:05

1 answer

3

In the code you sent you can use the following code: 

.nav>li>a { // para todos os links
  color: gray;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover, 
.nav-pills>li.active>a:focus { // para hover e focus do elemento ativo
  background-color: #000; 
}

But I recommend you put a class in the parent of your tabs and put this before the rules in the css to change only the place you want, if you want to overwrite all the bootstrap rules, you can use the css from above. >     

29.04.2017 / 19:41
How to rescue external IP address on Android? Execute javascript only when accessing a mobile site