Index variant
Extra page

Theme components

Theme button

Default button
Default button Green button Blue button Red button Yellow button 
<a href="#" class="btn btn-default">Default button</a/>
<a href="#" class="btn btn-green">Green button</a/>
<a href="#" class="btn btn-blue">Blue button</a/>
<a href="#" class="btn btn-red">Red button</a/>
<a href="#" class="btn btn-yellow">Yellow button</a/>
Bavel button
Default button Green button Blue button Red button Yellow button 
<a href="#" class="btn btn-default btn-bavel">Default button</a/>
<a href="#" class="btn btn-green btn-bavel">Green button</a/>
<a href="#" class="btn btn-blue btn-bavel">Blue button</a/>
<a href="#" class="btn btn-red btn-bavel">Red button</a/>
<a href="#" class="btn btn-yellow btn-bavel">Yellow button</a/>
Default button size
Small button Default button Large button 
<a href="#" class="btn btn-default btn-sm">Small button</a/>
<a href="#" class="btn btn-default">Default button</a/>
<a href="#" class="btn btn-default btn-lg">Large button</a/>
Bavel button size
Small button Default button Large button 
<a href="#" class="btn btn-default btn-bavel btn-sm">Small button</a/>
<a href="#" class="btn btn-default btn-bavel">Default button</a/>
<a href="#" class="btn btn-default btn-bavel btn-lg">Large button</a/>

Accordion style

Awesome theme features

Lorem ipsum dolor sit amet, ad eos aperiri voluptatum. Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix.

Easy to customize

Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te, eu saepe convenire his.

Fully responsive layout

Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu.

Valid HTML 5 code

Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te. 

<div class="accordion clearfix" id="accordion1">
	<div class="accordion-group">
		<div class="accordion-heading">										
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
				<span class="accordion-icon icon-like"></span> Awesome theme features
			</a>
		</div>
		<div id="collapse1" class="accordion-body collapse">
			<div class="accordion-inner">
				<p>...</p>
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
				<span class="accordion-icon icon-wrench"></span> Easy to customize
			</a>
		</div>
		<div id="collapse2" class="accordion-body collapse">
			<div class="accordion-inner">
				<p>...</p>
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
				<span class="accordion-icon icon-screen-tablet"></span> Fully responsive layout
			</a>
		</div>
		<div id="collapse3" class="accordion-body collapse">
			<div class="accordion-inner">
				<p>...</p>
			</div>
		</div>
	</div>	
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
				<span class="accordion-icon icon-star"></span> Valid HTML 5 code
			</a>
		</div>
		<div id="collapse4" class="accordion-body collapse">
			<div class="accordion-inner">
				<p>...</p>													
			</div>
		</div>
	</div>									
</div>

Tab style

Tab navigation float left
Tab heading 1

An postea indoctum his. Nam ea commodo similique, tacimates prodesset conclusionemque sea ea, et vel animal deleniti laboramus. Sed quod admodum suavitate et, in usu reque tibique deleniti, est id audiam vocibus constituto. Idque quando feugiat in ius. Cu qui movet malorum, cum ne fabulas peric. Stet deleniti mei ei. Usu eu nisl justo referrentur, eam graecis mandamus in.

Tab heading 2

Vide debet no vix. Eu atqui liber recusabo his, ut fugit minimum has, ut sed temporibus complectitur. Usu te populo nonumes, no est eirmod explicari. In blandit voluptua urbanitas vim, vix eu summo nihil convenire. Eu vis veri fierent noluisse, vis an euismod sententiae, cibo oratio ei sed. Nostro probatus tacimates vis in his

Tab heading 3

Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam. Mei summo diceret vituperatoribus ex, ut torquatos pro. Ne qui admodum aliquando, viderer instructior in eos pericula appellantur referrentur vix. Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam.

Tab heading 4

Omnium dolores oporteat no usu. Id dicta ubique sit, labore iriure voluptua mei ut. Pro ei probatus comprehensam conclusionemque, ea labore utroque comprehensam nec. Eu purto posidonium sit, an vim nonumy indoctum. Duo salutandi interpretaris te, purto feugait at his. Et vix graeci suavitate expetendis. Nec alii mutat harum at, legimus evertitur at eum. Sumo antiopam moderatius vim ea, clita discere fuisset ex ius. 

