i using following code creating tabbed interface:
<ul class="nav nav-tabs"> <li class="active"><a href="#">chart 1</a></li> <li><a href="#">chart 2</a></li> <li><a href="#">chart 3</a></li> </ul> as add,
<li>chart 4</li> before </ul>, chart 4 text appears simple text, no tab boundary. why happening?
this because bootstrap 3 tabs having styles <a>, without <a> doesn't match conditions tab navigation styling. here sample bootstrap 3 css code tabs:
.nav-tabs > li > { margin-right: 2px; line-height: 1.428571429; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #dddddd; border-bottom-color: transparent; } try demo:
<ul class="nav nav-tabs"> <li class="active"><a href="#">chart 1</a></li> <li><a href="#">chart 2</a></li> <li><a href="#">chart 3</a></li> <li><a href="#">chart 4</a></li> </ul> 