Tutorials Bootstrap How to Create Toolbars in Bootstrap3

How to Create Toolbars in Bootstrap3

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>
Total
0
Shares
Leave a Reply

Your email address will not be published.

Previous Post

How to Create Button Groups in Bootstrap3

Next Post

Bootstrap Navigation Tabs with Dropdown Menu Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All