Jquery, bootstrap are not loading in local dev environment

Hello everyone!

Preface: I am on the jquery course, and I wish for my local development environment to reflect the preview window on freecodecamp’s website.

:white_check_mark: What I see on FCC website:
jquery_intended

:x: What I see on my local web server:

Problem: Jquery and bootstrap seem to be absent from my local web server and I’m not sure why. The <div> elements do not appear to be altered by the bootstrap framework, and the "animated bounce" does not appear either.

What I tried: I copied the starter template from bootstrap’s website. I also experimented with my <script> placement, trying it in both the header and body. I also disabled browser extensions. Finally, I looked at the console but there were no errors, issues, or warnings.

**My code: **

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Jquery playground</title>
    </head>
    <body>
        <div class="container-fluid">
            <h3 class="text-primary text-center">jQuery Playground</h3>
            <div class="row">
              <div class="col-xs-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-xs-6">
                <h4>#right-well</h4>
                <div class="well" id="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>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
                $("button").addClass("animated bounce");
            });
        </script>
    </body>
</html>

I am unsure why bootstrap and jquery are not loading. If someone could help out, that would be awesome!

~Liam

  • The classes used in the challenge are from Bootstrap V3. The well class was removed in V4 (migration docs).

  • The classes used for the animations are from the Animate.css library, so you need to add that as well.

  • Version 4 of Animate.css added prefixes (Migration from v3.x and under) so you have to add the prefixes or use the animate.compat.css version.

  • Just as an FYI, the slim version of jQuery does not include the ajax and effects modules, just so you know, in case you need them. Also, you are missing the starting <html> tag in your HTML.


Updated HTML code with Bootstrap V3, latest jQuery full version, and using animate.compat.css just for simplicity. I removed PopperJS, you can add it back if needed (as far as I know the curriculum does not use it).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"
    />
    <title>Jquery playground</title>
  </head>
  <body>
    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
      <div class="row">
        <div class="col-xs-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-xs-6">
          <h4>#right-well</h4>
          <div class="well" id="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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script>
      $(window).ready(function () {
        $('button').addClass('animated bounce');
      });
    </script>
  </body>
</html>
1 Like

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