Tabs & Accordions

A simple accordion, you can easily add images, icon fonts, or whatever content you need inside.

<!--=== Accordion ===-->						
<div class="panel-group" id="accordion">
	<!--=== Item 1 ===-->
	<div class="panel panel-default">
		<div class="panel-heading">
		  <h4 class="panel-title">
		    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
		      We <b>LOVE</b> food.
		    </a>
		  </h4>
		</div>
	    <div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
			We built this template keeping in mind the features you might need on your next project. Giving you a variety of components to utilize, a variety of pages to build on, and all of the plugins you might need, already configured for Bootstrap 3.
			</div>
	    </div>
	</div><!-- /panel -->
	<!--=== Item 2 ===-->
	<div class="panel panel-default">
		<div class="panel-heading">
		  <h4 class="panel-title">
		    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
		      We drink <i>beer</i>.
		    </a>
		  </h4>
		</div>
	    <div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
			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. Anim pariatur.
			</div>
	    </div>
	</div><!-- /panel -->
	<!--=== Item 3 ===-->
	<div class="panel panel-default">
		<div class="panel-heading">
		  <h4 class="panel-title">
		    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
		      We like to sleep.
		    </a>
		  </h4>
		</div>
	    <div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
			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. Anim pariatur.
			</div>
	    </div>
	</div><!-- /panel -->
</div><!-- //accordion -->					

Some simple tabs to help you organize more content.

• Home
• Profile
• Messages
• Settings

<!--=== Nav tabs ===-->
<ul class="nav nav-tabs" role="tablist">
	<li><a href="#home" role="tab" data-toggle="tab">Home</a></li>
	<li class="active"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content tab-default tab-default">
	<div class="tab-pane" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et ante metus. Vestibulum id vestibulum sapien, non convallis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vestibulum rhoncus leo. Suspendisse vulputate elementum dui. Duis tristique auctor dolor in lobortis. Donec pretium laoreet purus non tempus. Morbi sit amet dolor ut sapien dictum porta et a ipsum. Proin malesuada dapibus ligula, at mattis ligula venenatis et. Etiam a quam ante.</div>
	<div class="tab-pane in active" id="profile">Aliquam consectetur felis a posuere pulvinar. Etiam pulvinar varius arcu, non varius metus consequat id. Sed consequat imperdiet mi, in mattis libero fringilla in. Sed accumsan dui turpis, quis ultrices ipsum aliquam a. Donec ullamcorper orci eleifend, vulputate tortor bibendum, ullamcorper arcu. Phasellus nec neque porttitor, dignissim magna venenatis, imperdiet tortor. Vivamus ornare magna molestie odio pellentesque fermentum.</div>
	<div class="tab-pane" id="messages">Vivamus ac nisl sed metus aliquet lacinia vitae ut magna. Vivamus non nulla diam. Etiam pellentesque ornare hendrerit. Phasellus sit amet mattis purus. Sed eget magna sed neque interdum lacinia. Praesent luctus tincidunt tortor tristique suscipit. Nunc mollis, ligula vel feugiat aliquet, dolor odio laoreet velit, sit amet tristique leo enim a augue. Pellentesque vel hendrerit ligula. Suspendisse potenti. Nullam dignissim tortor id ante consectetur mollis.</div>
	<div class="tab-pane" id="settings">Etiam sodales mi vulputate metus iaculis, eleifend aliquet mi imperdiet. Nulla facilisi. Vivamus vitae sagittis velit. Sed condimentum pharetra nunc feugiat scelerisque. Etiam id aliquet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam at purus commodo, mollis lacus non, commodo dui. Morbi suscipit, enim in posuere tincidunt, lorem libero viverra velit, eget dignissim nulla erat vitae libero. Aenean nec diam nec libero ullamcorper fringilla et a nisi. Ut hendrerit id lacus non hendrerit.</div>
</div>
<!--=== End Nav tabs ===-->

• Home
• Profile
• Messages
• Settings

