Skip to content

Instantly share code, notes, and snippets.

@damko
Created December 28, 2014 10:49
Show Gist options
  • Save damko/79e7f374b181f77ac499 to your computer and use it in GitHub Desktop.
Save damko/79e7f374b181f77ac499 to your computer and use it in GitHub Desktop.
Bootstrap 3 - Vertical tabs stacked on the left, tabs body on the right
<!-- taken from http://www.bootply.com/74926 -->
<style type="text/css">
.tabs-left > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-left > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
border-right-color: #ffffff;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h3>Vertical Tabs</h3>
<!-- tab_panel -->
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<a href="#a" data-toggle="tab">One</a>
</li>
<li>
<a href="#b" data-toggle="tab">Two</a>
</li>
<li>
<a href="#c" data-toggle="tab">Twee</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
</div>
<div class="tab-pane" id="b">
Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="tab-pane" id="c">
Thirdamuno, 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><!-- /tab_panel -->
</div><!-- /col -->
</div><!-- /row -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment