Bootstrap toggle button is not working on mobile screen?-CodePudding

I am using Bootstrap but don't know why the toggle button is not working I have searched it on the internet but didn't get the right answer there are many similar questions on the StackOverflow but they are not also solving me problem Like Bootstrap toggle button is not working and bootstrap navbar toggle button is not working So please can anyone tell me why it is happening.

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">
  <title>TutorInet</title>
</head>


<nav class="navbar navbar-expand-lg navbar-light ">
      <div class="container-fluid">
        <a style="font-weight: 500;">
          <h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
              style="color:#F97C44;">I</span>net</h3>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.tutorinet.com/blog.php">Blog</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">How it works</a>
            </li>
            <li style="color:#1EB909;font-weight: 600;" class="nav-item">
              <a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
                in</a>
            </li>
            <button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
                style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
                Up</a></button>
          </ul>
        </div>
      </div>
    </nav>

CodePudding user response：

You need to remove the bootstrap script you have and include bootstrap.bundle.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

also the id value in your div should be the same with data-bs-target value in your button

<div class="collapse navbar-collapse" id="navbarSupportedContent">