Basic bootstrap question: dropdowns

HTML-CSS
1

Hello, can someone please help me understand what I am doing wrong with this drop-down menu?

File: searchPantry.jsx
Code: https://codesandbox.io/s/wash-po-recipes-1wkxv

Expected:
When I click on the “Select Ingredients” button, a drop-down menu showing a list of types of ingredients should show.

Actual: Nothing happens when I click on the button.

I have a feeling it something very simple. Please help!

2

Looks like that functionality of bootstrap requires jquery.

3

Sorry, not sure I’m following.

The documentation for dropdowns says that the drop-down menu toggles either by setting an attribute, data-toggle="dropdown" or via jquery, $('.dropdown-toggle').dropdown()

I have set the attribute, as far as I can tell…?

4

Dropdowns

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

Example

5

Thanks @lasjorg. I addded the popper.min.js to index.html file. But nothing happened.

Updated code: https://codesandbox.io/s/wash-po-recipes-46oh7?fontsize=14

Thanks!

6

Pretty sure you have to have all three scripts, jquery, popper, and bootstrap. In the link I gave, I added the scripts to the html file in the public folder.

Edit: also you should put the scripts right before the closing body tag.

1 Like
7

It might also be worth checking out one of the bootstrap based react component libraries.

https://react-bootstrap.github.io
https://reactstrap.github.io

1 Like
8

Thanks so much! @lasjorg

9

One more question. I thought that if we used <script> tags to reference a library, we didn’t have to download it and then import it into React (via import "bootstrap/dist/css/bootstrap.css";).

So after I pasted in the 3 script tags for jQuery, popper, bootstrap I thought it was safe to delete the import statement. But I ended up with a non-Bootstrap formatted page…what gives?

10

Did you add the bootstrap CSS to the html? Otherwise you would still need the import.

11

I added this to public/index.html:

 <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

Doesn’t that have all the necessary files…? I thought that was the point of this link, i.e. you don’t need to add anything else…?

Thanks!

12

You remove the import of the CSS, linking to the bootstrap JavaScript isn’t going to help. You still need the bootstrap CSS as well (linked or imported).

1 Like