How to create Tabbed Panel in Bootstrap
html, twitter-bootstrap, twitter-bootstrap-3
Solution
I think what you want is just the regular bootstrap tabs
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Demo in jsFiddle
With a little bit of styling, you can get it to look how you want:
For V4, you'll want to style with the `.nav-tabs` class and also invoke the tab JavaScript plugin
Problem
Which class i need to use for tabbed panel? Is there one? i do the following and looks bad :-( A tabbed navigation + a panel with and 0 padding between them- ``` <div id="dashboardheader" class="container" style="padding-top: 20px;"> <ul class="nav nav-tabs tab-pane"> <li class="active"><a href="#">Dashboard</a></li> </ul> </div> <div id="dashboardpanel " style="padding-top: 0px"> <div class="panel panel-primary container" style="padding-top: 30px;"> <div class="row"> <div class="col-md-offset-2 col-md-8 col-md-offset-2"> <div class="row"> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" onclick="OpenDialog()" /> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> </div> </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-8 col-md-offset-2"> <div class="row"> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> <img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" /> </div> </div> </div> </div> </div> ``` whats the alternate?