user3801502 user3801502 - 4 months ago 11
HTML Question

How to create Tabbed Panel in Bootstrap

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?

Answer

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:

screenshot