I recently downloaded some code from Coursera for a Responsive Web Design course to experiment with toggling navbars. The code, which appears to be based on Bootstrap version 3.7 (included in the class materials), works perfectly fine.
However, after downloading the latest version of Bootstrap, I encountered display issues with the code. I am struggling to identify the root cause of this problem. I have attached screenshots for reference. In the incorrectly displayed versions, clicking the small flat button briefly reveals the other elements before disappearing within half a second. Many other students have reported encountering the same issue on the forums, but none of the moderators or mentors have been able to provide a solution. Therefore, I am reaching out here in hopes that someone can assist me!
What could be causing this issue? Are there classes or properties in the newer Bootstrap version that are not compatible with the code?
Here is how the page should look with Bootstrap ~3.7:
https://i.sstatic.net/4bisX.png
Here is how it appears with Bootstrap 4.2, displaying incorrectly:
https://i.sstatic.net/7Jhm0.png
And here is how it looks with the new Bootswatch theme (Slate), also displaying incorrectly:
https://i.sstatic.net/z2pit.png
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<![if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Edward MonteVerde</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Portfolio</a></li>
<!-- dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Contact <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Email</a></li>
<li><a href="#">Skype</a></li>
<!-- additional item in dropdown -->
</ul>
</li>
<!-- end of dropdown menu -->
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>