Bootstrap is a free and open source CSS framework guided on responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for template typography, form, button, navigation, and internal interface components.
This is bootstrap code, this code is found in head section
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
This is custom style for bootstrap
<style>
.navbar{
margin-bottom: 0px;
}
.nav, .navbar-nav {
text-align: center !important;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-radius: 10px;
border: 1px Solid #eee;
border-radius: 10px;
padding: 0px;
background-color: #eee;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color:#C00;
box-shadow: none;
background-color: transparent;}
}
</style>
Bootstrap Resposive DropDown Menu Code
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#myNavbar' data-toggle='collapse' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' rel='home' href='https://mycoaching.in' style="padding-top:0px;">
<img src="https://cdn-images-1.medium.com/max/800/1*xLafMO5PAVL3QSwiYKV7CA.png" alt="my coaching" height="50"/>
</a>
</div>
<div class='collapse navbar-collapse' id='myNavbar'>
<ul class='nav navbar-nav'>
<li itemprop='name'><a class='' href='/p/news.html' itemprop='url' title='News'>News</a></li>
<li itemprop='name'><a class='' href='/p/jobs-news-online-form.html' itemprop='url' title='Latest Jobs'>Latest Jobs</a></li>
<li itemprop='name'><a class='' href='/p/admit-card.html' itemprop='url' title='Admit Card'>Admit Card</a></li>
<li itemprop='name'><a class='' href='/p/resultnews.html' itemprop='url' title='Result'>Result</a></li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>More News <span class='caret'/></a>
<ul class='dropdown-menu' role="menu">
<li itemprop='name'><a class='d-d-m-u' href='/p/answer-key.html' itemprop='url' title='Answer Key'>Answer Key</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/syllabus-of.html' itemprop='url' title='Syllabus News'>Syllabus News</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/admission.html' itemprop='url' title='Addmission News'>Addmission News</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Subjec Wise Study <span class='caret'/></a>
<ul class='dropdown-menu'>
<li><a class='d-d-m-u' href='https://www.mycoaching.in/p/hindi.html' title='Hindi'><b>Hindi</b></a></li>
<li><a class='d-d-m-m' href='#' title='English'><b>English</b></a></li>
<li><a class='d-d-m-m' href='#' title='Mathematics'><b>Mathematics</b></a></li>
<li><a class='d-d-m-m' href='#' title='Basic Mathematics'> 1. Basic Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='Advance Mathmatics'> 2. Advance Mathmatics</a></li>
<li><a class='d-d-m-m' href='#' title='Pure Mathematics'> (I) Pure Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='Applied Mathematics'> (II) Applied Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='SST'><b>SST</b></a></li>
<li><a class='d-d-m-m' href='#' title='History'> 1. History</a></li>
<li><a class='d-d-m-m' href='#' title='Geography'> 2. Geography</a></li>
<li><a class='d-d-m-m' href='#' title='Environment Science'> 3. Environment Science</a></li>
<li><a class='d-d-m-m' href='/p/science.html' title='SCIENCE'><b>SCIENCE</b></a></li>
<li><a class='d-d-m-m' href='#' title='Physics'> 1. Physics</a></li>
<li><a class='d-d-m-m' href='#' title='Chemistry'> 2. Chemistry</a></li>
<li><a class='d-d-m-m' href='#' title='Biology'> 3. Biology</a></li>
<li><a class='d-d-m-m' href='#' title='Computer Science'><b>Computer Science</b></a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology-and-pedagogy.html' itemprop='url' title='Phycology And Pedagogy'><b>Phycology And Pedagogy</b></a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='Child Phycology'> 1. Child Phycology</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pedagogy-education-science.html' itemprop='url' title='Education Science'> 2. Education Science</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Education Science <span class='caret'/></a>
<ul class='dropdown-menu'>
<li itemprop='name'><a class='d-d-m-u' href='/p/phycology-and-pedagogy.html' itemprop='url' title='मनोविज्ञान और शिक्षण शास्त्र'>मनोविज्ञान और शिक्षण शास्त्र</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='मनोविज्ञान'>मनोविज्ञान</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/pedagogy-education-science.html' itemprop='url' title='शिक्षाशास्त्र / शिक्षणशास्त्र'>शिक्षाशास्त्र / शिक्षणशास्त्र</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/education-management.html' itemprop='url' title='शैक्षिक प्रबंधन एवं प्रशासन'>शैक्षिक प्रबंधन एवं प्रशासन</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/areas-of-management.html' itemprop='url' title='प्रबंधन के क्षेत्र, श्रेणियां और कार्यान्वयन'>प्रबंधन के क्षेत्र, श्रेणियां और कार्यान्वयन</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/education-method-system.html' itemprop='url' title='शिक्षा और शैक्षिक पध्द्तियाँ - शब्दकोश'>शिक्षा और शैक्षिक पध्द्तियाँ - शब्दकोश</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Genaral Awareness <span class='caret'/></a>
<ul class='dropdown-menu'>
<li><a class='d-d-m-u' href='#' title='Current Affairs'>Current Affairs</a></li>
<li><a class='d-d-m-m' href='#' title='General Knowledge'>General Knowledge</a></li>
<li><a class='d-d-m-m' href='#' title='General Science'>General Science</a></li>
<li><a class='d-d-m-d' href='#' title='Our Society'>Our Society</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
full-width