Full Width Tabs
Full width tabs
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-tabHeader ct-tabHeader--motive ct-u-marginBottom30" role="tabpanel"> <ul class="list-unstyled text-uppercase ct-fw-600" role="tablist"> <li role="presentation" class="active"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #1</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #2</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #3</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #4</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #5</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #6</a></div><div class="mini-triangle"></div></li> </ul> </div> |
Full Width Tabs inside Container
Full Width Tabs inside Container
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <div class="ct-tabHeader ct-tabHeader--motive ct-u-marginBottom30" role="tabpanel"> <ul class="list-unstyled text-uppercase ct-fw-600" role="tablist"> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #1</a></div><div class="mini-triangle"></div></li> <li role="presentation" class="active"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #2</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #3</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #4</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #5</a></div><div class="mini-triangle"></div></li> <li role="presentation"><div class="ct-tabBorder"><a role="tab" data-toggle="tab">Tab #6</a></div><div class="mini-triangle"></div></li> </ul> </div> |
Media Tabs
Media tabs
Media tabs on mouse over
|
1 2 3 4 5 6 7 8 |
<div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-stacked ct-mediaTabs ct-u-paddingBottom15" role="tablist"> <li role="presentation" class="active"><a href="#care-advice2" role="tab" data-toggle="tab"><img src="assets/images/demo-content/patrickstar-01.jpg" alt="mediaTab"></a></li> <li role="presentation"><a href="#easy-to-use2" role="tab" data-toggle="tab"><img src="assets/images/demo-content/patrickstar-02.jpg" alt="mediaTab"></a></li> <li role="presentation"><a href="#different-choices2" role="tab" data-toggle="tab"><img src="assets/images/demo-content/patrickstar-03.jpg" alt="mediaTab"></a></li> </ul> </div> |
Tabs With Icon
Tabs With Icon
|
1 2 3 4 5 6 7 8 |
<div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-stacked ct-tabStacked ct-u-paddingBottom40" role="tablist"> <li role="presentation" class="active"><a href="#care-advice" role="tab" data-toggle="tab"><i class="fa fa-comments"></i><span>Care Advice</span></a></li> <li role="presentation"><a href="#easy-to-use" role="tab" data-toggle="tab"><i class="fa fa-heart"></i><span>Easy to Use</span></a></li> <li role="presentation"><a href="#different-choices" role="tab" data-toggle="tab"><i class="fa fa-align-left"></i><span>Different Choice</span></a></li> </ul> </div> |