Best IT Recipes

Bootstrap popup does not work

I can't get the bootstrap popup menu 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 scenarios:

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

What am I doing wrong? Thank you for your responses!

+67
html drop-down-menu twitter-bootstrap
Sep 17
source share
19 answers

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

try it

 <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>
+11
Sep 17 '12 at 12:06 on
source share
— -

I had the same problem. A couple of hours after the shooting, they 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

+134
Jun 01 '14 at 22:08
source share

I had the same issue when I double-enabled bootstrap.min.js . One of them was deleted, and it began to work.

+75
Jul 10 '14 at 10:27
source share

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

I am not sure about the result with bootstrap.min.js.

+23
Jan 22 '13 at 1:37
source share

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

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

Next, you will need to include js files, it is recommended to include them at the end of the document, usually before </body> , so that pages load faster.

 <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script>
+13
Mar 15 '13 at 19:36
source share

Add the following tags to body tags.

 <!-- jQuery (necessary for Bootstrap 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>
+7
Aug 05 '14 at 20:00
source share

you need to import these files into the <head></head> 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>
+6
Jun 27 '14 at 3:22
source share

Have you 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, which works fine.

 <!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>
+5
Sep 17 '12 at 12:05
source share

Both bootstrap and jquery should 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-xxxcustom.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. The jquery-xxxmin.js version must be version 2.xx !!!

+4
Jul 19 '16 at 18:42
source share

I figured it out, and the easiest way to do this ist just copy and skip the bootstrap CDN links, which can be found at https://www.bootstrapcdn.com/ and CDquery Jquery CDN Scripts, which can be found here https: //code.jquery .com / , and after you copy the links, a patch of boot links to the HTML head and JQuery Script are inserted into the body of the HTML, as shown 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, the wonderful hope that it works for you also works :)

+3
Nov 15 '16 at 20:54
source share

Try this in the chapter 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">
+2
Feb 17 '16 at 22:06
source share

Here is what I did ...

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"));
+2
Jun 08 '16 at 12:34 on
source share

You will need to check for conflicting css files / properties, for example, you could have the “.nav” custom style content elsewhere to disable your own css files and check if this works, then check which file or custom style creates conflicts also make sure you include bootstrap.min.js in your code

+1
Apr 18 '16 at 10:18
source share

I had a similar problem, but I noticed that I added the boot script twice , and the second boot script was after the above jquery script.

Decision:

  • Make sure bootstrap.min.js and jquery.min.js are included in your file only once.
  • Bootstrap.min.js script must be included after jquery.min.js
+1
May 03, '19 at 10:14
source share

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>
+1
Aug 20 '19 at 6:26
source share

I had the same problem that brought me here.

My problem: I used the recommended version of jquery 1.12.0 as a jquery script file.

Solution: replaced jquery script with jQuery 2.2.0 version.

This solved it for me.

0
Feb 06 '16 at 17:11
source share

For me it was a problem with CORS. I removed crossorigin="anonymous" from the script importing tags and it started working again.

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

Change: Obviously, adding defer to the script tag will also violate all the goodies of Bootstrap.

0
Jul 17 '18 at 20:45
source share

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

My page looks like this:

 <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> = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"> </ <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 )

0
May 02, '19 at 21:19
source share

I had settings with Angular 7, jQuery 3.4.1, Popper 1.12.9 and Bootstrap 4.3.1, I didn’t succeed until I made this small hack in the 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>
0
Sep 15 '19 at 19:47
source share


More articles:


All Articles