Create horizontal menu Button Groups using Bootstrap in HTML,PHP

How to make horizontal button groups with use of Bootstrap CSS classes in web page.

In this tutorial we are creating horizontal button groups. These groups are mostly used to show multiple buttons within a single horizontal line. The class name for creating horizontal button groups is .btn-group . This class will automatically align and set the buttons to one after another. So here is the complete step by step tutorial for Create horizontal menu Button Groups using Bootstrap in HTML,PHP.

How to Create horizontal menu Button Groups using Bootstrap in HTML,PHP.

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

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>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>Button Groups</h2>

<div class="btn-group">

 <button type="button" class="btn btn-info">Android</button>
 <button type="button" class="btn btn-info">PHP</button> 
 <button type="button" class="btn btn-info">Bootstrap</button>
 <button type="button" class="btn btn-info">WordPress</button></div></br></br>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-default">Android</button>
 <button type="button" class="btn btn-default">PHP</button> 
 <button type="button" class="btn btn-default">Bootstrap</button>
 <button type="button" class="btn btn-default">WordPress</button></div></br></br>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-success">Android</button>
 <button type="button" class="btn btn-success">PHP</button> 
 <button type="button" class="btn btn-success">Bootstrap</button>
 <button type="button" class="btn btn-success">WordPress</button></div></br></br>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-primary">Android</button>
 <button type="button" class="btn btn-primary">PHP</button> 
 <button type="button" class="btn btn-primary">Bootstrap</button>
 <button type="button" class="btn btn-primary">WordPress</button></div></br></br>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-danger">Android</button>
 <button type="button" class="btn btn-danger">PHP</button> 
 <button type="button" class="btn btn-danger">Bootstrap</button>
 <button type="button" class="btn btn-danger">WordPress</button></div></br></br>
 
 <div class="btn-group">
 <button type="button" class="btn btn-warning">Android</button>
 <button type="button" class="btn btn-warning">PHP</button> 
 <button type="button" class="btn btn-warning">Bootstrap</button>
 <button type="button" class="btn btn-warning">WordPress</button></div>
 
</div>

</body>
</html>

Screenshot:

Create horizontal menu Button Groups using Bootstrap in HTML,PHP

Leave a Reply

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