Why is my Bootstrap [4.2] Navbar Toggler not working? - html

Question

I'm trying to make a responsive Navbar with Bootstrap Version 4.2 (I know its "old") but somehow it isn't working as expected. When I click on the hamburger symbol, nothing happens. Can anyone look after the mistake I made in the code below?
I googled a lot, checked the script order, but nothing worked.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Own CSS -->
<link rel="stylesheet" type='text/css' href="./css/style.css">
<title>Website Title</title>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
Blogtopia
<button type="button" class="navbar-toggler" data-toggle="collapse" date-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<i class="fas fa-user"></i> My Profile
</li>
<li class="nav-item">
Dashboard
</li>
<li class="nav-item">
Posts
</li>
<li class="nav-item">
Categories
</li>
<li class="nav-item">
Manage Admins
</li>
<li class="nav-item">
Comments
</li>
<li class="nav-item">
Live Blog
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap Javascript -->
<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>
Thank you very much!

Answer 1

It's a typo – you wrote date-target
, but it should be data-target:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
Blogtopia
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<i class="fas fa-user"></i> My Profile
</li>
<li class="nav-item">
Dashboard
</li>
<li class="nav-item">
Posts
</li>
<li class="nav-item">
Categories
</li>
<li class="nav-item">
Manage Admins
</li>
<li class="nav-item">
Comments
</li>
<li class="nav-item">
Live Blog
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
</div>
</nav>