AdminPlus - Premium Bootstrap Admin Template (v3.0)

Tabs in 8 awesome styles

Tab content #1

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id eros a orci adipiscing accumsan id eget sem. Etiam sit amet neque ligula, ac hendrerit metus. Phasellus convallis nulla nec leo dapibus sed feugiat felis feugiat. Nulla facilisi. Mauris quis tortor eu eros posuere tristique. In turpis leo, iaculis eget tincidunt in, gravida sit amet diam. Vivamus viverra, nisl vitae consectetur volutpat, ipsum risus tempor augue, in convallis leo massa in sem. Maecenas in urna quis purus pulvinar posuere. Fusce blandit viverra placerat. Fusce elementum turpis sed velit blandit elementum.

Tab content #2

Source

<div class="widget widget-2 widget-tabs widget-tabs-2">
	<div class="widget-head">
		<ul>
			<li class="active"><a class="glyphicons cardio" href="#website-traffic-tab" data-toggle="tab"><i></i>Website Traffic</a></li>
			<li><a class="glyphicons cardio" href="#website-traffic-tab2" data-toggle="tab"><i></i>Secondary Tab</a></li>
		</ul>
	</div>
	<div class="widget-body">
		<div class="tab-content">
			<div class="tab-pane active" id="website-traffic-tab">
				<h5>Tab content #1</h5>
				<p>Class aptent taciti sociosqu  ...</p>
			</div>
			<div class="tab-pane" id="website-traffic-tab2">
				<h5>Tab content #2</h5>
				<p>Class aptent taciti sociosqu ...</p>
			</div>
		</div>
	</div>
</div>

All topics tab content

Account tab content

Donec at nunc dui. Integer eget sem sit amet arcu bibendum elementum vel sit amet risus. Fusce libero lorem, fermentum vitae lacinia dapibus, vestibulum ac enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum accumsan risus sed lorem tincidunt eget faucibus sapien tempor. Proin ac feugiat dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Payments tab content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante est, tempor ut posuere nec, venenatis sed arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis in purus ut mauris sodales sollicitudin. Mauris cursus imperdiet dignissim. Phasellus risus felis, rutrum in laoreet vel, posuere vel dolor. Sed venenatis vehicula tempus. Nam at rutrum enim. Sed massa quam, mattis in viverra ut, ullamcorper et massa. Phasellus sapien diam, faucibus ac tempor a, condimentum quis est. Donec nec velit ante, vel mattis metus. Ut nec libero diam, id auctor sapien. Suspendisse eget lorem ante, in fringilla dui. In hac habitasse platea dictumst.

Support tab content

Integer porttitor, enim eu egestas ullamcorper, odio mauris semper quam, in facilisis dui ligula eget ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dolor leo, consectetur nec tristique pretium, ornare quis purus. Nullam pulvinar, enim eu molestie venenatis, turpis nisl vehicula eros, et ultricies risus urna sed diam. Suspendisse potenti. Nullam tincidunt tellus nisi. Aenean felis eros, congue vitae hendrerit id, mattis quis mi.

Features tab content

Nunc aliquet lacus laoreet odio consectetur tempus. In id nisl diam, congue vehicula sapien. Nulla facilisi. Donec sagittis cursus sollicitudin. Aenean leo tellus, eleifend quis facilisis vel, tempus ac elit. Nam eget turpis nec erat vestibulum fringilla. Donec et felis ipsum. Fusce feugiat ultricies lacus a ultrices. Nunc ultrices, orci ut convallis pulvinar, diam nunc tincidunt augue, sit amet lacinia ante mi a augue. Sed feugiat, neque eget porttitor varius, tellus nisi sollicitudin libero, nec aliquam ante dui gravida ipsum. Fusce cursus rhoncus lectus, quis malesuada sapien facilisis eu. Aenean vitae massa sed urna condimentum porttitor ac at risus.

Source

<div class="widget widget-tabs widget-tabs-double-2">
	<div class="widget-head">
		<ul>
			<li class="active"><a class="glyphicons list" href="#tabAll" data-toggle="tab"><i></i><span>All topics</span></a></li>
			<li><a class="glyphicons user" href="#tabAccount" data-toggle="tab"><i></i><span>Account</span></a></li>
			<li><a class="glyphicons credit_card" href="#tabPayments" data-toggle="tab"><i></i><span>Payments</span></a></li>
			<li><a class="glyphicons cogwheel" href="#tabSupport" data-toggle="tab"><i></i><span>Technical Support</span></a></li>
			<li><a class="glyphicons snowflake" href="#tabFeatures" data-toggle="tab"><i></i><span>Features</span></a></li>
		</ul>
	</div>
	<div class="widget-body">
		<div class="tab-content">
			<div id="tabAll" class="tab-pane active widget-body-regular">
				<h5>All topics tab content</h5>
				<p>Class aptent taciti sociosqu ad litora ...</p>
			</div>
			<div id="tabAccount" class="tab-pane widget-body-regular">
				<h5>Account tab content</h5>
				<p>Donec at nunc dui. Integer eget sem sit amet arcu ...</p>
			</div>
			<div id="tabPayments" class="tab-pane widget-body-regular">
				<h5>Payments tab content</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
			</div>
			<div id="tabSupport" class="tab-pane widget-body-regular">
				<h5>Support tab content</h5>
				<p>Integer porttitor, enim eu egestas ullamcorper ...</p>
			</div>
			<div id="tabFeatures" class="tab-pane widget-body-regular">
				<h5>Features tab content</h5>
				<p>Nunc aliquet lacus laoreet odio consectetur tempus ...</p>
			</div>
		</div>
	</div>
