Responsive Tab
Click to preview the Responsive Tab demo. View demo
Horizontal Tab Style 01
Code:
html
<div class="dg-tabs-top dg-tabs-top01">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Retina Ready</span></li>
<li><span>Free Support</span></li>
<li><span>Proin Dolor</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>
<div class="dg-tabs-top dg-tabs-top02">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><em class="fa fa-microphone"></em><span>Tab Title1</span></li>
<li><em class="fa fa-mortar-board"></em><span>Tab Title2</span></li>
<li><em class="fa fa-file-text-o"></em><span>Tab Title3</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin clearfix"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 02
Code:
html
<div class="dg-tabs-top dg-tabs-top03">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Tab title1</span></li>
<li><span>Tab title2</span></li>
<li><span>Tab title3</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 03
Code:
html
<div class="dg-tabs-top dg-tabs-top04">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span class="fa fa-user"></span></li>
<li><span>Tab title</span></li>
<li><span>Other</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 04
Code:
html
<div class="dg-tabs-bg01 pt-60 pb-60">
<div class="container">
<div class="dg-tabs-top dg-tabs-top05">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-bell"></em>Branding</span></li>
<li><span>Proin dolor</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>
</div>
</div>Horizontal Tab Style 05
Code:
html
<div class="dg-tabs-bg01 pt-60 pb-60">
<div class="container">
<div class="dg-tabs-top dg-tabs-top06">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Retina Ready</span></li>
<li><span>Free Support</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>
</div>
</div>Horizontal Tab Style 06
Code:
html
<div class="dg-tabs-top dg-tabs-top07">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-dribbble"></em>Branding</span></li>
<li><span>Nunc tincidunt</span></li>
<li><span>Aenean lacinia</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 07
Code:
html
<div class="dg-tabs-top dg-tabs-top09">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Proin dolor</span></li>
<li><span>Aenean lacinia</span></li>
<li><span>Retina Ready</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin clearfix"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 09
Code:
html
<div class="dg-tabs-top dg-tabs-top10">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Tab title1</span></li>
<li><span>Tab title2</span></li>
<li><span>Tab title3</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 10
Code:
html
<div class="dg-tabs-top dg-tabs-top13">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Branding</span></li>
<li><span>Proin dolor</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Horizontal Tab Style 11
Code:
html
<div class="dg-tabs-bg02 pt-60 pb-60">
<div class="container">
<div class="dg-tabs-top dg-tabs-top16">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-headphones"></em>Tab title1</span></li>
<li><span><em class="fa fa-tachometer"></em>Tab title2</span></li>
<li><span><em class="fa fa-empire"></em>Tab title3</span></li>
<li><span><em class="fa fa-pagelines"></em>Tab title4</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 4 </div>
</div>
</div>
</div>
</div>
</div>Horizontal Tab Style 12
Code:
html
<div class="dg-tabs-bg02 pt-60 pb-60">
<div class="container">
<div class="dg-tabs-top dg-tabs-top17">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-bomb"></em>Tab title1 </span></li>
<li><span><em class="fa fa-space-shuttle"></em>Tab title2</span></li>
<li><span><em class="fa fa-trophy"></em>Tab title3</span></li>
<li><span><em class="fa fa-university"></em>Tab title4</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 4 </div>
</div>
</div>
</div>
</div>
</div>Horizontal Tab Style 13
Code:
html
<div class="tab_top_img"><img alt="" class="img-responsive" src="/portals/13/Features-Images/dg-tabs-img06.jpg" /></div>
<div class="dg-tabs-top dg-tabs-top18">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-futbol-o"></em>Tab title1</span></li>
<li><span><em class="fa fa-bug"></em>Tab title2</span></li>
<li><span><em class="fa fa-paper-plane-o"></em>Tab title3</span></li>
<li><span><em class="fa fa-gift"></em>Tab title4</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 4 </div>
</div>
</div>
</div>Horizontal Center Tab Style 01
Code:
html
<div class="tab_top_img"><img alt="" class="img-responsive" src="/portals/13/Features-Images/dg-tabs-img07.jpg" /></div>
<div class="dg-tabs-top dg-tabs-top19">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Tab title1 </span></li>
<li><span>Tab title2</span></li>
<li><span>Tab title3</span></li>
<li><span>Tab title4</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 4 </div>
</div>
</div>
</div>Horizontal Center Tab Style 02
Code:
html
<div class="dg-tabs-top dg-tabs-top20">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Our Works</span></li>
<li><span>Our Service</span></li>
<li><span>contact us</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin clearfix"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 3 </div>
</div>
</div>
</div>porttitor ac elementum luctus.
Code:
html
<div class="dg-tabs-bottom dg-tabs-bottom04">
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 4 </div>
</div>
</div>
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span><em class="fa fa-headphones"></em>Tab title1</span></li>
<li><span><em class="fa fa-space-shuttle"></em>Tab title2</span></li>
<li><span><em class="fa fa fa-ge"></em>Tab title3</span></li>
<li><span><em class="fa fa-university"></em>Tab title4</span></li>
</ul>
</div>Horizontal Center Tab Style 04
Code:
html
<div class="dg-tabs-top dg-tabs-top22">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Branding</span></li>
<li><span>Proin dolor</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin clearfix"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 3 </div>
</div>
</div>
</div>Horizontal Center Tab Style 05
Code:
html
<div class="dg-tabs-left dg-tabs-left03">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Tab title1</span></li>
<li><span>Tab title1</span></li>
<li><span>Tab title2</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Vertical Tab Style 01
Code:
html
<div class="dg-tabs-left dg-tabs-left05">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Branding</span></li>
<li><span>Proin dolor</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>Vertical Tab Style 02
Code:
html
<div class="dg-tabs-left dg-tabs-left09">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Title1</span></li>
<li><span>Tab title2</span></li>
<li><span>Other</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin clearfix"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin clearfix"> Context 3 </div>
</div>
</div>
</div>Vertical Tab Style 03
Code:
html
<div class="dg-tabs-left dg-tabs-left12">
<ul class="resp-tabs-list">
<li class="resp-tab-active"><span>Branding</span></li>
<li><span>Proin dolor</span></li>
<li><span>Web Design</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp_container resp-tab-content-active">
<div class="resp_margin"> Context 1 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 2 </div>
</div>
<div class="resp_container">
<div class="resp_margin"> Context 3 </div>
</div>
</div>
</div>