Menu
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.
916
You can always modify your navigation list through css. Use this css code instead, in that way use you use the a tag to change the color and its background-color. It's improper to use the li tag to set the background only and a tag to set the color of the text.
Add Border to Bootstrap Content Pane You can do this by adding styles to tab-pane. Let's add a style class to div with style class “tab-content” call “my-tab.” This new style class will override the default class properties. Now you can add the following line of code to CSS.
If you click on any tab, including the currently active one, the visual cue shows up highlighting the tab.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
