Use the .btn-toolbar class to create the toolbar. We can club a number of button groups together to generate a toolbar. Let’s use the Glyphicons in the buttons (instead of button text).

Bootstrap Toolbar Example

<!DOCTYPE html> 
<html lang="en">  
<head>    
<title>My first Bootstrap page </title>    
<meta name="viewport" content="width=device-width, initialscale=1">    
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/bootstrap.min.js"></script> 
</head> 
<body>
<div class="container">
	<h2>Toolbar</h2> 
	<div class="btn-toolbar">  
	 <div class="btn-group">   
	  	<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></button>    
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>    
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-print"></span></button>
	</div> 
	<div class="btn-group">  
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>   
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>    
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>    
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>  
	</div> 
	 <div class="btn-group">    
		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>    
	   	<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>    
	   	<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>  
	  </div> 
	</div>
</div>
</body>
</html>
Tagged in : Bootstrap Html

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.