"Panel with tabs"
Bootstrap 3.0.0 Snippet by Cyruxx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <span class="pull-right"> <!-- Tabs --> <ul class="nav panel-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> <li><a href="#tab4" data-toggle="tab">Tab 4</a></li> </ul> </span> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</div> <div class="tab-pane" id="tab2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> <div class="tab-pane" id="tab3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> <div class="tab-pane" id="tab4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</div> </div> </div> </div> </div> </div> </div>
/*Panel tabs*/ .panel-tabs { position: relative; bottom: 30px; clear:both; border-bottom: 1px solid transparent; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { margin-right: 2px; margin-top: 4px; line-height: .85; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #ffffff; } .panel-tabs > li > a:hover { border-color: transparent; color: #ffffff; background-color: transparent; } .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #fff; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(255,255,255, .23); border-bottom-color: transparent; }

Related: See More


Questions / Comments:

make it responsive if you can. heading and tab are colliding.

pramod mishra () - 7 years ago - Reply -1


How increase the Panel width( i need to have 6-8 tabs) and to keep it in center.

Dora Babu () - 8 years ago - Reply 0


responsive is not working :( i need it please help me

gersua () - 8 years ago - Reply 0


Thanks for create this panel with tabs, but i have a question.
Under the tabs exists a space, I don't get remove it.
What I do it?

Jefferson Pedro () - 9 years ago - Reply 0


Remove "bottom: 30px;" from the CSS :)

maxsurguy () - 9 years ago - Reply 0


Ok, bottom was removed, but the problem continued.
I get resolve changed pull-right in span for:
.pull-right-tab-panel{
float: right !important;
margin-bottom:-30px;
}

Jefferson Pedro () - 9 years ago - Reply 0


Could you create a snippet with the problem and I'll take a look at it?

maxsurguy () - 9 years ago - Reply 0


Thanks a lot! :)
Maybe make a vertical version?

- Best Regards

Casper Thomsen () - 9 years ago - Reply 0


How do you change the size of panel? I needed a bigger panel. :(

Ajeet () - 9 years ago - Reply 0


got it! Thanks anyways! :)

Ajeet () - 9 years ago - Reply 0


This is very awesome. Thank you. How can one make the tabs slide, please?

jidelambo () - 9 years ago - Reply 0


Hey man! mind a quick help here? I just copy&paste the code but not seems to work at all... I mean, the tabs are there, but when I click in any other tabs, it won't change... like, i'm in the tab1 and want to change to tab2... is not working.... I added a script src linking to "bootstrap.js", but no success at all... what else I need to do?

Cheers =)

Tofanelli () - 9 years ago - Reply 0


i have used your tabs in my project, came here to say thanks for the wonderful snippest

Daniel Chikaka () - 10 years ago - Reply 0


Thanks! :)

Alex () - 10 years ago - Reply 0


Awesome to hear! Enjoy!

maxsurguy () - 10 years ago - Reply 0


Very Nice! Works perfectly.

Lummy () - 10 years ago - Reply 0


Thanks for this wonderful snippets. But I have a problem, I cant change to other tabs. I m quite sure that I use bootstrap in order to run this. Everything is fine, the design, the layout, my only problem is I cant change/click other tabs. Please help

Cary Bondoc () - 10 years ago - Reply 0


Hey, does it work fine on bootsnipp? (On this site?) if yes, your bootstrap is not correctly installed.
Try to move the Javascript includes to the header, right after the <link rel=""> of bootstrap. (This often fixes almost every problem.)

Alex () - 10 years ago - Reply 0


That solve the problem! Thanks Cyruxx for this great snippet!

Cary Bondoc () - 10 years ago - Reply 0


never works for me... NEVER

Alex () - 10 years ago - Reply 0


Hello Alex, in order to fix your problem please indicate why id didnt work, also what did you do so far to fix the problem. We are here to help you. :)

Cary Bondoc () - 10 years ago - Reply 0


What exactly does not work? I've tested it on multiple OS and two different browser until now.. It works fine!

Alex () - 10 years ago - Reply 0


Can you make the same functionality with PILLS ?

den () - 10 years ago - Reply 0


They look almost exactly like pills - or what do you mean?

Alex () - 10 years ago - Reply 0


These snippets never seem to work for me...

Lindsey C. Holmes () - 11 years ago - Reply 0


I'd like to see which snippets exactly don't work and what's going wrong? Could you point me to an example?

maxsurguy () - 11 years ago - Reply 0


Actually this is the snippet example I've sent. http://bootsnipp.com/snippe...

Lindsey C. Holmes () - 10 years ago - Reply 0


Here is an example Max of a different snippet - http://lindseycholmes.posta.... I tried this one too but I know the previous worked for a minute and then stopped working which was feedback that a few users gave about a couple of the snippets. I just tried Cyruxx's snippet Friday so unsure if it would have worked...

Lindsey C. Holmes () - 10 years ago - Reply 0


Can you explain in more detail please? What are you doing? Keep in mind that these snippets are for Twitter Bootstrap HTML framework, they will not work on their own, you do need Bootstrap CSS to be loaded first. Let me know more details what you do.

maxsurguy () - 11 years ago - Reply 0


I think she does not use bootstrap :)

Alex () - 11 years ago - Reply 0


I do use Bootstrap Cyruxx. Postach.io is on the bootstrap framework. :)

Lindsey C. Holmes () - 11 years ago - Reply 0


What exactly is not working for you?

Alex () - 11 years ago - Reply 0


I wrote Max above Cyruxx. Thanks for creating amazing snippets.

Lindsey C. Holmes () - 10 years ago - Reply 0


I don't think postach.io allows you to have HTML in the content, therefore I don't think you can just insert any of the snippets directly into your posts there.

maxsurguy () - 10 years ago - Reply 0


This particular snippet worked before. I am working with them to find a fix now. Thanks so much for your help.

Lindsey C. Holmes () - 10 years ago - Reply 0


An example is for use on my Postach.io site. It runs on bootsrap. Plus some of the snippets worked at one point and then one day they didn't.

Lindsey C. Holmes () - 11 years ago - Reply 0