Navbar toggler not expanding (Bootstrap 5)-CodePudding

I know I have seen several questions regarding this situation, but ive tried implementing the solutions offered in previous threads and they havent worked for me.

I was testing out something with Bootstrap 5 (new to it). I was checking out the collapsable nav bar button, where, once it reaches a certain view port size, the navbar would collapse into a hamburger menu and the user can click on it and it would expand. I saw it worked

CodePudding user response：

The docs that you are referring are for the Bootstrap 4, NOT for the Bootstrap 5.

If you want to do the same thing in Bootstrap 5, you have to check these docs.

All you need to do to make your example work is the following:

Change data-toggle attribute to data-bs-toggle
Change data-target attribute to data-bs-target

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1 LCz02ROU9k972gdyvl AESN10 x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<header>
  <nav >
    <a  href="#"></a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarTogglerDemo02">
      <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">
        <button  type="submit">Search</button>
      </form>
    </div>
  </nav>