Where in the HTML File Should Jquery and Bootstrap Be Placed

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

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:

CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)

However, if you require a script to be available before your content loads (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.

* assuming your selector specificity is at least equal to those in your vendor CSS

Arranging CSS and JS file links (Bootstrap & jQuery)

In your header

- /css/bootstrap-theme.min.css
- /fonts/font-awesome-4.5.0/css/font-awesome.min.css
- /css/style.css ( your custom css goes always last to override the rules you want to over-ride)

juste before the end of your body

- /js/jquery.min.js
- /js/bootstrap.min.js
- /js/myJs.js (your custom js)

In the javascript, you always put the dependencies after the master file.
Since bootstrap uses jquery function, jquery has to be loaded before bootstrap. Otherwise, when your browser will read the bootstrap files he's gonna send you errors.

Let me give you an example.

In jquery you have hide() as a method. If bootstrap uses the same method in his js file, hide() must be defined BEFORE bootstrap uses it.

So Jquery is almost always your FIRST js file.
after that bootstrap for example
and only as last, your JS files.

Correct loading order jQuery, Bootstrap and select2 .js files

You will always need to load jQuery before bootstrap or any other plugins that rely on it.

I like to order my links/references as JavaScript first, css second and ensure that each reference is ordered by their respective plugin but thats just my own personal preference.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>

How to add bootstrap and JQuery reference in the index page without Angular CLI

Here the solution build from angular quick start file, there is two way to add bootstrap in to the solution.

Using Node.js command prompt.
Using Visual Studio NuGet package manager

While adding bootstrap using nuget and we dragged the file in to the index.html file its does not loaded in to the web browser. We need to provide the path of the folder in to the bs-config-json file. This configuration is used by the lite-server.

Lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs. lite-server uses BrowserSync, and allows for configuration overrides via a local bs-config.json or bs-config.js file in your project. More info. So we need to provide the folder path into the bs-config-json for the file references.

{
"port" :  2123,
"server": {
"baseDir": "src",
"routes": {
  "/node_modules": "node_modules",
  "/Scripts": "Scripts",
  "/Content": "Content"
  }
 }
}

How do I implement a bootstrap file to html correctly?

Did you download files from http://getbootstrap.com/getting-started/#download ?
You need to add bootstap.css OR the min css file version.

I Replaced css, jquery and js files with CDN links, since I am not sure what files you are using.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="row">
<div class="jumbotron">
    <h1>Hello, world!</h1>          
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

    <div class="span4"><h1>Test1</h1></div>
    <div class="span4"><h1>Test2</h1></div>
    <div class="span4"><h1>Test3</h1></div>
</div>

<div class="row">
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test1</h1></div>
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test2</h1></div>
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test3</h1></div>
</div>

<p> Hi </p>

</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>

You may try to replace each cdn link one by one with your files and see where there problem is.
Good Luck !

Which bootstrap css and javascript files should be linked to our html page?

In general, just use these two files:

bootstrap.min.css
bootstrap.bundle.min.js

You can serve them locally if you want, but it's simplest to just use a CDN. For example, these are the v5.1.3 jsDelivr links:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Find the most up-to-date CDN links at getbootstrap.com under the jsDelivr section.

The other files are just trimmed versions of the full bootstrap distribution. They are only needed if you don't want the full library and you only want some specific feature(s).

For example, if you only want to use bootstrap's grid system and no other bootstrap features, you can use bootstrap-grid.min.css instead of the full bootstrap.min.css.

CSS files	Layout	Content	Components	Utilities
bootstrap(.min).css	Included	Included	Included	Included
bootstrap-grid(.min).css	Only grid system	✗	✗	Only flex utilities
bootstrap-reboot(.min).css	✗	Only reboot styles	✗	✗
bootstrap-utilities(.min).css	✗	✗	✗	Included

script order for jquery with bootstrap

oh yeah now i see sorry. You have to load your actual jquery first, else UI won't work either. So this should be the head

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/js/slider_input.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

Also in html5 you need to leave off the 'type="text/javascript"', like the bootstrap one, also be consisten, so if you have it on the other, also add it to the bootstrap, it has to do with loading rules.

CSS and Javascript order for jquery, jquery-ui and bootstrap

Fixed. I reordered the css files to:

<link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/bootstrap-custom.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

The slider shows up now on internal, local and external pages. I'm not sure why since initially I had jquery-ui under the bootstrap files.

Also, on another page, I was getting this error in the console:

 **Mixed Content**: The page at 'https://qa1.xxx.com/siteorg/addpayment' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS.

So I replaced this link with the locally saved files to avoid the protocol conflict.

I didn't change the order of JS files (placing them in head) even though that seemed to work for the other SO post listed in my question.

Bootstrap: Proper way of linking JavaScript files in HTML layout

I also had that problem before, changing your configuration like this

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Will resolve the problem. I don't know why the link from JQuery.com

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Will cause an error in developer's console but, still work anyway.Hoep it helps

Where in the HTML File Should Jquery and Bootstrap Be Placed