javascriptbootstrapperjsdelivr

Problem with adding JS to a Bootstrap html sheet (via the basic jsDelivr CDN link) - What am I doing wrong?

I was told to put it just before the closed body tag.

There was also the bundle link that didn't work:

Everything works (the jsdelivr CDN for CSS loaded up fine in the HEADER).

But whenever I do the simple JS functions (with the data toggles) they just don't work at all.

I'm using a mac, and used various browsers, all the same result. Here's the HTML top side screenshot: https://paste.pics/c5ceb923e80364057f7c80da3e0a7350 Here's the HTML bottom screenshot: https://paste.pics/77d881e6cfa8458eb2dd33a4a989b4fa

Solution

  • The following is a minimal Bootstrap 5 data-bs-toggle example. Note: that there is a -bs- in all BS5 data- attributes.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 5 data-bs-toggle</title>
</head>

<body>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse">TOGGLE</button><br>

  <section id="collapse" class="collapse">
    <article class="card card-body">
      <p>¯\_(ツ)_/¯ works OK...</p>
    </article>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>