Navigation

Shortcodes Collapse, Modals, Panels and Tabs

  1. Home
  2. Shortcodes
Panels

Panels

Panels can be added by .panels class.

Primary Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Success Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Info Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Warning Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Danger Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 

<!-- Panels -->

<div class="panel panel-primary">
	<div class="panel-heading">
		<h4 class="panel-title">Primary Panel</h4>
	</div>
	<div class="panel-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	</div>
</div>
										
<div class="panel panel-success">
	<div class="panel-heading">
		<h4 class="panel-title">Success Panel</h4>
	</div>
	<div class="panel-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	</div>
</div>
										
<div class="panel panel-info">
	<div class="panel-heading">
		<h4 class="panel-title">Info Panel</h4>
	</div>
	<div class="panel-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	</div>
</div>
										
<div class="panel panel-warning">
	<div class="panel-heading">
		<h4 class="panel-title">Warning Panel</h4>
	</div>
	<div class="panel-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	</div>
</div>
										
<div class="panel panel-danger">
	<div class="panel-heading">
		<h4 class="panel-title">Danger Panel</h4>
	</div>
	<div class="panel-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	</div>
</div>
Collapse

Collapse Type 1

These collapse (Accordation) can be made by wrapping multiple panels in a parent div having class panel-group and the button which triggers the collapse must have attribute data-parent='id of top parent(having class panel-group)'. for more see bootstrap docs on collapse http://getbootstrap.com/javascript/#collapse

Panel 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Panel 2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Collapse Type 2

These collapse (Accordation) can be made by wrapping multiple panels in a parent div having class panel-group and for more see bootstrap docs on collapse http://getbootstrap.com/javascript/#collapse

Panel 3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson

Panel 4

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 

<!-- Collapse -->

<!-- Collapse Type 1 -->
								  
<div class="panel-group" id="accordion">
 	<div class="panel panel-primary">
	    <div class="panel-heading">
		      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#panel1">
				          Panel 1
			        </a>
		      </h4>
	    </div>
	    <div id="panel1" class="panel-collapse collapse in">
		      <div class="panel-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
		      </div>
	    </div>
	</div>
	<div class="panel panel-primary">
	    <div class="panel-heading">
		      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#panel2">
				          Panel 2
			        </a>
		      </h4>
	    </div>
	    <div id="panel2" class="panel-collapse collapse">
		      <div class="panel-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
		      </div>
	    </div>
	</div>
</div>

<!-- Collapse Type 2 -->
								 
<div class="panel-group">
 	<div class="panel panel-primary">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" href="#panel3">
	          Panel 3
	        </a>
	      </h4>
	    </div>
		<div id="panel3" class="panel-collapse collapse in">
			<div class="panel-body">
		        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
		    </div>
		</div>
	</div>
	<div class="panel panel-primary">
	  <div class="panel-heading">
	     <h4 class="panel-title">
		   <a data-toggle="collapse" href="#panel4">
		      Panel 4
		   </a>
	     </h4>
	  </div>
	  <div id="panel4" class="panel-collapse collapse">
	     <div class="panel-body">
	        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
	     </div>
	  </div>
	</div>
</div>
Tabs

Tabs

Tabs can be used i following ways

This is primary tab
This is success tab
This is info tab
This is warning tab
This is danger tab
This is bordered tab

<!-- Using Tabs -->
<!-- Tab Navs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#primary-tab" data-toggle="tab">Primary</a></li>
	<li><a href="#success-tab" data-toggle="tab">Success</a></li>
	<li><a href="#info-tab" data-toggle="tab">Info</a></li>
	<li><a href="#warning-tab" data-toggle="tab">Warning</a></li>
	<li><a href="#danger-tab" data-toggle="tab">Danger</a></li>	
	<li class="danger border"><a href="#border-tab" data-toggle="tab">Bordered</a></li>							  
</ul>
									
<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active fade in" id="primary-tab">This is primary tab</div>
	<div class="tab-pane fade" id="success-tab">This is success tab</div>
	<div class="tab-pane fade" id="info-tab">This is info tab</div>
	<div class="tab-pane fade" id="warning-tab">This is warning tab</div>
	<div class="tab-pane fade" id="danger-tab">This is danger tab</div>
	<div class="tab-pane fade" id="border-tab">This is bordered tab</div>
</div>