How to fix dropdown not displaying on click?

Question

I'm creating a static website with HTML, but the CSS framework was built for me via a free theme builder. Now it's time for me to implement the framework successfully. I'm using Bootstrap Builder with their documentation to form my CSS, and from there adding additional content I need. I'm trying to add a dropdown in my Navbar, but for some reason the example they give me isn't working, but their demo/example does. I've copied their code line-for-line and haven't been able to get the example to even work. The sample code I share below is for a button dropdown, the only difference is using the btn class, but the code otherwise is exactly the same for a Navbar dropdown.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#dropdownMenuLink" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

I expect that when I click on the dropdown, the items listed would display in a ... well... dropdown.

Expected results: Untoggled/Not Clicked and Toggled/Clicked, without the green square around it obviously.

Welcome to SO, Can you please post some code so We can see what are you doing. Just Once suggestion by reading your question is Please check you used Jquery and Bootstrap js CDN or files or not? — Atul Rajput, Apr 10 '19 at 09:05
Only CSS will not help you dear, Please include Jquery and Bootstrap JS as well then this drop down will work — Atul Rajput, Apr 10 '19 at 09:28
Did you visit the Bootstrap Builder I linked in my question? Download options for themes include `.css` and `.scss` file types. — Ryan Superioran, Apr 10 '19 at 09:32

score 0 · Accepted Answer · answered Apr 10 '19 at 09:11

Twitter bootstrap uses javascript for few components. In the case of dropdowns it uses popper.js so if you want to make the dropdown work you will need to add popperjs script. It is documented here.

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

also all components which are JS dependent are listed in this link.

score 0 · Answer 2 · answered Apr 10 '19 at 09:12

At First Please Check your CDN order Whether you added the CDNS Appropiately or not

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria- 
expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>

If Everything okay just remove the link reference from

<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria- 
expanded="false">Dropdown link</a>

It will work fine.Hope It helps you

To note, as I did above, my CSS is coming from a stylesheet, not a CDN. Second, what do you mean by "remove the link reference"? Should it read as ```html Dropdown link``` , without the `href="#"`? — Ryan Superioran, Apr 10 '19 at 09:24
The correct path was to get PopperJS and jQuery, as well as BootstrapJS. Not sure why my Bootstrap Builder didn't mention it. — Ryan Superioran, Apr 10 '19 at 09:37

How to fix dropdown not displaying on click?

2 Answers2