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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/***
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


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 () - 10 years ago - Reply 0


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

to

Simon () - 10 years ago - Reply 0


Ediablo () - 10 years ago - Reply 0


perfect dude

Ediablo () - 10 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