Bootstrap Dropdown Displaying Same Information - html

I am creating a nav bar using the bootstrap dropdown feature.https://getbootstrap.com/docs/4.0/components/dropdowns/ Each button in the navbar shows the same information in the dropdown menu. Example: The exercises button shows assignments and the assignment button shows assignments as well.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Assignments
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
<a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
</div>
<!--Exercise dropdown info-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Exercises
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
<a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE03: Using Forms and $_POST <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
<a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
</div>
</body>
</html>


You have given same id to both dropdown menu , change it
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Assignments
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
<a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Exercises
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
<a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE03: Using Forms and $_POST <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
<a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
<a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
</div>
</div>
</body>
</html>

Related

why doesn't bootstrap dropdown-menu work?

I'm convinced it's a minor mistake, but I can't seem to spot it. I'm following this edureka guide here:
https://youtu.be/jeZ-URjZM_M?t=978
This is the code:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div id="dropdown" class="dropdown-menu" x-placement="bottom-start">
Home
shop
cart
checkout
Cheers

<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Supposing you are using Bootstrap 4 as stated among your question tags...
Did you include every required resource like stated here?
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Anyway as you can see, the demo copied from the Boostrap4 web site just works as intended:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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 downloaded bootstrap 5 and jquery 3.6,the issue is that when i embed them the dropdown button is not working is there anything missing in my code?

this is my code: i downloaded bootstrap 5 and jquery 3.6,the issue is that when i embed them the dropdown button is not working is there anything missing in my code?
<head>
<title>
Restaurant
</title>
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script type="text/javascript" src="./bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
</body>"

You need to import your jquery, popper before bootstrap. A working example:
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>

Uncaught TypeError when creating a dropdown button in Bootstrap 5

I'm trying to create Dropdown button using Bootstrap 5, but I'm getting an error:
Uncaught TypeError: t.createPopper is not a function
This is my HTML code:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
These are the scripts I am using:
<script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>

You can use bootstrap.bundle.min.js or bootstrap.bundle.js as an offline library which contains Popper.
Ex:-
<script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>
This solved my problem. Hope this helps someone.

Your code is working but probably the Bootstrap or the Popper Library is not complete, try using CDN instead of the offline library.
The official documentation of Bootstrap.
<html>
<head>
<!--official Bootstrap CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

The problem is with the popper version. I don't know what they did but with the recent version of popper the dropdown does not work anymore.
I used version 1.14.3 to make it work in this fiddle: https://jsfiddle.net/e5n1astx/
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<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>
Code I used above.
Link to popper version I used: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

It is necessary to import the popper js into your code. Follow the link: https://popper.js.org/
After that it will work normally
<script src="https://unpkg.com/#popperjs/core#2"></script>

this saved me:
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<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>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Dropdown not expanding in bootstrap

I am working on making dropdown in bootstrap. When I click on dropdown that is not getting expanded. Looks like missing bootstrap references. My code
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="dropdown">
<!--Trigger-->
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Material dropdown</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
I have installed bootstrap using ng add #ng-bootstrap/ng-bootstrap command from VS code terminal. I got this code from here. packgae.json contains this
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"bootstrap": "^4.4.0",
How can I get dropdown work?

Since you are making use of ng-bootstrap, you can use dropdown component as mentioned in their docs.
you need to import only boostrap.css in index.html, you no need to add any other dependency other than "#ng-bootstrap/ng-bootstrap": "^6.1.0".
here is the demo https://stackblitz.com/edit/angular-ivy-mzkkg6
here is the doc reference - https://ng-bootstrap.github.io/#/components/dropdown/examples

Hey #Arvind Chourasiya can you please try this that will work as you expect.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Material dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</body>
</html>
Please check at here: https://stackblitz.com/edit/angular-ivy-w2ch26
Hope this will help you. thanks

Bootstrap Dropdown button not opening on click

I am trying to build a navbar with buttons using bootstrap but the dropdowns aren't opening on click. I have included the bootstrap CDN link, bootstrap css link, ajax popper link and the jquery link in the code in the right places. I haven't added any external CSS to the navbar buttons. What can be the issue here?
Here is a snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="main.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-light bg-light">
<span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item">
<div class="new-pickup"> <a class="nav-link" id="new-pickup" href="#"><i class="fa fa-plus"id="add-plus" aria-hidden="true"></i>
New Pickup </a></div>
<li class="nav-item dropdown">
<div class="sms-button">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SMS
</a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Delivered Status</a>
<a class="dropdown-item" href="#">Log details</a>
</div>
</li>
<li class="nav-item dropdown">
<div class="email-button">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Email
</a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Deivered Status</a>
<a class="dropdown-item" href="#">Log Status</a>
</div>
</li>
<li class="nav-item">
<div class="call-button">
<a class="nav-link" href="#"><i class="fa fa-phone fa-flip-horizontal " aria-hidden="true"></i>
Call
</a></div>
</li>
</li>
</ul>
</div>
</nav>
<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" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
</body>
</html>
The main.js file has:
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});

This may be because you've added another div in there.
Try rearranging your code so that the element with the class .dropdown-toggle is the next item. Rather than div.sms-button

Try below Code:
Option : 1
<li class="nav-item dropdown">
<div class="sms-button" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" > SMS </a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Delivered Status</a>
<a class="dropdown-item" href="#">Log details</a>
</div>
</li>
Option : 2
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Email </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Deivered Status</a>
<a class="dropdown-item" href="#">Log Status</a>
</div>
</li>

Add data-toggle="collapse" data-target=".navbar-collapse" to your clickable icon
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="main.js"></script>
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-light bg-light">
<!--code changes here-->
<span class="navbar-toggler-icon" data-toggle="collapse" data-target=".navbar-collapse"></span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item">
<div class="new-pickup"> <a class="nav-link" id="new-pickup" href="#"><i class="fa fa-plus"id="add-plus" aria-hidden="true"></i>
New Pickup </a></div>
<li class="nav-item dropdown">
<div class="sms-button">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SMS
</a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Delivered Status</a>
<a class="dropdown-item" href="#">Log details</a>
</div>
</li>
<li class="nav-item dropdown">
<div class="email-button">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Email
</a>
</div>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Deivered Status</a>
<a class="dropdown-item" href="#">Log Status</a>
</div>
</li>
<li class="nav-item">
<div class="call-button">
<a class="nav-link" href="#"><i class="fa fa-phone fa-flip-horizontal " aria-hidden="true"></i>
Call
</a></div>
</li>
</li>
</ul>
</div>
</nav>
<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" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>