JZK JZK - 10 months ago 59
CSS Question

Style boostrap active tab

how I can style boostrap active tab, when I'm using class nav-tabs-unstyled. I've been trought tons of tutorials on web, but nothing worked for me. This is the code, what I was believing it should work.
Thank you for any help :)


.event-menu {

a {
color: #666666;
text-decoration: none;

.nav-tabs-unstyled > li.active > a,
.nav-tabs-unstyled > li.active > a:focus,
.nav-tabs-unstyled > li.active > a:hover{

border: 1px solid #666666 !important;

ul {
margin-right: 0!important;
list-style-type: none;
padding-left: 10px!important;

li {
width: 100%;
margin-bottom: 5px;
padding: 10px;
font-weight: 400;
border: 1px solid #fff;

&:hover {
border: 1px solid #666666;

span {
font-size: 120%;



<div class="event-menu">
<ul class="nav-unstyled nav-tabs-unstyled">
<a href="#tab1" data-toggle="tab"><li class="active">abcd<br>
<a href="#tab2" data-toggle="tab"><li>ssssss<br>
<a href="#tab3" data-toggle="tab"><li>ddddd<br>

Answer Source

You can't put block-level elements inside inline elements. It means you can't put <li> inside <a>. And as you put it in your html code, li is child of a, but your css-rules define a as child of li:

.nav-tabs-unstyled > li.active > a... 

this rule won't work.

To style active tab you have to define a style for <li class="active">, thus css rule should look, for example:

.nav-tabs-unstyled > li.active {
    border: 1px solid #666666 !important;
    background-color: #9d9;

To highlight hovered li define the rule:

.nav-tabs-unstyled > li:hover{
        border: 1px solid #669;
        background-color: #99d;