'Bootstrap dropdown not working

I can't make bootstrap dropdown to work. Here is my html for nav:

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

And here are the scripts:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

What am I doing wrong? Thanks for your answers!

htmldrop-down-menutwitter-bootstrap


Solution 1:[1]

I had the same problem. After a couple of hours of trouble shooting found that,

I had 

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

instead of,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

Hope this helps someone

Solution 2:[2]

I had the same problem when I included the bootstrap.min.js twice. Removed one of them and it began working.

Solution 3:[3]

FYI: If you have bootstrap.js, you should not add bootstrap-dropdown.js.

I'm unsure of the result with bootstrap.min.js.

Solution 4:[4]

For your style you need to include the css files of bootstrap, generally just before </head> element

<link href="css/bootstrap.css" rel="stylesheet">

Next you'll need to include the js files, it's recommended to include them at the end of the document, generally before the </body> so pages load faster.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>

Solution 5:[5]

I just added JS part of bootstrap to my index page, then it worked

Paste this, if you're using the latest version of bootstrap (01.12.2020)

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Solution 6:[6]

Add following lines within the body tags.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>

Solution 7:[7]

you have to import this files into the <head></head> of your html.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Solution 8:[8]

Have you included jquery.js ?

Also, compare this line of code with yours:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

See this version that works ok.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

Solution 9:[9]

Both bootstrap and jquery must be included:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

NOTE: jquery-x.x.x.min.js version must be version 2.x.x !!!

Solution 10:[10]

I figured it out and the simplest way to do this ist just copy and past the CDN of bootstrap link that can be found in https://www.bootstrapcdn.com/ and the Jquery CDN Scripts that can be found here https://code.jquery.com/ and after you copy the links, the bootstrap links paste on the head of HTML and the Jquery Script paste in body of HTML like the example below: 

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

For me works perfect hope it works also for you :)

Solution 11:[11]

In bootstrap 5, need to change from data-toggle='dropdown' to data-bs-toggle='dropdown'

Solution 12:[12]

Here what i did is .....

Just removed bootstrap.min.js from my Project and added bootstrap.js to it and it started working........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));

Solution 13:[13]

Try this code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Solution 14:[14]

Try this in the head section

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Solution 15:[15]

Copy-paste below jQuery <script> and stylesheet <link> into your <head> to make sure you're loading all necessary files.

It's important that your JQuery .js file is above .css stylesheet

Simply paste the following line to test

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

The problem occurs mostly with loading of jQuery script, make sure you add references correctly.

Now test

Still if it doesn't work, check bootstrap website they've a sample implementation.

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

Solution 16:[16]

You'll have to check conflicting css files/properties for example you could have ".nav" custom style contents elsewhere try to disable your own css files and check if that works then check which file or custom style that makes the conflicts also make sure you are including the bootstrap.min.js in your code

Solution 17:[17]

I had a similar issue only to observe that i had added the bootstrap script twice and the second bootstrap script was after above the jquery script.

Solution:

  • Ensure that bootstrap.min.js and jquery.min.js are only included once in your file.
  • The bootstrap.min.js script should be included after jquery.min.js

Solution 18:[18]

In my case the original question turned out to be the answer. On bootstraps documentation page there is no mention of using a script to enable dropdowns but it appears to be necessary for it to function, at least in my case.

Once I added this script from the original question it magically started working.

<script>
 $(document).ready(function(){
    $('.dropdown-toggle').dropdown()
});
</script>

--Edit: The root cause was something to do with the formatting of my parent nav container, I blew away my entire nav section and replaced it with bootstraps example and it started working without the script. So either solution works but blowing it away seemed to be the "correct" way for me as the script felt like a cheat.

Solution 19:[19]

I had the same issue which brought me here.

My Issue : I was using the recommended jquery 1.12.0 version as my jquery script file.

Solution : replaced the jquery script with jquery 2.2.0 version.

That solved it for me.

Solution 20:[20]

For me, it was a CORS issue. I removed crossorigin="anonymous" from my script importing tags, and it started working again.

BTW the latest script tags, in the correct order, can always be found here: https://getbootstrap.com/

Edit: Apparently adding defer to the script tag will also break all the Bootstrap goodies.

Solution 21:[21]

Copy/paste the CSS link followed by the JS link from the bootstrap site here. Then the dropdown should work.

My page looks like:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

(Navbar from here)

Solution 22:[22]

Check popper.js library because I had same problem, you can find bootstrap, jquery and popper CDNs for drop down on https://getbootstrap.com/ or jus copy the following script tags

Solution 23:[23]

For latest Bootstrap you will need Popper.js

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Copy the link in the End of the Body section just before the <body> Tag, inside <Head> Tag.

Solution 24:[24]

My (same) problem arose when I mixed up the css and the bootstrap versions. I was using version 3 bootstrap.min.js with version 4.5 bootstrap.min.css

If you've loaded or overwrote a bunch of css and js files to your static folder recently, it would be a good place to start.

Good luck.

Solution 25:[25]

I had this issue using Angular 12 and Bootstrap 5. My problem was that I had mistakenly put a CSS file into the scripts section:

        "styles": [
          "node_modules/angular-calendar/css/angular-calendar.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap-icons/font/bootstrap-icons.css",
          "node_modules/sweetalert2/src/sweetalert2.scss",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/sweetalert2/src/sweetalert2.scss"  <===== in wrong section
        ]

The app built OK and ran with no errors shown in the browser console, but the dropdown toggle did nothing.

Solution 26:[26]

If you are facing a dropdown menu problem, maybe this help you to get out of it

Step 1: BootStrap Download Page

Step 2: Jump over to this *"CDN via jsDelivr"*Copy and Paste CDN into the Web-Head tag

or

Otherwise, just copy the code below and paste it into the head tag, and good to go.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

I hope this would help you. Regards, Ahmad Iqbal Bhatti

Related Questions