Bootstrap dropdown not working

Question

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!

Answer 1

For those looking for an answer in 2024 (like me), it worked when I commented <asp:ScriptReference Name="bootstrap" /> in my Site.Master and by adding

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

Make you that you check your Bootstrap version first.

Answer 2

Use this :

<script src="~/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

instead of this :

<script src="~/libs/bootstrap/js/bootstrap.min.js"></script>

Answer 3

for me, I import the bootstrap.bundle.min.js in npm and index.tsx file, I have already imported bootstrap.bundle.min.js then install the bootstrap using npm. remove the index.tsx script block import:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

works.

Answer 4

I just spent 30 minutes reading up on this problem. My Dropdown would not open. Tried several approaches and nothing. Until... VERSIONS! Not all Bootstrap versions work with Laravel. Only the latest version of Bootstrap would work with the latest version of Laravel. No matter if the difference is minor modifications. You have got to make sure of that first.

Answer 5

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

To Improve the speed of the website, add a script tag before the closing body tag.

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

Answer 6

The problem was resolved in my case once I added the bootstrap.bundle.min.js instead of bootstrap.min.js. Appears that popper.js and other needed js are packaged in bundle.min.js.

Answer 7

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>

Answer 8

In case if someone is struggling with this problem in angular. Then here is a quick way to fix this issue.

Don't need to install popper or jquery vis npm, simply paste below lines in your index.html file inside head tag

  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

Full working code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Some Website</title>
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

</head>
<body>
  <div class="dropdown show">
  <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>
</body>
</html>

Answer 9

My problem was that I was using bootstrap v3.1.1 which doesn't include styling for .dropdown-item despite having styling for .dropdown-menu. Bootstrap 5 has both.

Answer 10

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

Answer 11

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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Answer 12

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.

Answer 13

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.

Answer 14

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.

Answer 15

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.

Answer 16

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

Answer 17

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

Answer 18

I had setup with Angular 7, jQuery 3.4.1, Popper 1.12.9 and Bootstrap 4.3.1, nothing was working for me unitll I did this little hack in styles:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

Html looks like this:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>

Answer 19

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>

Answer 20

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

Answer 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)

Answer 22

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.

Answer 23

Working demo: http://codebins.com/bin/4ldqp73

try this

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

Answer 24

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 :)

Answer 25

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

Answer 26

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"));

Answer 27

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

Answer 28

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

Answer 29

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.

Answer 30

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>