CODEWITHSUNDEEP
htmlbootstrap-4
Foris
Foris

Reputation: 27

Dropdown button don't expand

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?

Upvotes: 0

Views: 126

Answers (3)

Lajos Arpad
Lajos Arpad

Reputation: 76444

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/

Upvotes: 0

Dave
Dave

Reputation: 109

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

Upvotes: 1

manneJan89
manneJan89

Reputation: 1024

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>
  1. JQuery,
  2. Popper.js,
  3. Bootstrap.js

That should do the trick

Upvotes: 0

Related Questions