How to customize Bootstrap 3 tab color

Question

I want to create a customized tab using Bootstrap 3.

What I have done is -

<ul class="nav nav-tabs" id="myTab">     <script type="text/javascript">         $(document).ready(function()   {            //1st (1-1 = 0) tab selected initialy            $("#myTab li:eq(0) a").tab('show');         });     </script>      <li><a data-toggle="tab" href="#sectionA">SEARCH</a></li>     <li><a data-toggle="tab" href="#sectionB">ADVANCED</a></li> </ul> <div class="tab-content">     <div id="sectionA" class="tab-pane fade in active">         Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,         butcher voluptate nisi qui.     </div>     <div id="sectionB" class="tab-pane fade">         Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.     </div> </div> 

And I am getting a tab like this-

But I want to have is a customized colored. I am new in Bootstrap 3, so I don't know how to do it.

What I want is something like this-

.

Can anyone help me please?

Thanks in advance for helping.

Answer 1

On the selector .nav-tabs > li > a:hover add !important to the background-color.

.nav-tabs{    background-color:#161616;  }  .tab-content{      background-color:#303136;      color:#fff;      padding:5px  }  .nav-tabs > li > a{    border: medium none;  }  .nav-tabs > li > a:hover{    background-color: #303136 !important;      border: medium none;      border-radius: 0;      color:#fff;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>    <ul class="nav nav-tabs" id="myTab">      <li class="active"><a data-toggle="tab" href="#search">SEARCH</a></li>      <li><a data-toggle="tab" href="#advanced">ADVANCED</a></li>  </ul>  <div class="tab-content">      <div id="search" class="tab-pane fade in active">          Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,          butcher voluptate nisi qui.      </div>      <div id="advanced" class="tab-pane fade">          Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.      </div>  </div>