So I'm pretty new at HTMl/CSS and Bootstrap. I am currently trying to implement a dropdown menu on my website. I am using the code from my theme on Bootswatch here. When I click on the Dropdown menu, nothing happens. Does anyone know why it isn't working?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>
I'm not doing anything in CSS that could cause this issue as far as I'm aware. But here's that code for if you need it.
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}
Include jquery and bootstrap javascript libraries.
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>