Create horizontal justified auto width adjust menu button groups using bootstrap in HTML,PHP

How to make menus that will automatically adjust itself with bootstrap.

In this tutorial we are creating horizontal button groups with an amazing feature called as Justified. Means it can automatically adjust the buttons width according to buttons amount. The more buttons you have add into that div, every button block become smaller in width. The bootstrap Justified class name is .btn-group-justified . So here is the complete step by step tutorial for Create horizontal justified auto width adjust menu button groups using bootstrap in HTML,PHP.

How to Create horizontal justified auto width adjust menu button groups using bootstrap in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for justified-button-groups.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Justified Button Groups</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">
 <h2>Justified Button Group with Anchor Tag</h2>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-info">Android</a>
 <a href="#" class="btn btn-info">PHP</a>
 <a href="#" class="btn btn-info">Bootstrap</a>
 <a href="#" class="btn btn-info">WordPress</a>
 
 </div>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-default">Android</a>
 <a href="#" class="btn btn-default">PHP</a>
 <a href="#" class="btn btn-default">Bootstrap</a>
 <a href="#" class="btn btn-default">WordPress</a>
 
 </div>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-success">Android</a>
 <a href="#" class="btn btn-success">PHP</a>
 <a href="#" class="btn btn-success">Bootstrap</a>
 <a href="#" class="btn btn-success">WordPress</a>
 
 </div>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-primary">Android</a>
 <a href="#" class="btn btn-primary">PHP</a>
 <a href="#" class="btn btn-primary">Bootstrap</a>
 <a href="#" class="btn btn-primary">WordPress</a>
 
 </div>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-danger">Android</a>
 <a href="#" class="btn btn-danger">PHP</a>
 <a href="#" class="btn btn-danger">Bootstrap</a>
 <a href="#" class="btn btn-danger">WordPress</a>
 
 </div>
 
 <div class="btn-group btn-group-justified">
 
 <a href="#" class="btn btn-warning">Android</a>
 <a href="#" class="btn btn-warning">PHP</a>
 <a href="#" class="btn btn-warning">Bootstrap</a>
 <a href="#" class="btn btn-warning">WordPress</a>
 
 </div>
 
 <h2>Justified Button Group with Button Tag</h2>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-info">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-info">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-info">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-info">WordPress</button>
 </div>
 </div>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-default">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default">WordPress</button>
 </div>
 </div>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-success">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">WordPress</button>
 </div>
 </div>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-primary">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-primary">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-primary">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-primary">WordPress</button>
 </div>
 </div>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-danger">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-danger">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-danger">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-danger">WordPress</button>
 </div>
 </div>
 
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-warning">Android</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-warning">PHP</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-warning">Bootstrap</button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-warning">WordPress</button>
 </div>
 </div>
 
</div>
 
</body>
</html>

Screenshot:

Create horizontal justified auto width adjust menu button groups using bootstrap in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *