'Bootstrap5.1.0 Navigation Bar collapse not shown up in mobile phone screen

I just did a simple test on Navbar with Bootstrap5.1.0 in CodePly.com. I have already chosen the Bootstrap5.1.0 as my framework. I wrote the following codes:

<body>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
  <a class="navbar-brand mb-0 h1" href="">
      <img class="d-inline-block align-top" src="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-logo.svg"
      width="30" height="30" />
      mcd NH</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav ms-auto">
        <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link disabled" href="">Pricing</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="">Download</a>
        </li>
    </ul>
  </div>
</nav>

I am hoping to display the collapsed drop-down menu when I switch to mobile phone screen. But for some reason, the collapse drop-down menu just doesn't show up. Did I miss something in the code? Can someone give me some advice?

cssbootstrap-5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions