FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
In Bootstrap Dropdown NavBar, we can create a dropdown menu very easily. We have to include the following library files
After including the above file we have to use the following classes
Using the above classes we want write down the following code which will produce a dropdown menu. ( In the next post we learn how to customize a bootstrap menu bar.)
Dropdown NavBar Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Dropdown Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--LINK THE FILE -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>
.tah
{
margin:20px;
}.menu-header
{
font-weight:bold;
text-align:center;
}
</style></head>
<body>
<div class="tah">
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"> HTML </a> </li>
<li> <a href="#"> CSS </a> </li>
<li> <a href="#"> Java Script </a> </li>
<li> <a href="#"> Bootstrap </a> </li>
</ul>
</li><li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Centre <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"> Kolkata </a> </li>
<li><a href="#"> Delhi </a> </li>
<li class="divider"> </li>
<li class="menu-header"> Head Office </li>
<li><a href="#"> Hydrabad </a></li>
</ul>
</li>
</ul></div>
<div class="container">
<h3 style="font-size:2vw;"> Tutorial At Home </h3>
<p> Free Tutorial for All </p>
</div>
</body>
</html>