<!--=== Nav Tabs Justified ===-->
<ul class="nav nav-tabs nav-justified " role="tablist">
	<li><a href="#home" role="tab" data-toggle="tab">Home</a></li>
	<li class="active"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content tab-default">
	<div class="tab-pane" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et ante metus. Vestibulum id vestibulum sapien, non convallis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vestibulum rhoncus leo. Suspendisse vulputate elementum dui. Duis tristique auctor dolor in lobortis. Donec pretium laoreet purus non tempus. Morbi sit amet dolor ut sapien dictum porta et a ipsum. Proin malesuada dapibus ligula, at mattis ligula venenatis et. Etiam a quam ante.</div>
	<div class="tab-pane in active" id="profile">Aliquam consectetur felis a posuere pulvinar. Etiam pulvinar varius arcu, non varius metus consequat id. Sed consequat imperdiet mi, in mattis libero fringilla in. Sed accumsan dui turpis, quis ultrices ipsum aliquam a. Donec ullamcorper orci eleifend, vulputate tortor bibendum, ullamcorper arcu. Phasellus nec neque porttitor, dignissim magna venenatis, imperdiet tortor. Vivamus ornare magna molestie odio pellentesque fermentum.</div>
	<div class="tab-pane" id="messages">Vivamus ac nisl sed metus aliquet lacinia vitae ut magna. Vivamus non nulla diam. Etiam pellentesque ornare hendrerit. Phasellus sit amet mattis purus. Sed eget magna sed neque interdum lacinia. Praesent luctus tincidunt tortor tristique suscipit. Nunc mollis, ligula vel feugiat aliquet, dolor odio laoreet velit, sit amet tristique leo enim a augue. Pellentesque vel hendrerit ligula. Suspendisse potenti. Nullam dignissim tortor id ante consectetur mollis.</div>
	<div class="tab-pane" id="settings">Etiam sodales mi vulputate metus iaculis, eleifend aliquet mi imperdiet. Nulla facilisi. Vivamus vitae sagittis velit. Sed condimentum pharetra nunc feugiat scelerisque. Etiam id aliquet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam at purus commodo, mollis lacus non, commodo dui. Morbi suscipit, enim in posuere tincidunt, lorem libero viverra velit, eget dignissim nulla erat vitae libero. Aenean nec diam nec libero ullamcorper fringilla et a nisi. Ut hendrerit id lacus non hendrerit.</div>
</div>
<!--=== End Tabs Justified ===-->

Some simple tabs to help you organize more content.

•   Home
•   Profile
•   Messages
•   Settings

<!--=== Begin Tabs w Icons ===-->
<ul class="nav nav-tabs mt15" role="tablist">
	<li><a href="#home3" role="tab" data-toggle="tab"><span class="fa fa-home"></span>  Home</a></li>
	<li class="active"><a href="#profile3" role="tab" data-toggle="tab"><span class="fa fa-user"></span>  Profile</a></li>
	<li><a href="#messages3" role="tab" data-toggle="tab"><span class="fa fa-envelope-square"></span>  Messages</a></li>
	<li><a href="#settings3" role="tab" data-toggle="tab"><span class="fa fa-gear"></span>  Settings</a></li>
</ul>
<div class="tab-content tab-default mb15">
	<div class="tab-pane" id="home3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et ante metus. Vestibulum id vestibulum sapien, non convallis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vestibulum rhoncus leo. Suspendisse vulputate elementum dui. Duis tristique auctor dolor in lobortis. Donec pretium laoreet purus non tempus. Morbi sit amet dolor ut sapien dictum porta et a ipsum. Proin malesuada dapibus ligula, at mattis ligula venenatis et. Etiam a quam ante.</div>
	<div class="tab-pane in active" id="profile3">Aliquam consectetur felis a posuere pulvinar. Etiam pulvinar varius arcu, non varius metus consequat id. Sed consequat imperdiet mi, in mattis libero fringilla in. Sed accumsan dui turpis, quis ultrices ipsum aliquam a. Donec ullamcorper orci eleifend, vulputate tortor bibendum, ullamcorper arcu. Phasellus nec neque porttitor, dignissim magna venenatis, imperdiet tortor. Vivamus ornare magna molestie odio pellentesque fermentum.</div>
	<div class="tab-pane" id="messages3">Vivamus ac nisl sed metus aliquet lacinia vitae ut magna. Vivamus non nulla diam. Etiam pellentesque ornare hendrerit. Phasellus sit amet mattis purus. Sed eget magna sed neque interdum lacinia. Praesent luctus tincidunt tortor tristique suscipit. Nunc mollis, ligula vel feugiat aliquet, dolor odio laoreet velit, sit amet tristique leo enim a augue. Pellentesque vel hendrerit ligula. Suspendisse potenti. Nullam dignissim tortor id ante consectetur mollis.</div>
	<div class="tab-pane" id="settings3">Etiam sodales mi vulputate metus iaculis, eleifend aliquet mi imperdiet. Nulla facilisi. Vivamus vitae sagittis velit. Sed condimentum pharetra nunc feugiat scelerisque. Etiam id aliquet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam at purus commodo, mollis lacus non, commodo dui. Morbi suscipit, enim in posuere tincidunt, lorem libero viverra velit, eget dignissim nulla erat vitae libero. Aenean nec diam nec libero ullamcorper fringilla et a nisi. Ut hendrerit id lacus non hendrerit.</div>
</div>
<!--=== End Tabs w Icons ===-->