Change the style of tabs as tabs on bootstrap
I need a vertical tab view on my site. I need to change color, add glyphicon and decorator line under the tab title. Is this possible with a bootstrap tab view?
<ul class="nav nav-pills nav-stacked btn-group" style="width: 100px;">
<li class="active"><a href="#div_message">Home</a></li>
<li ><a href="#div_message">Profile</a></li>
<li ><a href="#div_message">Messages</a></li>
</ul>
+3
source to share
1 answer
<style>
/*Styles for your choice*/
.nav{
width: 300px;
background-color: #333333;
color: #FFFFFF;
border: 1px solid #333333;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{
background-color: #FFFFFF;
color: #000000;
}
.nav-pills > li > a {
border-radius: 0px;
}
.nav a{
color: #FFFFFF;
}
.nav a:hover{
background-color: #FFFFFF;
color: #000000;
}
li:hover .line{
background-color: orange;
height: 10px;
}
</style>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 HEADER">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home
<div class="line"></div>
</a>
</li>
<li role="presentation"><a href="#"><i class="glyphicon glyphicon-user"></i> Profile<div class="line"></div></a></li>
<li role="presentation"><a href="#"><i class="glyphicon glyphicon-envelope"></i> Messages<div class="line"></div></a></li>
</ul>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 CONTENT">
</div>
</div>
Is this what you want! Yes, you can change the Bootstrap CSS style. A good way to manipulate then is to use firebug and watch the element you want to change. Being on the right side of the element classes and now you can copy those classes, paste into your css file and then edit.
Never edit the main css file of the boot file, that's a good mark. Ever rewrite code in other files ^^
Now use jquery to add dynamic styles to your menu and change the properties that I put.
0
source to share