How to create Tabbed Panel in Bootstrap

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-






whats the alternate?

Solutions/Answers:

Solution 1:

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


For V4, you’ll want to style with the .nav-tabs class and also invoke the tab JavaScript plugin

Solution 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

Related:  Disable a link in Bootstrap

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"><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>

    </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

Related:  2 columns of equal height - Twitter's Bootstrap 2.0

Solution 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:

tabbed panel example

Solution 4:

Found a simple styling solution based on Andrew Scott’s html structure:

.panel-heading>.nav-tabs {
    border-bottom: none;
    margin-bottom: -10px;
}

Solution 5:

  <ul  class="nav nav-tabs  ">
      <li class="active" > <a href="#One" data-target="#One" data-toggle="tab"> One </a>  </li>
      <li  ><a  href="#Two" data-target="#Two" data-toggle="tab"> Two </a> <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> 

References