CODEWITHSUNDEEP
htmlbootstrap-4
Bill
Bill

Reputation: 9

Why my bootstrap collapse navbar won't work

So im trying to create some navbar using bootstrap and make it able to collapse but it won't work please help

This are my line of codes:

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="WebLogo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
          <span class="navbar-toggler-icon"></span>
        </button> 
 
        <div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Service</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Location</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Connect</a>
            </li>
            <li class="nav-item">
              <button type="button" class="btn btn-outline-secondary">Sign in</button>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Appreciate it for the help, thankyou

Upvotes: 0

Views: 71

Answers (1)

FEREYDOON EISAPOUR
FEREYDOON EISAPOUR

Reputation: 11

You must add jQuery and popper.js link or file to your project

jQuery

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

visit bootstrap document

Upvotes: 1

Related Questions