Why my bootstrap toggler is not showing items?-CodePudding

Im using bootstrap version5 and learning about navbar togglers but my togler is not showing any content on clicking. Here is my code.

    <nav >
        <div >
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarTogglerDemo01">
            <a  href="#">Hidden brand</a>
            <ul >
              <li >
                <a  aria-current="page" href="#">Home</a>
              </li>
              <li >
                <a  href="#">Link</a>
              </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>

In learning bootstrap and creating a navbar using nav, So I used navbar toggler for small devices so I kept all my links in a toggler button but while clicking on toggler button nothing is showing

And this what I get.

CodePudding user response：

The HTML markup you have shared with your post is correct. It should show the navigation panel while clicking on the toggle button.

I think you have not included the Bootstrap JavaScript file properly with your page. That is why the panel is not responding while clicking on the button. Add the bootstrap JavaScript file to your page and it will work properly as you expected.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <nav >
        <div >
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarTogglerDemo01">
            <a  href="#">Hidden brand</a>
            <ul >
              <li >
                <a  aria-current="page" href="#">Home</a>
              </li>
              <li >
                <a  href="#">Link</a>
              </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>

CodePudding user response：

you have include the Bootstrap js file? If not include the nav bar will not working properly.

CodePudding user response：

Change data-bs- to data- in your toggle button.

Tested on jsfiddle: https://jsfiddle.net/r3ktuL5f/

CodePudding user response：

Your code is quite good but You missed to hook up bootstrap5 correctly ;-) As we can read in official docs:

Include Bootstrap’s CSS and JS. Place the tag in the for our CSS, and the tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

You can also include Popper and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>

Your code example which is works fine when it is hook up correctly...:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>

  <nav >
    <div >
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
      <div  id="navbarTogglerDemo01">
        <a  href="#">Hidden brand</a>
        <ul >
          <li >
            <a  aria-current="page" href="#">Home</a>
          </li>
          <li >
            <a  href="#">Link</a>
          </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>

  <h1>Hello, world!</h1>
  <h3 >If You want to use Bootstrap You need to hook up bootstrap correctly ;-)</h3>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

</html>