Search code examples
htmlcssbootstrap-4angular-ui-bootstrap

Bootstrap Navbar toggle icon button not showing nav items on click?

I have been using bootstrap in projects very smoothly, but then in one angular project, its navbar toggler icon button is appearing but not showing the nav items on clicking the button.

<div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Admin Header</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item" routerLinkActive="active">
                        <a class="nav-link" routerLink="./home">Home
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item" routerLinkActive="active">
                        <a class="nav-link" routerLink="./about">About</a>
                    </li>
                    <li class="nav-item" routerLinkActive="active">
                        <a class="nav-link" routerLink="./services">Services</a>
                    </li>
                    <li class="nav-item" routerLinkActive="active">
                        <a class="nav-link" routerLink="./contact">Contact</a>
                    </li>
                    <li class=" btn-primary nav-item text-white" role="button">
                        <a class="nav-link text-white" (click)="logOut()" >logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

This is the Navbar result: enter image description here

On decreasing the width of the browser we have results something like this: enter image description here

below is the code of index.html: enter image description here

But on clicking on this button I am not able to see any nav items.

Solution

  • Works perfectly fine, you must be missing some script files.

    <!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Admin Header</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./home">Home
                            <span class="sr-only">(current)</span>
                        </a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./about">About</a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./services">Services</a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./contact">Contact</a>
            </li>
            <li class=" btn-primary nav-item text-white" role="button">
              <a class="nav-link text-white" (click)="logOut()">logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!-- JavaScript -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>