I am creating a flask app with bootstrap. I am trying to use an element that requires jquery + popper, such as a dropdown menu. The button is showing up, but it's not dropping down
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>hello world</title>
</head>
<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="/static/node_modules/jquery/dist/jquery.min.js"</script>
<script src="/static/node_modules/popper.js/dist/popper.min.js" </script>
<script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js" </script>
<body>
</html>
For reference, here's what my file tree looks like
These are the versions of the dependencies that I have installed (installed using yarn)
#popperjs/core#2.4.4
bootstrap#4.5.2
jquery#3.3.1
popper.js#1.16.1
There are no error messages showing up in the console
When I just reference the scripts like this I have not had any problems
https://getbootstrap.com/docs/4.1/getting-started/introduction/
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
I have seen a lot of related questions, but none of the solutions that were suggested have worked so far. Here is the advice that I have seen so far:
make sure that the jquery script comes before the bootstrap script (check)
remove the popper dependency and use bootstrap.bundle.js or bootstrap.bundle.min.js (I have tried both)
make sure you're not including the bootstrap jquery twice (check)
Add <script>$('.dropdown-toggle').dropdown();</script> (did not work)
You forgot to close script tags in your index.html
<script src="/static/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/static/node_modules/popper.js/dist/popper.min.js"></script>
<script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Related
When I pressed the dropdown button, the links were supposed to be sorted one after the other. But I could not. I am using Bootstrap. I'm almost new to software by the way. It may be an easy question.
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
You need to include "popper.js" library. It's what bootstrap uses for dropdown mechanism if i've researched correct. So this code works;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"
></script>
</html>
Just add the data-bs-toggle="dropdown" attribute to dropdown-toggle button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
Codepen live :
https://codepen.io/Superawdi/pen/jOzYrvX
This question already has answers here:
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Closed last year.
I'm trying to make a dropdown menu with Bootstrap, but it's not working (there's no dropdown when clicking on the button). However, I can perfecly use the framework to do styling stuff.
The Bootstrap js link is at the bottom of the body tag too. I've tried many things, like changing the CDN link for another one, or trying other type of drop down, but nothing's working still. I've also tried other StackOverflow thread related to my problem, but again, nothing works.
Here's the HTML (I've simplified it for you)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="position: relative;">
<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>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
</html>
Thank you!
You need to apply 2 changes:
data-toggle has been renamed to data-bs-toggle.
Second, add the dependency to popper.js:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
Or use the bootstrap version that has popper compiled in according to https://getbootstrap.com/docs/5.0/getting-started/download/
I was creating a dropdown at 'Menubar'. I am using Bootstrap 5.1 to do that. This is an 'ASP.NET Core 6 MVC' project. It'ss also a partial view. The exact code is as following:
<li class="nav-item dropdown show">
<a class="dropdown-toggle nav-link text-dark" href="#" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item">Categories</a>
<a class="dropdown-item">Media Types</a>
</div>
</li>
But whenever I click on this link the dropdown doesn't toggle. If someone can point out the problem that would be very helpful. The reference video is attached here
The above answer are all wrong. I have watched your video, and the reason behine is your code is using bootstrap-4, instead of bootstrap-5.
I have tested your code with bootstrap-4 starter template, and now it works.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<li class="nav-item dropdown show">
<a class="dropdown-toggle nav-link text-dark" href="#" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item">Categories</a>
<a class="dropdown-item">Media Types</a>
</div>
</li>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->
</body>
</html>
Check the starter template by here.
If you sure your whole ASP.NET Core MVC Bootstrap's version is 5.1, your code won't work.
You have a typo here:
Before
<a class="dropdown-item">>Categories</a>
After
<a class="dropdown-item">Categories</a>
Update
Adding to the typo you had, like #seantsang94121 said the other problem here is that you are using this code in bootstrap 5 and it only works in bootstrap 4 as his example shown on his answer -> Answer
you need those:
<head>
<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://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
I was trying to make dropdown button via data attributes using bootstrap, but when I click on button nothing happen.
I follow official documentation, even directly copy example but the button is not opening the menu. There is test page:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/static/the_elder_commands/base.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="btn-group dropright">
<button class="btn btn-dark dropdown-toggle" type="button" id="id_something"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Template
</button>
<div class="dropdown-menu" aria-labelledby="id_something">
<a class="dropdown-item" href="#">Template</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>
Can someone tell me what is missing or what I doing wrong?
In the official page of Bootstrap They Mentioned you have to load jquery first then pooper js then lastly their javascript You have mistyped the order
Their official example
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
also I would suggest using the minified version of jquery (not the slim) if you are planning on using it
According to the documentation:
jQuery must come first, then Popper.js, and then our JavaScript plugins.
So all you have to do is change the order of your script tags.
Like so:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
JQuery,
Popper.js,
Bootstrap.js
That should do the trick
You linked the scripts into your project in the wrong order, let's fix that:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/static/the_elder_commands/base.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="btn-group dropright">
<button class="btn btn-dark dropdown-toggle" type="button" id="id_something"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Template
</button>
<div class="dropdown-menu" aria-labelledby="id_something">
<a class="dropdown-item" href="#">Template</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
You can test it here: https://jsfiddle.net/26u0bax5/
I have a dropdown in my webpage. But it shows the menu items only once. ie-It shows the menu items only when I click it for the first time. If I reload the page again then it work again. Following is the code I have written for the dropdown menu.
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
Thank you.
And this is my header code
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My title</title>
Add role="button" to your toggle link:
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" role="button">Shop</a>
Also, make sure you have loaded the Bootstrap JS file in your code.