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

The List Of Low CPC Websites In The World

CPC  What is CPC? In Internet CPC is the amount that a website publisher receives when a paid advertisement on the site is clicked. CPC stands for ‘Cost Per Click’...Read more !

Educational and Government Dofollow Backlinks List 2019

A backlinks for a given web resource is a link from some other website to that web resource. A web resource may be a website, web page, or web directory....Read more !

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 !

Auto Approve Dofollow Backlinks Blog Commenting Sites List

What is backlinks? A backlinks for a given web resource is a link from some other website to that web resource. A web resource may be a website, web page,...Read more !

The Limit of a web-page that can be cached in Google and other search engine

What is Cache? In the view of internet or computer network or websites, a cache is a software or data component that stores data so that requests for that data...Read more !

Leave a Reply

Your email address will not be published.