</div>

View all photos (43)
Albums (3)
Add Photos
Create Album

First tab

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Second tab

Third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices libero vel massa egestas facilisis. Mauris convallis augue nec dolor dignissim vestibulum. Praesent imperdiet elit posuere arcu posuere consectetur. Morbi dignissim eleifend nibh, eget tincidunt nibh dignissim hendrerit. Cras iaculis congue lorem, eget gravida augue vehicula sed. Nam lorem sem, consectetur ac tempus quis, consectetur ut lectus. In bibendum luctus pharetra. Morbi lacinia sem sem. Phasellus quis tellus magna.

Fourth tab

Source

<div class="tabsbar">
	<ul>
		<li class="glyphicons camera active"><a href="#tab1-3" data-toggle="tab"><i></i> View all photos <strong>(43)</strong></a></li>
		<li class="glyphicons folder_open"><a href="#tab2-3" data-toggle="tab"><i></i> Albums <strong>(3)</strong></a></li>
		<li class="glyphicons circle_plus"><a href="#tab3-3" data-toggle="tab"><i></i> <span>Add Photos</span></a></li>
		<li class="glyphicons folder_plus"><a href="#tab4-3" data-toggle="tab"><i></i> <span>Create Album</span></a></li>
	</ul>
</div>
<div class="tab-content">
	<div class="tab-pane active" id="tab1-3">
		<h4>First tab</h4>
		<p>Anim pariatur cliche reprehenderit ...</p>
	</div>
	<div class="tab-pane" id="tab2-3">
		<h4>Second tab</h4>
		<p>Anim pariatur cliche reprehenderit ...</p>
	</div>
	<div class="tab-pane" id="tab3-3">
		<h4>Third tab</h4>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div class="tab-pane" id="tab4-3">
		<h4>Fourth tab</h4>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
</div>

Product Listing
Product Details
Shopping Cart
Shop Management

First tab

Second tab

Third tab

Fourth tab

Source

<div class="tabsbar tabsbar-2">
	<ul class="row row-merge">
		<li class="col-md-3 glyphicons cargo active"><a href="#tab1-4" data-toggle="tab"><i></i> Product Listing</a></li>
		<li class="col-md-3 glyphicons circle_info"><a href="#tab2-4" data-toggle="tab"><i></i> Product Details</a></li>
		<li class="col-md-3 glyphicons cart_in"><a href="#tab3-4" data-toggle="tab"><i></i> Shopping Cart</a></li>
		<li class="col-md-3 glyphicons pencil"><a href="#tab4-4" data-toggle="tab"><i></i> Shop Management</a></li>
	</ul>
</div>
<div class="tab-content">
	<div class="tab-pane active" id="tab1-4">
		<h4>First tab</h4>
		<p>Anim pariatur cliche reprehenderit ...</p>
	</div>
	<div class="tab-pane" id="tab2-4">
		<h4>Second tab</h4>
		<p>Anim pariatur cliche reprehenderit ...</p>
	</div>
	<div class="tab-pane" id="tab3-4">
		<h4>Third tab</h4>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div class="tab-pane" id="tab4-4">
		<h4>Fourth tab</h4>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
</div>

Source

<div class="widget widget-2 widget-tabs">
	<div class="widget-head">
		<ul>
			<li class="active"><a class="glyphicons coffe_cup" href="#tab-1" data-toggle="tab"><i></i> Active tab</li>
			<li><a class="glyphicons share_alt" href="#tab-2" data-toggle="tab"><i></i> Other tab</a></li>
		</ul>
	</div>
	<div class="widget-body">
		<div class="tab-content">
			<div class="tab-pane active" id="tab-1">
				<p>Anim pariatur cliche reprehenderit ... </p>
			</div>
			<div class="tab-pane" id="tab-2">
				<p>Anim pariatur cliche reprehenderit ... </p>
			</div>
		</div>
	</div>
</div>

First tab

Second tab

Third tab

Fourth tab

Source

