0

Show Divider line between Drop Down Menu items using Bootstrap classes in HTML,PHP

How to display lines inside drop down menu between its items to separate them.

Bootstrap’s .divider class is used to show divider line inside drop down menus. This class will automatically set and draw horizontal line which will separate the values inside drop down menu. So here is the complete step by step tutorial for Show Divider line between Drop Down Menu items using Bootstrap classes in HTML,PHP.

http://www.android-examples.com/demo/heading-tag.html

How to Show Divider line between Drop Down Menu items using Bootstrap classes in HTML,PHP.

Code for Drop-Down-With-Divider.html file.

 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Show Divider line between Drop Down Menu items</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<h1>DropDownMenu With Divider </h1>

 <div class="dropdown">
 <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">All Category
 <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">Android</a></li>
 
 <li class="divider"></li>
 
 <li ><a href="#">PHP</a></li>
 
 <li class="divider"></li>
 
 <li ><a href="#">Blogger</a></li>
 
 <li class="divider"></li>
 
 <li><a href="#">WordPress</a></li>
 </ul>
 </div>

</div>

</body>

</html>

Screenshot:

Show Divider line between Drop Down Menu items using Bootstrap classes in HTML,PHP

Leave a Reply

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