How to create Tabbed Panel in Bootstrap - html

Question

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">Dashboard</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 1

I think what you want is just the regular bootstrap tabs
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</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

Answer 2

Here's some simple less you can add that allows you to include .nav.nav-tabs inside a .panel .panel-heading
An example codepen : http://codepen.io/anon/pen/utGaK
IMHO it doesn't quite look as "clean" as the components are when used independently w/o additional styles..
I've tested it with .panel-title too using .pull-right on the .nav. While it worked I found it best to add .clearfix to the header as the tabs are 1/2px too tall ATM. Should be simple to resolve it.
Here's the code I use in the above example.
For example :
<div class="panel panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<!-- Tab panes + Panel body -->
<div class="panel-body tab-content">
<div class="tab-pane active" id="home">HOME</div>
<div class="tab-pane" id="profile">PROFILE</div>
<div class="tab-pane" id="messages">MESSAGES</div>
<div class="tab-pane" id="settings">SET</div>
</div>
</div>
This is the less :
// Need to compensatve for padding in panel-heading
// Must be a way to invert this
// variable - #panel-heading-padding.
#panel-heading-padding-negate: -10px -15px;
.panel {
.panel-heading {
.nav-tabs {
margin:#panel-heading-padding-negate;
border-bottom-width:0;
> li {
> a {
// re-apply the original padding
padding:#panel-heading-padding;
margin-bottom:1px;
border:solid 0 transparent;
&:hover {
border-color: transparent;
}
}
&.active > a {
&,
&:hover,
&:focused {
border:solid 0 transparent;
}
}
}
}
}
}
UPDATE
I've added the following to the li definition and removed the margin-right & border-radius on the > li > a so that when I pull the nav to the right of the header it fits & looks cleaner.
&:first-child > a {
border-top-left-radius:#panel-border-radius;
}
&:last-child > a {
border-top-right-radius:#panel-border-radius;
}
Here's an updated codepen : http://codepen.io/anon/pen/hJsEC

Answer 3

There's a Bootsnipp snippet that does this: http://bootsnipp.com/snippets/MaA0A
It contains CSS to allow embedding tabs in the panel header like this:
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!--...-->
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!--...-->
</div>
</div>
</div>
Result:

Answer 4

Found a simple styling solution based on Andrew Scott's html structure:
.panel-heading>.nav-tabs {
border-bottom: none;
margin-bottom: -10px;
}

Answer 5

<ul class="nav nav-tabs ">
<li class="active" > One </li>
<li > Two <li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in active" id="One">
This is one
</div>
<div class="tab-pane fade " id="Two">
This is Two
</div>
</div>