<div class="widget widget-tabs widget-tabs-double widget-tabs-vertical row row-merge">
	<div class="widget-head col-md-3">
		<ul>
			<li class="active"><a href="#tab1-1" class="glyphicons user" data-toggle="tab"><i></i><span class="strong">Step 1</span><span>Personal details</span></a></li>
			<li><a href="#tab2-1" class="glyphicons calculator" data-toggle="tab"><i></i><span class="strong">Step 2</span><span>Billing details</span></a></li>
			<li><a href="#tab3-1" class="glyphicons credit_card" data-toggle="tab"><i></i><span class="strong">Step 3</span><span>Payment</span></a></li>
			<li><a href="#tab4-1" class="glyphicons circle_ok" data-toggle="tab"><i></i><span class="strong">Step 4</span><span>Confirmation</span></a></li>
		</ul>
	</div>
	<div class="widget-body col-md-9">
		<div class="tab-content">
			<div class="tab-pane active" id="tab1-1">
				<h4>First tab</h4>
				<p>Anim pariatur cliche reprehenderit ...</p>
			</div>
			<div class="tab-pane" id="tab2-1">
				<h4>Second tab</h4>
				<p>Anim pariatur cliche reprehenderit ...</p>
			</div>
			<div class="tab-pane" id="tab3-1">
				<h4>Third tab</h4>
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div class="tab-pane" id="tab4-1">
				<h4>Fourth tab</h4>
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
		</div>
	</div>
</div>

First tab

Second tab

Third tab

Fourth tab

Source

<div class="widget widget-tabs widget-tabs-double">
	<div class="widget-head">
		<ul>
			<li class="active"><a href="#tab1-2" class="glyphicons user" data-toggle="tab"><i></i><span class="strong">Step 1</span><span>Personal details</span></a></li>
			<li><a href="#tab2-2" class="glyphicons calculator" data-toggle="tab"><i></i><span class="strong">Step 2</span><span>Billing details</span></a></li>
			<li><a href="#tab3-2" class="glyphicons credit_card" data-toggle="tab"><i></i><span class="strong">Step 3</span><span>Payment</span></a></li>
			<li><a href="#tab4-2" class="glyphicons circle_ok" data-toggle="tab"><i></i><span class="strong">Step 4</span><span>Confirmation</span></a></li>
		</ul>
	</div>
	<div class="widget-body">
		<div class="tab-content">
			<div class="tab-pane active" id="tab1-2">
				<h4>First tab</h4>
				<p>Anim pariatur cliche reprehenderit ...</p>
			</div>
			<div class="tab-pane" id="tab2-2">
				<h4>Second tab</h4>
				<p>Anim pariatur cliche reprehenderit ...</p>
			</div>
			<div class="tab-pane" id="tab3-2">
				<h4>Third tab</h4>
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div class="tab-pane" id="tab4-2">
				<h4>Fourth tab</h4>
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
		</div>
	</div>
</div>

Tab #1 content heading

Tab #2 content heading

Tab #3 content heading

Tab #4 content heading

Tab #5 content heading

Source

<div class="widget widget-4 widget-tabs-icons-only">
	<div class="widget-head">
		<h4 class="heading">Heading</h4>
		<ul class="pull-right">
			<li>Filter by</li>
			<li class="glyphicons user_add active"><span data-toggle="tab" data-target="#tab1-5"><i></i></span></li>
			<li class="glyphicons shopping_cart"><span data-toggle="tab" data-target="#tab2-5"><i></i></span></li>
			<li class="glyphicons envelope"><span data-toggle="tab" data-target="#tab3-5"><i></i></span></li>
			<li class="glyphicons link"><span data-toggle="tab" data-target="#tab4-5"><i></i></span></li>
			<li class="glyphicons camera"><span data-toggle="tab" data-target="#tab5-5"><i></i></span></li>
		</ul>
		<div class="clearfix"></div>
	</div>
	<div class="widget-body">
		<div class="tab-content">
			<div id="tab1-5" class="tab-pane active box-generic">
				<h4>Tab #1 content heading</h4>
				<p>Class aptent taciti sociosqu ad ...</p>
			</div>
			<div id="tab2-5" class="tab-pane box-generic">
				<h4>Tab #2 content heading</h4>
				<p>Donec at nunc dui. Integer eget ...</p>
			</div>
			<div id="tab3-5" class="tab-pane box-generic">
				<h4>Tab #3 content heading</h4>
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div id="tab4-5" class="tab-pane box-generic">
				<h4>Tab #4 content heading</h4>
				<p>Integer porttitor, enim eu egestas ...</p>
			</div>
			<div id="tab5-5" class="tab-pane box-generic">
				<h4>Tab #5 content heading</h4>
				<p>Nunc aliquet lacus laoreet odio ...</p>
			</div>
		</div>
	</div>
</div>

Tabs in 8 awesome styles

Tab content #1

Tab content #2

All topics tab content

Account tab content

Payments tab content

Support tab content

Features tab content

First tab

Second tab

Third tab

Fourth tab

First tab

Second tab

Third tab

Fourth tab

First tab

Second tab

Third tab

Fourth tab

First tab

Second tab

Third tab

Fourth tab

Tabs from Icons

Tab #1 content heading

Tab #2 content heading

Tab #3 content heading

Tab #4 content heading

Tab #5 content heading

Themer color options