Mlbliner Mlbliner - 4 months ago 14
jQuery Question

Where in the HTML file should Jquery and Bootstrap be placed?

Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?

I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?

Answer

Typically stylesheets in the head and scripts before the closing </body> tag:

<html>
  <head>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="your-other-styles.css">
  </head>
  <body>
    <!-- content -->
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <script src="your-other-scripts.js"></script>
  </body>
</html>

You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:

  • You can override styles with your own
  • You have access to any objects added to window by the scripts ($, for example)

However, if you require a script to be available ASAP (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.

Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.

Comments