<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Dezi <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Eli <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Mojo <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Healing <span class="badge pull-right">90%</span></h4>
</li>
<li class="list-group-item">
<h4>Exploring <span class="badge pull-right">78%</span></h4>
</li>
<li class="list-group-item">
<h4>QiGong <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span>
</h4></li>
</ul>
</div>
<div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left { margin-top: 3rem; }
.nav-tabs {
float: left;
border-bottom: 0;
li {
float: none;
margin: 0;
a {
margin-right: 0;
border: 0;
border-radius: 0;
background-color: #333;
&:hover {
background-color: #444;
}
}
}
.glyphicon {
color: #fff;
}
.active .glyphicon {
color: #333;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0;
}
.tab-content {
margin-left: 45px;
.tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.active { display: block; }
}
.list-group {
width: 100%;
.list-group-item {
height: 50px;
h4, span {
line-height: 11px;
}
}
}
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();
External CSS
This Pen doesn't use any external CSS resources.