-1

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

Adi Rainbow
  • 23
  • 2
  • bootstrap has official documentation with already made basic html template. You just need to copy that template and everything works as expected. – Noob Jun 20 '21 at 14:21

1 Answers1

0

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • @ zer00ne Thank you!!! I found it that my Udemy course is about a year old - and the class has changed! after working hard on what and why your code works, I found it to be data-bs-toggle="collapse" (used to be data-toggle="collapse") My teacher needs to update his bootstrap videos! - anyway thank you so much for the helping hand. – Adi Rainbow Jun 21 '21 at 07:14
  • @AdiRainbow No problem, I had assumed `data-toggle` to be correct as well then realized BS5 requires `-bs-` after comparing vs. the example in docs. Happy coding! – zer00ne Jun 21 '21 at 16:51