Customizing dropdown menu create by bootstrap
18-05-2017    679 times
Customizing dropdown

Customizing dropdown menu in bootstrap

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

  • Size ( width, height or both )
  • Color
  • Shape

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.

Tutorial at home

Note: DONOT change the codes of bootstrap.min.css. It may cause bad effects on others part of the website.

Customized Navbar Bootstrap
Customized Navbar Bootstrap

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

Tutorial at home
<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>

freenotes
    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