skip to Main Content
<!-- Nav Bar -->
<nav class="navbar  navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="">tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="navbarTogglerDemo02">
  <ul class=" head navbar-nav ml-auto ">
      <li class="nav-item">
          <a class="nav-link" href="#footer">Contact</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#pricing">Pricing</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#cta">Download</a>
      </li>
  </ul>

I tried to change date-toggle and data-target but nothing changed
Bootstrap scripts for CSS and JS are Applied

2

Answers


  1. In Bootstrap 5, make sure you have already imported the popper.min.js and bootstrap.min.js.

    Example:

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    
    Login or Signup to reply.
    1. Please check your bootstrap version , make sure you are using bootstrap version that support data-bs-toggle attribute .
    2. Ensure Bootstrap and CSS Included , Just double-check that you’ve included them properly in your HTML.
    3. Viewport meta tag : This tag is necessary for proper scaling in mobile device.
    <meta name="viewport" content="width=device-width, initial-scale=1">
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search