Dropdown NavBar creation Using CSS & Bootstrap
17-05-2017    529 times
Bootstrap Dropdown NavBar

Dropdown NavBar creation Using CSS, HTML and Bootstrap Navbar

In Bootstrap Dropdown NavBar, we can create a dropdown menu very easily. We have to include the following library files

  • min.css
  • min.js
  • min.js

After including the above file we have to use the following classes

  • .dropdown : Attach the class into the <li> tag in which we want to create the dropdown.
  • .dropdown-toggle : Attach the class into the <a> tag in which we want to create the dropdown.
  • .dropdown-menu : Attach the class into the <ul> tag attached with the li tag in which we want to create the dropdown.
  • .divider : placed a divider between two menu item.
  • .nav : for create a navbar.
  • .nav-pills : create the top menu item.

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
Drop Down Menu Using Bootstrap
Tutorial at home

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>

Tutorial at home

<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>

Tutorial at home
Tutorial at home

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post