"Simple Tab Contnet"
Bootstrap 3.3.0 Snippet by knitesh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#about" data-toggle="tab">About</a></li> <li><a href="#services" data-toggle="tab">Services</a></li> <li><a href="#contact" data-toggle="tab">Contact</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class=""> <h1>Home Tab</h1> <p>These lists are meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="about"> <div class=""> <h1>About Tab</h1> <p>because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="services"> <div class=""> <h1>Services Tab</h1> <p>meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="contact"> <div class=""> <h1>Contact Tab</h1> <p>deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> </div> </div> <!-- /tabs --> </div>
.nav.nav-tabs{ color: #fff; background-color:#1D82FB; } .nav.nav-tabs a{ color: #fff; } .nav.nav-tabs a:hover{ color: #fff; background-color:#2E79B4; }

Related: See More


Questions / Comments: