Bootstrap 5: Navbar Won't Expand when toggle clicked-CodePudding

I'm really new to bootstrap and HTML and when I use the HTML provided by bootstrap 5 for the search bar and toggler icon when the window is small, I'll see the toggler icon but it won't expand when clicked which is strange because it will on the example provided on bootstrap's website. This is my HTML file I'm using that has the navbar:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Book Store</title>
  </head>
  <body>
    <nav >
      <div >
        <a >Manga Book Store</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  aria-current="page" href="{% url 'home' %}">Home</a>
            </li>
            <li >
              <a  href="#">Link</a>
            </li>
            <li >
              <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul >
                <li><a  href="#">Action</a></li>
                <li><a  href="#">Another action</a></li>
                <li><hr ></li>
                <li><a  href="#">Something else here</a></li>
              </ul>
            </li>
            <li >
              <a >Disabled</a>
            </li>
          </ul>
          <div >
            <form  role="search" method=POST action="{% url 'search_manga' %}">
              {% csrf_token %}
              <input  type="search" placeholder="Search Manga" aria-label="Search" name="searched">
              <button  type="submit">Search</button>
            </form> 
          </div>
        </div>
      </div>
    </nav>
    <main >{% block content %}{% endblock %}</main>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response：

Your code have links to bootstrap 4. Refer to https://getbootstrap.com/docs/5.0/getting-started/introduction/ for the correct links. After updating bootstrap.css, bootstrap.js and popper.js links, it worked as expected.