"Colorful bootstrap tap with flatline theme"
Bootstrap 4.1.1 Snippet by jamircse

Post to Facebook Tweet this

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="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://chinahuts.com/tab/colorfulTab.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chinahuts.com/tab/colorfulTab.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Colorful bootstrap tap with flatline theme </h2>
<div class="colorful-tab-wrapper" id="colorful">
<ul class="colorful-tab-menu">
<li class="colorful-tab-menu-item active" tab-color="#00A566"><a href="#clr-0">Tab 1</a></li>
<li class="colorful-tab-menu-item" tab-color="#8021D3"><a href="#clr-1">Tab 2</a></li>
<li class="colorful-tab-menu-item" tab-color="#C9003C"><a href="#clr-2">Tab 3</a></li>
</ul>
<div class="colorful-tab-container">
<div class="colorful-tab-content active" id="clr-0">
<h2>Tab Content 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
<div class="colorful-tab-content" id="clr-1">
<h2>Tab Content 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
<div class="colorful-tab-content" id="clr-2">
<h2>Tab Content 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
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
.colorful-tab-wrapper {
width:100%;
margin:0px auto;
background: #f0efef;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
transition: background .3s ease 0s
}
ul{
list-style:none;
}
.colorful-tab-content p{
color:#fff;
}
.colorful-tab-content h2{
color:#000;
}
.colorful-tab-menu a:hover{
text-decoration:none;
}
.colorful-tab-wrapper:before {
position: absolute;
height: 100%;
width: 100%;
display: flex;
opacity: 0;
visibility: hidden;
left: 0;
top: 0;
content: "";
box-sizing: border-box;
overflow: hidden;
transform: scale(2) rotate(10deg);
font-size: 50px;
transition: all .6s ease 0s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
!function(a){a.fn.colorfulTab=function(e){var r=a(this),t=a.extend({theme:"",backgroundImage:!1,overlayColor:"#000",overlayOpacity:".6"},e);return this.each(function(){function e(a,e){var r=a.replace("#","");r=r.match(new RegExp("(.{"+r.length/3+"})","g"));for(var t=0;t<r.length;t++)r[t]=parseInt(1==r[t].length?r[t]+r[t]:r[t],16);return"undefined"!=typeof e&&r.push(e),""+r.join(",")}r.addClass(t.theme);var o=r.find(".colorful-tab-menu-item.active"),l=r.find(".colorful-tab-menu-item"),n=r.find(".colorful-tab-content"),c=r.find(".colorful-tab-menu-item a");if(1==!t.backgroundImage){var i=o.attr("tab-color");r.css("background",i)}else{r.addClass("colorful-tab-background-image");var s=o.attr("tab-background");r.css("background","linear-gradient( rgba("+e(t.overlayColor,t.overlayOpacity)+"), rgba("+e(t.overlayColor,t.overlayOpacity)+") ),url("+s+")")}a(c).click(function(o){var c=a(this).attr("href"),i=a(this).text(),s=a(this).parent();if(!s.hasClass("active")){if(l.removeClass("active"),s.addClass("active"),n.removeClass("active"),a(c).addClass("active"),r.attr("active-tab",i),r.addClass("active"),1==!t.backgroundImage){var u=s.attr("tab-color");r.css("background",u)}else{var v=s.attr("tab-background");r.css("background","linear-gradient( rgba("+e(t.overlayColor,t.overlayOpacity)+"), rgba("+e(t.overlayColor,t.overlayOpacity)+") ),url("+v+")")}setTimeout(function(){r.removeClass("active")},800)}o.preventDefault()})})}}(jQuery);
$('#colorful').colorfulTab({theme:'flatline'});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular
Colorful Input Groups
Bootstrap form theme
Input Validation + Colorful Input Groups

Questions / Comments: