FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
To customizing dropdown menu we have to overwrite the CSS code written in the bootstrap.min.css file. We can customize each and every components of the bootstrap. We can change the following parts of the component
Here we demonstrate a very simple program which changes the look of a dropdown menu bar. We can change it by its color and reduce the border radius of the pills, which is defined in bootstrap.min.css file.
Note: DONOT change the codes of bootstrap.min.css. It may cause bad effects on others part of the website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" bootstrap.min.css">
<script src=" jquery.min.js"></script>
<script src=" bootstrap.min.js"></script>
<style type="text/css">
.bs-example
{
margin : 20px;
}
hr
{
margin : 60px 0;
}
.nav
{
background-color : #cf4141;
color : #fff;
}
.nav-pills>li>a
{
border-radius : 0px !important;
color : #fff;!important;
font-weight : bold;
}
.nav-pills>li.active>a
{
background-color : #aa0000!important;
}
.nav-pills>li>a:hover
{
background-color : #aa0000 !important;
color : #fff!important;
}
.dropdown-toggle
{
background-color : #cf4141 !important;
}
.dropdown-menu
{
background-color : #cf4141 !important;
}
.dropdown-menu>li>a
{
color : #fff !important;
font-weight : bold;
}
.dropdown-menu>li>a:hover
{
background-image : none;
background-color : #aa0000!important;
color : #ff0;
}
.divider
{
background-color : #fff!important;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"> <a href="#"> Home </a> </li>
<li><a href="#"> Profile </a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Messages <b class="caret"> </b> </a>
<ul class="dropdown-menu">
<li> <a href="#"> Inbox </a> </li>
<li> <a href="#"> Drafts </a></li>
<li> <a href="#"> Sent Items </a> </li>
<li class="divider"> </li>
<li> <a href="#"> Trash </a> </li>
</ul>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Admin <b class="caret"> </b> </a>
<ul class="dropdown-menu">
<li> <a href="#"> Action </a> </li>
<li> <a href="#"> Another action </a> </li>
<li class="divider"> </li>
<li> <a href="#"> Settings </a> </li>
</ul>
</li>
</ul>
</div>
<div class="container">
<h3 style="font-size:2vh;"> Tutorial At Home </h3>
<p> Free Tutorial for All </p>
</div>
</body>
</html>
