Target HTML Elements with Selectors Using jQuery

HTML-CSS
1

Hi, I’m trying to replicate the code below in Visual Studio Code
but the buttons don’t look the same and they don’t bounce
maybe I am using the wrong version of CSS, Bootstrap or jquery
any help would be appreciated

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap demo</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css"
    />
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("button").addClass("animated bounce");
        $(".text-primary").addClass("animated shake");
      });
    </script>
    <!-- Code below this line should not be changed -->
    <div class="container-fluid">
      <div class="text-primary text-center">
        <h1>Hello, world!</h1>
        <h3>jQuery Playground</h3>
        <div class="row">
          <div class="col-6">
            <h4>#left-well</h4>
            <div class="well" id="left-well">
              <button class="btn btn-default target" id="target1">
                #target1
              </button>
              <button class="btn btn-default target" id="target2">
                #target2
              </button>
              <button class="btn btn-default target" id="target3">
                #target3
              </button>
            </div>
          </div>
          <div class="col-6">
            <h4>#right-well</h4>
            <div class="well" dir="right-well">
              <button class="btn btn-default target" id="target4">
                #target4
              </button>
              <button class="btn btn-default target" id="target5">
                #target5
              </button>
              <button class="btn btn-default target" id="target6">
                #target6
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
2

which code?

give link to the page

3

Sorry I’m new here, I have just edited it so you can see the code

4

might be that bootstrap version that FCC uses is older.
usually is.

5
6

so, apparently what happened is, they changed class names in newer versions of animate library. that’s why you couldn’t make them bouncy.

You can see my example here

7

Thank you both, I have got it working now, thanks to your help

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.