Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 dropdown not working

I don't really understand, when I launch my html page on local the dropdown menu doesn't work.

I tried to copy/paste my html code on bootply and its work! Incredible ...

http://bootply.com/90610

Any idea ?

I don't want to include all js file, just necessary file for dropdown (dropdown.js)

I didn't really know what I should try ...

If any one can help me It will really appreciate it.

Thank you

like image 264
insidelulz Avatar asked Oct 28 '13 20:10

insidelulz


People also ask

Why is my drop-down menu not working in bootstrap?

Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

Why is dropdown not showing?

In your case you have overflow:hidden on . row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called . row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden.

How does dropdown work in bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built on a third party library, Popper.

How do I open a dropdown in bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.


1 Answers

The way i got it working First

npm install --save bootstrap@3

this will create all bootsrap dirs for css and js

then i added globally in my project /projectname/angular.json

Added these lines to add css and js

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/bootstrap/dist/js/npm.js"
        ]

make sure your index.html file does not directly import any conflicting .js files

like image 163
Ameen Avatar answered Sep 19 '22 20:09

Ameen