Collapse not working properly in Bootstrap-CodePudding

I'm trying to use collapse in a navbar using Bootstrap. When the collapse control shows and I click it, nothing happens.

I'm sure I put the jQuery and Bootstrap bundle scripts in the right place.

Manually collapsing it in the console using $(".collapse").collapse(); works, though.

This is my entire page, if it helps.

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/bootstrap.min.css">
</head>
<body>
<nav >

    <a  href="#"><h6  style="font-family:monospace;color:orange;">jeweled</h6></a>

    <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span style="color:white;">...</span>
    </button>

    <div  id="navbarSupportedContent">
        <ul >
            <li >
                <a  href="#">Home</a>
            </li>
            <li >
                <a  href="#">Stuff</a>
            </li>
            <li >
                <a  href="#">About</a>
            </li>
        </ul>
    </div>
</nav>
<div >{{{ body }}}</div>
<script src="static/jquery.min.js"></script>
<script src="static/bootstrap.bundle.min.js"></script>
<script src="static/wrap.js"></script>
</body>
</html>

CodePudding user response：

UPDATE: I researched for a little while and found how to fix this here. Turns out, I needed to change the data-toggle and data-target attributes to data-bs-toggle and data-bs-target.

CodePudding user response：

Keep aware that depending on the version of the bootstrap a lot of things also change. For example, ms on bootstrap 5 is the same as ml on bootstrap 4.