"Bootstrap Line Tabs by KeenThemes"
Bootstrap 3.2.0 Snippet by keenthemes

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!-- Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Default Tab</h3> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Tab 1 </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Tab 2 </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Tab 3 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <p> I'm in Tab 1. </p> <p> Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. </p> <p> <a class="btn btn-success" href="http://j.mp/metronictheme" target="_blank"> Learn more... </a> </p> </div> <div class="tab-pane" id="tab_default_2"> <p> Howdy, I'm in Tab 2. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation. </p> <p> <a class="btn btn-warning" href="http://j.mp/metronictheme" target="_blank"> Click for more features... </a> </p> </div> <div class="tab-pane" id="tab_default_3"> <p> Howdy, I'm in Tab 3. </p> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat </p> <p> <a class="btn btn-info" href="http://j.mp/metronictheme" target="_blank"> Learn more... </a> </p> </div> </div> </div> </div> <h3>Below Tab</h3> <div class="tabbable-panel"> <div class="tabbable-line tabs-below"> <div class="tab-content"> <div class="tab-pane active" id="tab_below_1"> <p> I'm in Tab 1. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat dolor in hendrerit in vulputate velit esse molestie consequat. </p> <p> <a class="btn btn-warning" href="http://j.mp/metronictheme" target="_blank"> Learn more... </a> </p> </div> <div class="tab-pane" id="tab_below_2"> <p> Howdy, I'm in Tab 2. </p> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. </p> <p> <a class="btn btn-danger" href="http://j.mp/metronictheme" target="_blank"> Learn more... </a> </p> </div> <div class="tab-pane" id="tab_below_3"> <p> Howdy, I'm in Tab 3. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate. </p> <p> <a class="btn btn-info" href="http://j.mp/metronictheme" target="_blank"> Learn more... </a> </p> </div> </div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_below_1" data-toggle="tab"> Tab 1 </a> </li> <li class=""> <a href="#tab_below_2" data-toggle="tab"> Tab 2 </a> </li> <li> <a href="#tab_below_3" data-toggle="tab"> Tab 3 </a> </li> </ul> </div> </div> </div> </div> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>
/*** Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ /* Tabs panel */ .tabbable-panel { border:1px solid #eee; padding: 10px; } /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px; } .tabbable-line > .nav-tabs > li { margin-right: 2px; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px; } .tabbable-line > .nav-tabs > li.active { border-bottom: 4px solid #f3565d; position: relative; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; } /* Below tabs mode */ .tabbable-line.tabs-below > .nav-tabs > li { border-top: 4px solid transparent; } .tabbable-line.tabs-below > .nav-tabs > li > a { margin-top: 0; } .tabbable-line.tabs-below > .nav-tabs > li:hover { border-bottom: 0; border-top: 4px solid #fbcdcf; } .tabbable-line.tabs-below > .nav-tabs > li.active { margin-bottom: -2px; border-bottom: 0; border-top: 4px solid #f3565d; } .tabbable-line.tabs-below > .tab-content { margin-top: -10px; border-top: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; }

Related: See More

Paper Dashboard Pro
Form - Line
Tabs style 1
Bootstrap Tabs with Table

Questions / Comments:

thanks alot.

but why my code tab not working? the hyper link does not work for me...any reason?

atik () - 2 years ago - Reply 0

thanks alot.

but why my code tab not working? im stuck .

atik () - 2 years ago - Reply 0

thanks alot.

but why my code tab not working?

atik () - 2 years ago - Reply 0

why my tab doesn't work?

atik () - 2 years ago - Reply 0

why my tab doesnt work?

atik () - 2 years ago - Reply 0

really cool, using it right now !

One tip : If you will use it within a stacked navbar : add a border-bottom 4px (transparent) to each nav-tabs li element, so it works well when you hover tabs

Baptiste Comet () - 9 years ago - Reply 0

is there anyway to align the tabs to the right so i can put a title to the left as seen on stackoverflow.com :) thank you, great work btw

carlos () - 9 years ago - Reply 0

Seems like you can't post code here. What I refered to in the post below was this:
... href="#active" ...
to
... href="/projects/#active" ...

Simon () - 9 years ago - Reply 0

Thanks alot. To get mine working I had to add the filepath in the tag from:

to

Simon () - 9 years ago - Reply 0

http://ahangbaz.org

Ediablo () - 9 years ago - Reply 0

perfect dude

Ediablo () - 9 years ago - Reply 0

the hyper link does not work for me...any reason?

jay () - 10 years ago - Reply 0

Hi :),

Which huper link are you referring to ? http://j.mp/metronictheme ?

Thanks.

KeenThemes () - 10 years ago - Reply 0

Thanks, used it too!

Webrunner () - 10 years ago - Reply 0

Glad to hear that! :)

KeenThemes () - 10 years ago - Reply 0

Hey!

Thanks to all for the warm feedbacks. You can also check our Metronic premium theme here:
http://themeforest.net/item...

KeenThemes () - 10 years ago - Reply 0

good job. its really usable. find a landing page http://www.mirchu.net/rook-...

Mirchu () - 10 years ago - Reply 0

Thanks :)

KeenThemes () - 10 years ago - Reply 0

welcome :)

Mirchu () - 10 years ago - Reply 0

I like

hjk () - 10 years ago - Reply 0

Thanks :)

KeenThemes () - 10 years ago - Reply 0

Sorry if this is a somewhat stupid question but...
Because is from a paid theme can we use this in a commercial apps?

Bruno Seixas () - 10 years ago - Reply 0

Yes, sure, you can. The code is licensed under MIT :)

KeenThemes () - 10 years ago - Reply 0

Thanks for the feedback =)
I was keen to think that because of the css comments about the licence.
Still I wanted to confirm :)

Bruno Seixas () - 10 years ago - Reply 0

Sure, if you need any other info please let me know :)

KeenThemes () - 10 years ago - Reply 0

I'm too interested to know the answer.

Yoav () - 10 years ago - Reply 0

Yeah, the code is licensed under MIT so you can use it as you wish :)

KeenThemes () - 10 years ago - Reply 0

Genius! Added to my favourite.

Yoav () - 10 years ago - Reply 0

Thanks for the feedback! :)

KeenThemes () - 10 years ago - Reply 0

nice, well done. I am going to use it on my next project.

guest () - 10 years ago - Reply 0

Thanks :) Glad to hear that!

KeenThemes () - 10 years ago - Reply 0