Bootstrap 5.2 Modals not appearing when using docs example-CodePudding

Literally copy pasting documentation Example from https://getbootstrap.com/docs/5.2/components/modal/:

<!-- Button trigger modal -->
<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h1  id="exampleModalLabel">Modal title</h1>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        ...
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

I am using Django to develop a website with Python (which shouldn't matter here), I have an index.html with this headers:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="xxx" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="xxx" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="xxx" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The modal isn't working and I am not sure why, can someone assist? I am not using any javascript on top of that. Isn't it supposed to work already with the '''data-bs-''' tags? Much thanks.

I tried taking all CDN's updated versions. I also checked the other StackOverflow posts but they either aren't updated or didn't solve my problem... bootstrap modal not working at all

I even tried adding the jquery from here, without success: Bootstrap modal not working after clicking button

Maybe I did something incorrect, as I don't have extense experience.

CodePudding user response：

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

<!-- Button trigger modal -->
<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h1  id="exampleModalLabel">Modal title</h1>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        ...
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

you forgot add https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"