Bootstrap Responsive DropDown Menu, Bootstrap dropdown menubar

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='मनोविज्ञान और शिक्षण शास्त्र'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न और श&#2367;क&#2381;षण श&#2366;स&#2381;त&#2381;र</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='मनोविज्ञान'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/pedagogy-education-science.html' itemprop='url' title='शिक्षाशास्त्र / शिक्षणशास्त्र'>श&#2367;क&#2381;ष&#2366;श&#2366;स&#2381;त&#2381;र / श&#2367;क&#2381;षणश&#2366;स&#2381;त&#2381;र</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/education-management.html' itemprop='url' title='शैक्षिक प्रबंधन एवं प्रशासन'>श&#2376;क&#2381;ष&#2367;क प&#2381;रब&#2306;धन एव&#2306; प&#2381;रश&#2366;सन</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/areas-of-management.html' itemprop='url' title='प्रबंधन के क्षेत्र, श्रेणियां और कार्यान्वयन'>प&#2381;रब&#2306;धन क&#2375; क&#2381;ष&#2375;त&#2381;र, श&#2381;र&#2375;ण&#2367;य&#2366;&#2306; और क&#2366;र&#2381;य&#2366;न&#2381;वयन</a></li>
             <li itemprop='name'><a class='d-d-m-d' href='/p/education-method-system.html' itemprop='url' title='शिक्षा और शैक्षिक पध्द्तियाँ - शब्दकोश'>श&#2367;क&#2381;ष&#2366; और श&#2376;क&#2381;ष&#2367;क पध&#2381;द&#2381;त&#2367;य&#2366;&#2305; - शब&#2381;दक&#2379;श</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

Related Posts

How do I submit my website to Google Search Console?

If you have to submit your website in Google Search Console, first you login it, after that you will get the add property option where after clicking you have to...Read more !

Most (10, 100, 500, 1000) Searched Question on Google

Most asked/searched Questions on Google Lists of the Most Popular Google Search Terms across Categories If you’ve been wondering what are the most popular searches on Google and what questions...Read more !

How much traffic should a blog website have to make money with Google Adsense?

No, traffic does not matter for this, no matter what happens, just the layout of your site should be correct and there should be no content that adsense does not...Read more !

Leave a Reply

Your email address will not be published. Required fields are marked *