Bootstrap dropdown button does not work
Question
I am new to bootstrap.I am having a problem regarding the drop down button feature.While including the jQuery and bootstrap files from remote servers (ie from code.jquery.com, cdnjs.cloudflare.com, maxcdn.bootstrapcdn.com) the drop down feature works fine.But while working offline by including the files stored locally, the drop down feature does not work.Please help.Thanks in advance.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example"> <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1"> <button class="btn btn-outline-primary">Button 1</button> <button class="btn btn-outline-primary">Button 2</button> <button class="btn btn-outline-primary">Button 3</button> <button class="btn btn-outline-primary">Button 4</button> </div> <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown"> <button class="btn btn-outline-secondary">Button 1</button> <button class="btn btn-outline-secondary">Button 2</button> <button class="btn btn-outline-secondary">Button 3</button> <button class="btn btn-outline-secondary">Button 4</button> <!--- Nested menu --> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> <div class="input-group"> <span class="input-group-addon" id="btnGroupAddon">@</span> <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon"> </div> </div> </div> <script src="jquery/jquery-3.2.1.slim.min.js"></script> <script src="popper/popper.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example"> <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1"> <button class="btn btn-outline-primary">Button 1</button> <button class="btn btn-outline-primary">Button 2</button> <button class="btn btn-outline-primary">Button 3</button> <button class="btn btn-outline-primary">Button 4</button> </div> <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown"> <button class="btn btn-outline-secondary">Button 1</button> <button class="btn btn-outline-secondary">Button 2</button> <button class="btn btn-outline-secondary">Button 3</button> <button class="btn btn-outline-secondary">Button 4</button> <!--- Nested menu --> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> <div class="input-group"> <span class="input-group-addon" id="btnGroupAddon">@</span> <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon"> </div> </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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
2 answers
solution1
0 2017-09-13 04:33:14
Order of inclusion is probably wrong. First jquery, then bootstrap and your scripts at the end. Check your local file paths in page source. Ctrl + U will open it. Read about using web console in your browser. Will save you ton of time.
solution2
0 2018-05-24 08:55:06
Ok Here you go For Offline Bootstrap Dropdown:
- First download Slim js from
https://code.jquery.com/jquery-3.3.1.slim.js - Also you need Popper.js and download from copy popper.js file (download or clone green button) as zip file and extract and inside folder go to dist > esm or umd folder and copy the file to your location
- And link slim.js(jquery file) and popper.js with your bootstrap js file before body tag ends
- This works for most of Js components offline(including dropdown/carousel/popover...) Enjoy! Try it!(Thank You)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dropdown of bootstrap does not work
Bootstrap dropdown button does not unwrap on click
Why does the JavaScript Dropdown button not work?
Twitter bootstrap: button style doesn't work on dropdown menu
Why doesn't Bootstrap button dropdown work on iOS?
bootstrap carousel does not work with handelbars (prev button )
onclick on Bootstrap radio button does not work
Disable bootstrap button does not work with submit?
twitter bootstrap button toggle does not work
Bootstrap4: NavBar toggle button does not work
Related Tags