Bootstrap toggle button is not working on mobile screen?

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/bootstrap@5.0.2/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>

Answer

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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">

Advertisement

Answer