Code from bootstrap documentation doesn't work-CodePudding

<nav >
        <button  type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <a  href="#">Navbar</a>

        <div  id="navbarTogglerDemo03">
            <ul >
            <li >
                <a  href="#">Home <span >(current)</span></a>
            </li>
            <li >
                <a  href="#">Link</a>
            </li>
            <li >
                <a  href="#">Disabled</a>
            </li>
            </ul>
            <form >
            <input  type="search" placeholder="Search" aria-label="Search">
            <button  type="submit">Search</button>
            </form>
        </div>
    </nav>

I copy pasted this code from bootstrap to make a responsive navbar that turns into a collapsed menu with a button. I copy pasted into the body tag of an empty template in django. bootstrap is loaded, I get everything, even the button when the screen size is small enough. but when I click on the button the menu doesn't expand, the button does nothing.

CodePudding user response：

First of all please have a look to this official bootstrap 5 documentation it has everything you want in order to start coding using bootstrap 5 and i also didn't understand why you are using bootstrap 4 since there is a newer version of bootstrap.

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <nav >
  <div >
    <a  href="#">Navbar</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="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <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  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form >
        <input  type="search" placeholder="Search" aria-label="Search">
        <button  type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

CodePudding user response：

You may not be using the correct documentation / example code for the version of bootstrap you are loading. The code you pasted is using "data-target" attributes from Bootstrap 1.x through 4.x, whereas Bootstrap 5.x has moved to "data-bs-target" attributes.

These attributes are responsible for the JavaScript which would explain why they load but do not trigger anything when clicked.