Bootstrap navbar is not expanding-CodePudding

I'm trying to create a proper navbar on bootstrap but it just doesn't expand in mobile version. Clicking on the button just doesn't do anything.

<nav >
    <a href="/" >Your music recommender</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span ></span>
    </button>
    <div  id="mynavbar">
        <ul >
            <li >
                <a  href="#">Register</a>
            </li>
            <li >
                <a  href="#">Log in</a>
            </li>
        </ul>
    </div>
</nav>

To note, I'm using Angular with Boostrap

CodePudding user response：

Without further explanation, it's hard to understand what's happening.. but there are a few reasons that it MIGHT be happening.

1 - Be sure that you put the CSS link inside your < head >

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2 - Put the that right before you close your < body > tag

<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

CodePudding user response：

Add:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

in head tag