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

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"> <a href="#" class="navbar-brand">Blogtopia</a> <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"> <a href="./MyProfile.php" class="nav-link"><i class="fas fa-user"></i> My Profile</a> </li> <li class="nav-item"> <a href="./Dashboard.php" class="nav-link">Dashboard</a> </li> <li class="nav-item"> <a href="./Posts.php" class="nav-link">Posts</a> </li> <li class="nav-item"> <a href="./Categories.php" class="nav-link">Categories</a> </li> <li class="nav-item"> <a href="./Admins.php" class="nav-link">Manage Admins</a> </li> <li class="nav-item"> <a href="./Comments?php" class="nav-link">Comments</a> </li> <li class="nav-item"> <a href="./Blog.php:page=1" class="nav-link">Live Blog</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="./Logout.php" class="nav-link text-danger"><i class="fas fa-sign-out-alt"></i> Logout</a> </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"> <a href="#" class="navbar-brand">Blogtopia</a> <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"> <a href="./MyProfile.php" class="nav-link"><i class="fas fa-user"></i> My Profile</a> </li> <li class="nav-item"> <a href="./Dashboard.php" class="nav-link">Dashboard</a> </li> <li class="nav-item"> <a href="./Posts.php" class="nav-link">Posts</a> </li> <li class="nav-item"> <a href="./Categories.php" class="nav-link">Categories</a> </li> <li class="nav-item"> <a href="./Admins.php" class="nav-link">Manage Admins</a> </li> <li class="nav-item"> <a href="./Comments.php" class="nav-link">Comments</a> </li> <li class="nav-item"> <a href="./Blog.php?page=1" class="nav-link">Live Blog</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="./Logout.php" class="nav-link text-danger"><i class="fas fa-sign-out-alt"></i> Logout</a> </li> </ul> </div> </div> </nav>