Theme Components

<div id="myCarousel" class="carousel slide" style="max-width:700px">
<!-- Carousel items -->
<div class="carousel-inner">
	<div class="active item"><img alt="" src="http://placehold.it/700x350">
		<div class="carousel-caption">
			<h4>An item with caption</h4>
			<p>Caption...</p>
		</div>
	</div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
	<div class="item"><img alt="" src="http://placehold.it/700x350"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>			

	
<ul class="nav nav-tabs" id="myTab">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
 
<div class="tab-content">
	<div class="tab-pane active" id="home">...</div>
	<div class="tab-pane" id="profile">...</div>
	<div class="tab-pane" id="messages">...</div>
	<div class="tab-pane" id="settings">...</div>
</div>	

<div class="tabbable tabs-left">
<!--bootstrap tabs implementation-->
<ul class="nav nav-tabs">
	<!--tabs-->
	<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
	<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
	<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
	<li><a data-toggle="tab" href="#tab4">TAB 3</a></li>

</ul>

<!--tabs content -->
<div class="tab-content">
	<div id="tab1" class="tab-pane  active fade in">
		<h3>Lorem ipsum content</h3>
		content...
		</div>

	<div id="tab2" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 2</h3>
		content...
	</div>

	<div id="tab3" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 3</h3>
		content...
	</div>

	<div id="tab4" class="tab-pane  fade  ">
		<h3>Lorem ipsum content 4</h3>
		content...
	</div>
</div><!--tab content -->
</div>			

	
<h2 class="bordered">According Content</h2>
	<div class="accordion" id="accordion">
		
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
			Collapsible Group Item #1
			</a>
		</div>
		<div id="collapseOne" class="accordion-body collapse in">
			<div class="accordion-inner">
			CONTENT GOES HERE...
			</div>
		</div>
	</div>
	
	<div class="accordion-group">
	<div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
		Collapsible Group Item #2
		</a>
	</div>
	<div id="collapseTwo" class="accordion-body collapse">
		<div class="accordion-inner">
		CONTENT GOES HERE...
		</div>
	</div>
	</div>
	
	<div class="accordion-group">
	<div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
		Collapsible Group Item #2
		</a>
	</div>
	<div id="collapseThree" class="accordion-body collapse">
		<div class="accordion-inner">
		CONTENT GOES HERE...
		</div>
	</div>
	</div>
	
</div>	

	
<a data-original-title="Click here to login" data-placement="top" rel="tooltip" href="/icompany/dev/user">Lorem Ipsum</a>
<!-- you can change tooltip direction by changing data-placement attribute to left, right, bottom top -->

<a data-placement="right" data-content="POPOVER CONTENT GOES HERE" rel="popover" class=" btn btn-theme btn-small "  data-original-title="A Title">Right popover</a>	        
 <a data-placement="top"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Top popover</a>	        
 <a data-placement="left"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Left popover</a>	        
 <a data-placement="bottom"  data-content="POPOVER CONTENT GOES HERE" rel="popover" class="btn btn-theme btn-small"  data-original-title="A Title">Bottom popover</a>	 
 <!-- The only major differece in above buttons is data-placement direction of popovers-->	

<a data-toggle="modal" role="button" href="#myModal" >Call Modal Window</a> 
 <!-- Yippee, its as simple as that -->

<!-- DEFAULT BUTTONS WITH DIFFERENT SIZE-->
<a class="btn btn-small" href="http://themeforest.net">Buy Now</a>
<a class="btn" href="http://themeforest.net">Buy Now</a>
<a class="btn btn-large" href="http://themeforest.net">Buy Now</a>	

<!--  BUTTONS WITH .btn-theme CLASS TO ADD COLOR SCHEME-->
<a class="btn btn-small" href="http://themeforest.net">Buy Now</a>
<a class="btn" href="http://themeforest.net">Buy Now</a>
<a class="btn btn-large" href="http://themeforest.net">Buy Now</a>	 	        

You can use these classes to change style:
.btn-theme, .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, btn-inverse, .btn-link, .btn-block (block level button)

<img src="http://placehold.it/150x150" class="img-rounded"> 
<img src="http://placehold.it/150x150" class="img-circle"> 
<img src="http://placehold.it/150x150" class="img-polaroid"> 

Simple include these to inline elements by adding above mentioned class. Ideally you should add them as span tag or text tag like <i>. 
Example:<span class="icon-home"></span> OR <i class="icon-home"></i> I m home. 

<div class="progress progress-info">
	<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
	<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
	<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
	<div class="bar" style="width: 80%"></div>
</div>