"Panels with nav tabs"
Bootstrap 3.2.0 Snippet by Murkee

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="page-header"> <h1>Panels with nav tabs.<span class="pull-right label label-default">:)</span></h1> </div> <div class="row"> <div class="col-md-6"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li> <li><a href="#tab2default" data-toggle="tab">Default 2</a></li> <li><a href="#tab3default" data-toggle="tab">Default 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4default" data-toggle="tab">Default 4</a></li> <li><a href="#tab5default" data-toggle="tab">Default 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default">Default 1</div> <div class="tab-pane fade" id="tab2default">Default 2</div> <div class="tab-pane fade" id="tab3default">Default 3</div> <div class="tab-pane fade" id="tab4default">Default 4</div> <div class="tab-pane fade" id="tab5default">Default 5</div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel with-nav-tabs panel-primary"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li> <li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li> <li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li> <li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary">Primary 1</div> <div class="tab-pane fade" id="tab2primary">Primary 2</div> <div class="tab-pane fade" id="tab3primary">Primary 3</div> <div class="tab-pane fade" id="tab4primary">Primary 4</div> <div class="tab-pane fade" id="tab5primary">Primary 5</div> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel with-nav-tabs panel-success"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li> <li><a href="#tab2success" data-toggle="tab">Success 2</a></li> <li><a href="#tab3success" data-toggle="tab">Success 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4success" data-toggle="tab">Success 4</a></li> <li><a href="#tab5success" data-toggle="tab">Success 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1success">Success 1</div> <div class="tab-pane fade" id="tab2success">Success 2</div> <div class="tab-pane fade" id="tab3success">Success 3</div> <div class="tab-pane fade" id="tab4success">Success 4</div> <div class="tab-pane fade" id="tab5success">Success 5</div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel with-nav-tabs panel-info"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1info" data-toggle="tab">Info 1</a></li> <li><a href="#tab2info" data-toggle="tab">Info 2</a></li> <li><a href="#tab3info" data-toggle="tab">Info 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4info" data-toggle="tab">Info 4</a></li> <li><a href="#tab5info" data-toggle="tab">Info 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1info">Info 1</div> <div class="tab-pane fade" id="tab2info">Info 2</div> <div class="tab-pane fade" id="tab3info">Info 3</div> <div class="tab-pane fade" id="tab4info">Info 4</div> <div class="tab-pane fade" id="tab5info">Info 5</div> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel with-nav-tabs panel-warning"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1warning" data-toggle="tab">Warning 1</a></li> <li><a href="#tab2warning" data-toggle="tab">Warning 2</a></li> <li><a href="#tab3warning" data-toggle="tab">Warning 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4warning" data-toggle="tab">Warning 4</a></li> <li><a href="#tab5warning" data-toggle="tab">Warning 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1warning">Warning 1</div> <div class="tab-pane fade" id="tab2warning">Warning 2</div> <div class="tab-pane fade" id="tab3warning">Warning 3</div> <div class="tab-pane fade" id="tab4warning">Warning 4</div> <div class="tab-pane fade" id="tab5warning">Warning 5</div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel with-nav-tabs panel-danger"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1danger" data-toggle="tab">Danger 1</a></li> <li><a href="#tab2danger" data-toggle="tab">Danger 2</a></li> <li><a href="#tab3danger" data-toggle="tab">Danger 3</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4danger" data-toggle="tab">Danger 4</a></li> <li><a href="#tab5danger" data-toggle="tab">Danger 5</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1danger">Danger 1</div> <div class="tab-pane fade" id="tab2danger">Danger 2</div> <div class="tab-pane fade" id="tab3danger">Danger 3</div> <div class="tab-pane fade" id="tab4danger">Danger 4</div> <div class="tab-pane fade" id="tab5danger">Danger 5</div> </div> </div> </div> </div> </div> </div> <br/>
.panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .panel.with-nav-tabs .nav-justified{ margin-bottom: -1px; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { color: #555; background-color: #fff; border-color: #ddd; border-bottom-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu { background-color: #f5f5f5; border-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #777; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #555; } /********************************************************************/ /*** PANEL PRIMARY ***/ .with-nav-tabs.panel-primary .nav-tabs > li > a, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > .open > a, .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover, .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu { background-color: #428bca; border-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { background-color: #4a9fe9; } /********************************************************************/ /*** PANEL SUCCESS ***/ .with-nav-tabs.panel-success .nav-tabs > li > a, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > .open > a, .with-nav-tabs.panel-success .nav-tabs > .open > a:hover, .with-nav-tabs.panel-success .nav-tabs > .open > a:focus, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; background-color: #d6e9c6; border-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.active > a, .with-nav-tabs.panel-success .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.active > a:focus { color: #3c763d; background-color: #fff; border-color: #d6e9c6; border-bottom-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu { background-color: #dff0d8; border-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #3c763d; } /********************************************************************/ /*** PANEL INFO ***/ .with-nav-tabs.panel-info .nav-tabs > li > a, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > .open > a, .with-nav-tabs.panel-info .nav-tabs > .open > a:hover, .with-nav-tabs.panel-info .nav-tabs > .open > a:focus, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; background-color: #bce8f1; border-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.active > a, .with-nav-tabs.panel-info .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.active > a:focus { color: #31708f; background-color: #fff; border-color: #bce8f1; border-bottom-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu { background-color: #d9edf7; border-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #31708f; } /********************************************************************/ /*** PANEL WARNING ***/ .with-nav-tabs.panel-warning .nav-tabs > li > a, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > .open > a, .with-nav-tabs.panel-warning .nav-tabs > .open > a:hover, .with-nav-tabs.panel-warning .nav-tabs > .open > a:focus, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; background-color: #faebcc; border-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.active > a, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus { color: #8a6d3b; background-color: #fff; border-color: #faebcc; border-bottom-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu { background-color: #fcf8e3; border-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #8a6d3b; } /********************************************************************/ /*** PANEL DANGER ***/ .with-nav-tabs.panel-danger .nav-tabs > li > a, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; } .with-nav-tabs.panel-danger .nav-tabs > .open > a, .with-nav-tabs.panel-danger .nav-tabs > .open > a:hover, .with-nav-tabs.panel-danger .nav-tabs > .open > a:focus, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; background-color: #ebccd1; border-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.active > a, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus { color: #a94442; background-color: #fff; border-color: #ebccd1; border-bottom-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu { background-color: #f2dede; /* bg color */ border-color: #ebccd1; /* border color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #a94442; /* normal text color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ebccd1; /* hover bg color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; /* active text color */ background-color: #a94442; /* active bg color */ }

Related: See More


Questions / Comments:

Really nice tabs, will tyr to make em work with bootstrap 4

Demky (-1) - 5 years ago - Reply -1


Please, Let us know when you finish doing it. I've a project running bootstrap 4 too.

MatehElismar () - 5 years ago - Reply 0


anyone here can you help plz
i want to ui tabs rotate

Laxman Banjara () - 7 years ago - Reply 0


That is Called Vertical Tabs. Search For Vertical Tabs.

Shubhajeet Naik () - 7 years ago - Reply 0


Thanks

Laxman Banjara () - 7 years ago - Reply 0


hello

Laxman Banjara () - 7 years ago - Reply 0


How can I change the border radius nav-tabs? I don't want to use the default style from bootstrap, I want to tweak border-radius to 0px. Please how to do that??

Inna Dwi () - 7 years ago - Reply 0


There is a bug on this, if you put another tabbed panel inside another, it inherits the menu collors of the parent object, instead of using the collors from itself.

Joao Eduardo Soares () - 7 years ago - Reply 0


how can we pull the list of open tab titles?

Sadikh () - 7 years ago - Reply 0


Hi everybody, Do you know how to make this nav tabs with drop up button in footer, so the panels will be open to the top?
Thankx for advance

agata () - 8 years ago - Reply 0


This is what I had been looking , finally can also...

Siraja Patukkal Tumanggor () - 8 years ago - Reply 0


to add 2 different drop down into the 2 tabs panel content, if i select 2nd tab's drop down list item it will returns to the 1st tab ? can anybody please help me out to resolve?

divya () - 8 years ago - Reply 0


there isn't any js code! how can it work?!

Vahid () - 8 years ago - Reply 0


Bootstrap has built in JS libraries, that's also how modals work just by adding `data-toggle="modal" data-target="#myModal"` to an element.

max () - 8 years ago - Reply 0


and how would you add a title to those panels?

Dan () - 8 years ago - Reply 0


nevermind, I see there is another example with this....

Dan () - 8 years ago - Reply 0


This is just html + CSS, how does it not work for me?

hf () - 9 years ago - Reply 0


how to download it?

Martín Ezequiel () - 9 years ago - Reply 0


If you are registered and logged in, you will see a cog wheel that you can click and download the snippet from this page.

maxsurguy () - 9 years ago - Reply 0


how to download it?

Mei Mei () - 9 years ago - Reply 0


In the (latest) chrome there is a subtle line (border-bottom) on the active tab.... but not always, when you scroll only

Damir Secki () - 9 years ago - Reply 0


Can I use form with tab?

Rodrigo Cañete () - 9 years ago - Reply 0


How to still add a title?

Guest () - 9 years ago - Reply 0


Thank you served me well

Junior Oliveira () - 9 years ago - Reply 0


Thank you very much! It's very useful for my works.

Trọng Nghĩa () - 9 years ago - Reply 0


Thanks. It's amazing

Agung Pambudi () - 9 years ago - Reply 0


Nice work. Thanks. May be redundant tag </span> at line 21, 49 etc.

Paul Green () - 10 years ago - Reply 0


Nice work! There's a weird closing span element on each panel though?

bbashy () - 10 years ago - Reply 0


Thanks for sharing ;)

Bruno Seixas () - 10 years ago - Reply 0


Very awesome!

Adam Argo () - 10 years ago - Reply 0


These are nice!

Great work!!

Timmy () - 10 years ago - Reply 0