<ul class="nav nav-tabs" role="tablist">
	<li class="active"><a href="#tab1" role="tab" data-toggle="tab">Recent</a></li>
	<li><a href="#tab2" role="tab" data-toggle="tab">Popular</a></li>
	<li><a href="#tab3" role="tab" data-toggle="tab">Premium file</a></li>
	<li><a href="#tab4" role="tab" data-toggle="tab">Free</a></li>
</ul>
<!-- Start tab panes -->
<div class="tab-content">
	<!-- Start tab 1 -->
	<div class="tab-pane active" id="tab1">
		<h5>Tab <span>heading 1</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 1 -->
						
	<!-- Start tab 2 -->
	<div class="tab-pane" id="tab2">
		<h5>Tab <span>heading 2</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 2 -->
						
	<!-- Start tab 3 -->
	<div class="tab-pane" id="tab3">
		<h5>Tab <span>heading 3</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 3 -->
						
	<!-- Start tab 4 -->
	<div class="tab-pane" id="tab4">
		<h5>Tab <span>heading 4</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 4 -->
</div>
<!-- End tab panes -->
Tab navigation centered
Tab heading 1

An postea indoctum his. Nam ea commodo similique, tacimates prodesset conclusionemque sea ea, et vel animal deleniti laboramus. Sed quod admodum suavitate et, in usu reque tibique deleniti, est id audiam vocibus constituto. Idque quando feugiat in ius. Cu qui movet malorum, cum ne fabulas peric. Stet deleniti mei ei. Usu eu nisl justo referrentur, eam graecis mandamus in.

Tab heading 2

Vide debet no vix. Eu atqui liber recusabo his, ut fugit minimum has, ut sed temporibus complectitur. Usu te populo nonumes, no est eirmod explicari. In blandit voluptua urbanitas vim, vix eu summo nihil convenire. Eu vis veri fierent noluisse, vis an euismod sententiae, cibo oratio ei sed. Nostro probatus tacimates vis in his

Tab heading 3

Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam. Mei summo diceret vituperatoribus ex, ut torquatos pro. Ne qui admodum aliquando, viderer instructior in eos pericula appellantur referrentur vix. Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam.

Tab heading 4

Omnium dolores oporteat no usu. Id dicta ubique sit, labore iriure voluptua mei ut. Pro ei probatus comprehensam conclusionemque, ea labore utroque comprehensam nec. Eu purto posidonium sit, an vim nonumy indoctum. Duo salutandi interpretaris te, purto feugait at his. Et vix graeci suavitate expetendis. Nec alii mutat harum at, legimus evertitur at eum. Sumo antiopam moderatius vim ea, clita discere fuisset ex ius. 

<ul class="nav nav-tabs centered" role="tablist">
	<li class="active"><a href="#tab1" role="tab" data-toggle="tab">Recent</a></li>
	<li><a href="#tab2" role="tab" data-toggle="tab">Popular</a></li>
	<li><a href="#tab3" role="tab" data-toggle="tab">Premium file</a></li>
	<li><a href="#tab4" role="tab" data-toggle="tab">Free</a></li>
</ul>
<!-- Start tab panes -->
<div class="tab-content">
	<!-- Start tab 1 -->
	<div class="tab-pane active" id="tab1">
		<h5>Tab <span>heading 1</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 1 -->
						
	<!-- Start tab 2 -->
	<div class="tab-pane" id="tab2">
		<h5>Tab <span>heading 2</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 2 -->
						
	<!-- Start tab 3 -->
	<div class="tab-pane" id="tab3">
		<h5>Tab <span>heading 3</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 3 -->
						
	<!-- Start tab 4 -->
	<div class="tab-pane" id="tab4">
		<h5>Tab <span>heading 4</span></h5>
		<p>...</p>
	</div>
	<!-- End tab 4 -->
</div>
<!-- End tab panes -->

Alert style

Example alert warning
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo 
<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert warning</strong><br />
	[...]
</div>
Example alert info
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo 
<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert info</strong><br />
	[...]
</div>
Example alert danger
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo 
<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert danger</strong><br />
	[...]
</div>
Example alert success
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo 
<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert success</strong><br />
	[...]
</div>

Stay update with us