navbar collapse does not collapse bootstrap
Question
i'm fairly new to html, and imsimply trying to get the boostrap navbar to collapse but it doesn't work, the button shows up but it does not work, there are so many different questions on this forum concerning this problem but none have worked so far. i know there is a simple thing that i am missing but i can't seem to find where.
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-dark" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="bookreviews.html"><i style="font-size: 17px;" class="fa fa-fw fa-book-open"></i> Book Reviews</a>
<a class="nav-item nav-link" href="#"><i style="font-size: 17px" class="fa fa-fw fa-envelope"></i> Contact us</a>
<a class="nav-item nav-link" href="#">About us</a>
<a class="nav-item nav-link disabled" href="#">Pricings</a>
<a class="nav-item nav-link disabled" href="#"><i style="font-size: 17px;" class="fa fa-fw fa-user"></i> Login</a>
</div>
</div>
</nav>
2 answers
solution1
0 2021-12-08 13:55:41
You need include the scriptjs otherwise the nav collapse will not work <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>
Here is the link to the documentation https://getbootstrap.com/docs/4.0/components/navbar/
solution2
0 2021-12-08 13:57:38
Here You have example properly linked bootstrap 5 navigation, with working toggler .
<,doctype html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1;3/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Boostrap 5 Navbar with toggler.</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled">Disabled</a> </div> </div> </div> </nav> <.-- Optional JavaScript. choose one of the two. --> <.-- Option 1. Bootstrap Bundle with Popper --> <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> <:-- Option 2. Separate Popper and Bootstrap JS --> <.-- <script src="https.//cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> --> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.