Create vertical menu Button groups using Bootstrap classes in HTML,PHP

How to make vertical alignment top to bottom buttons like vertical menus with bootstrap.

Bootstrap .btn-group-vertical class gives us the facility to design vertical buttons in top to bottom groups same as vertical menus. We can use this class to create multiple type of button menus with also supports responsive feature. So here is the complete step by step tutorial for Create vertical menu Button groups using Bootstrap classes in HTML,PHP.

How to Create vertical menu Button groups using Bootstrap classes in HTML,PHP.

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

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

<div style="float:left; width:120px;">
<div class="btn-group-vertical">

 <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-vertical">
 
 <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>
 
 <div style="float:left; width:120px;">
 <div class="btn-group-vertical">
 
 <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-vertical">
 
 <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>
 
 <div class="btn-group-vertical">
 
 <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-vertical">
 <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 vertical menu Button groups using Bootstrap classes in HTML,PHP

Leave a Reply

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