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!

Check my answer at similar posting http://stackoverflow.com/questions/15592158/twitter-bootstrap-dropdown-not-working-in-any-browser/23486239#23486239 — Tejasvi Hegde, May 06 '14 at 04:59
My issue was missing the bootstrap js file, in case that helps someone else — Drewdavid, Oct 17 '14 at 18:35
I had updated my ```Gruntfile.js``` which changes some of the paths in the ```jsFileList```...Updating the paths and running the appropriate Grunt tasks (grunt dev / grunt build / etc) solved my problem. — Ken Prince, Dec 14 '14 at 19:46
@Drewdavid Thanks! I was missing `bootstrap.min.js` *and* `jquery` — lucidbrot, Feb 03 '20 at 13:08
In newer versions of bootstrap you need to include bootstrap.bundle.min.js, which includes popper.js and important! use "data-bs-toglle" instead of "data-toggle" — Jens, Aug 01 '21 at 15:27
Presently using Bootstrap 5.1 and ran into the same issue. I found that I added both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` (for some unknown reason). After removing `bootstrap.bundle.min.js` my dropdowns worked. — Francois Louw, May 27 '22 at 11:07
@Jens, there's a typo in your comment. It should be "data-bs-toggle" — ThaNoob, Jul 24 '22 at 09:38

score 188 · Answer 1 · edited Dec 23 '22 at 09:02

188

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>

edited Dec 23 '22 at 09:02

starball

20,030
7
43
238

answered Jun 01 '14 at 22:08

Prince Ashitaka

8,623
12
48
71

2

What's the difference? – CodyBugstein Sep 08 '14 at 16:01
15

Imray, the bootstrap script registers extensions to jQuery, so if jQUery isn't loaded, the extensions are never registered. – Amoliski Nov 11 '14 at 22:38
3

Order is important, indeed. Thanks for the help! – K.Land_bioinfo Jul 10 '17 at 04:53
Thanks. Worked also for my angular 10 project in angular.json file – shawon Sep 07 '20 at 15:03
1

Perhaps it should be mentioned that if you use the latest CDN's for Bootstraps CSS & Javascript that you don't need the second script in the original question (the one with ".dropdown()". If you just follow the installation guide for the latest bootstrap version it should work fine. At time of writing this can be found here: https://getbootstrap.com/docs/5.2/getting-started/introduction/ – ThaNoob Jul 24 '22 at 09:43

score 113 · Answer 2 · answered Jul 10 '14 at 10:27

113

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

answered Jul 10 '14 at 10:27

kubilay

5,047
7
48
66

2

This fixed my issue. My angular app was pulling in multiple copies of bootstrap through the gulp task to inject my bower_components – Pakage Dec 22 '15 at 22:33
This fixed my issue. Thanks – banyudu Feb 07 '17 at 08:21
this fixed it in an ASP.NET MVC 5 project with bundles – Klaasel Feb 16 '17 at 07:49
Fixed it for me. Thanks. – Henry A. Jun 06 '17 at 12:44
really annoying... using aurelia-webpack-skeleton I need to import bootstrap.css in my main.js, but if I import 'bootstrap', I get that weird behavior... – ironic Jan 22 '18 at 21:23
I am using AdminLTE(having bootstrap) in Rails application and included all JS twice -- wasted almost 2 hours. Thanks removed one and it worked all at once – Muhammad Nasir Shamshad Mar 01 '18 at 18:41
Does anyone know why this is an issue? – Limyandi Vico Trico Jul 30 '21 at 07:32
1

Amazing how common this is LOL. Tried to figure this out for hours only to realize I have bootstrap called in the header and footer of my doc. Eish. – ArabianMaiden Jan 11 '22 at 23:21
it saved me a lot of time – Feb 12 '22 at 11:07
Worked for me as well. Excellent ! – Maulik Pipaliya Joyy Mar 16 '22 at 13:57

score 66 · Answer 3 · answered Apr 28 '22 at 02:01

66

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

answered Apr 28 '22 at 02:01

s k

4,342
3
42
61

4

Yeah this one is the only one that worked for me, even took the example straight from bootstraps docs and it didn't work, but now I noticed that I was looking at docs from v4 – Marc Miller Jul 01 '22 at 07:40
2

Just did the exact same. Copied from the documentation... but needed to change the code as above. I wish they would leave things the same.. makes it impossible to upgrade to new versions! – Gavin Coates Sep 19 '22 at 18:39
3

This is the one that did it for me! I was so confused, I knew I was importing the bootstrap bundle and jquery correctly, and I used the example code directly from the docs. So glad I found your message! – old_dd Nov 29 '22 at 18:56

score 25 · Answer 4 · answered Jan 22 '13 at 01:37

25

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

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

answered Jan 22 '13 at 01:37

Fahrenheit

251
3
4

2

Thanks. I had both the dropdown.js and bootstrap.js and thus it didn't work. Removing the dropdown.js solved the problem. – nyxz Oct 26 '13 at 20:02
You are the best man, I spent around 6 hours on this to find where is the issue!!, thanks again.. – Adel Apr 21 '14 at 13:30
1

Thank you very much Sir! I have the same problem, but I have `bootstrap.js` and `bootstrap.min.js.`. When I removed the latter, it works. – Jun 05 '14 at 02:56
1

Thanks - In my case, I had both `js/bootstrap.js` as well as `js/dropdown.js` – Sanjay Manohar Nov 21 '15 at 00:22

score 15 · Accepted Answer · edited Oct 24 '17 at 15:03

15

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>

edited Oct 24 '17 at 15:03

fred

5
5

answered Sep 17 '12 at 12:06

gaurang171

9,032
4
28
30

74

The dropdown in your demo no longer seems to work, or perhaps the problem is with my browser. – Noah Feb 10 '15 at 18:33

mecdeality · Answer 6 · 2022-01-21T18:15:47.230

15

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>

edited Jan 21 '22 at 18:15

answered Dec 01 '20 at 18:37

mecdeality

405
4
13

3

@ZsoltMeszaros Yes, I know. But there are other people who may face this problem – mecdeality Dec 02 '20 at 13:01
What was the latest version of bootstrap at the time of this answer ? – tama Dec 23 '21 at 12:32
@tama I'm not sure what was the latest version at that time. But it seems like I used here the version 4.5.3 – mecdeality Dec 24 '21 at 14:18
Adding .bundle in bootstrap JS link fixed the issue for me, thank you! – AHMED RABEE Dec 29 '21 at 10:43
1

Thank you so much brother... Only this awenser is actually works for me.... – Ali Jan 04 '22 at 13:26

score 14 · Answer 7 · edited Aug 06 '15 at 21:42

14

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>

edited Aug 06 '15 at 21:42

Tony Hinkle

4,706
7
23
35

answered Mar 15 '13 at 19:36

Ôûssàmâ Höûd

223
2
7

score 8 · Answer 8 · answered Aug 05 '14 at 20:00

8

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>

answered Aug 05 '14 at 20:00

Shevon Silva

139
1
3

Thanks, this saved me some time. – DrewT Nov 24 '15 at 23:34

score 7 · Answer 9 · answered Jun 27 '14 at 03:22

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>

answered Jun 27 '14 at 03:22

Martin

215
5
14

1

I have no idea why or what I was doing incorrectly, but this answer did it for me. Thanks Martin! – dghalbr Jan 17 '15 at 02:02
Thank you. I do not know why this has solved the problem either. The menu worked fine with /js/jquery.js and /js/bootstrap.min.js until the website was migrated to another Windows server. – Hong Apr 23 '19 at 23:51

Frankline · Answer 10 · 2012-09-17T12:21:17.107

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>

David Liao · Answer 11 · 2016-07-20T21:00:24.123

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

score 4 · Answer 12 · answered Nov 15 '16 at 20:54

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

Thank you ! , moving it before the `
` tags got it working on my end ! — Ryan Aquino, Aug 09 '20 at 08:39

score 3 · Answer 13 · answered Jun 08 '16 at 12:34

3

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

answered Jun 08 '16 at 12:34

Mohit Dhawan

543
6
11

Adding to #kubilay Answer : you can have a single class named 'A' per document. .min.css/.min.js - are generally the same css and js files with all spaces removed from them. It makes them smaller and load faster. Browser won't need spaces anyway. – Mohit Dhawan Jun 08 '16 at 12:36
Remove one if you have Used both – Mohit Dhawan Jun 08 '16 at 12:37

score 3 · Answer 14 · answered Aug 20 '19 at 06:26

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>

Ahmad Iqbal Bhatti · Answer 15 · 2023-02-09T06:09:53.110

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

score 2 · Answer 16 · answered Feb 17 '16 at 22:06

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

score 2 · Answer 17 · answered May 27 '20 at 20:45

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

score 1 · Answer 18 · answered Apr 18 '16 at 22:18

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

score 1 · Answer 19 · answered May 03 '19 at 10:14

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

Sayed Muhammad Idrees · Answer 20 · 2020-11-12T08:04:16.673

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.

score 1 · Answer 21 · edited Jul 17 '21 at 20:34

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.

score 1 · Answer 22 · answered Jul 20 '22 at 10:18

1

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.

answered Jul 20 '22 at 10:18

Matthias

3,160
2
24
38

score 0 · Answer 23 · answered Feb 06 '16 at 17:11

0

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.

answered Feb 06 '16 at 17:11

Everest Nwosu

11
1

Cameron Hudson · Answer 24 · 2018-07-18T02:34:33.113

0

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.

edited Jul 18 '18 at 02:34

answered Jul 17 '18 at 20:45

Cameron Hudson

3,190
1
26
38

score 0 · Answer 25 · answered May 02 '19 at 21:19

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)

score 0 · Answer 26 · answered Feb 29 '20 at 21:21

0

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

answered Feb 29 '20 at 21:21

necheervan abdullah

47
3

score 0 · Answer 27 · answered Nov 23 '20 at 00:22

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.

score 0 · Answer 28 · answered Sep 09 '21 at 14:43

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.

score 0 · Answer 29 · answered Aug 25 '22 at 06:33

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>

score 0 · Answer 30 · answered Jan 18 '23 at 22:19

0

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.

answered Jan 18 '23 at 22:19

gopiTK

71
1
1

score 0 · Answer 31 · answered Feb 25 '23 at 14:41

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.

score 0 · Answer 32 · answered Aug 28 '23 at 01:27

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.

score -3 · Answer 33 · answered Sep 15 '19 at 19:47

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>

Bootstrap dropdown not working

33 Answers33

Linked

Related