Bootstrap JavaScript not working

Question

My toggle javascript buttons worked initially - however I have now found that my toggle button including navbar collapsing toggle and accordion panels. I have included my header and footer. From what I have researched I cant see why it has stopped working. Any help would be appreciated.

Header: WEBSITE TITLE

    <!-- Bootstrap -->
    <link href="style/css/bootstrap.min.css" rel="stylesheet">
    <!--load font awesome-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
  </head>

Footer:

 <footer>
<div class="container">
        <p>&copy; Company 2015</p>
      </footer>
    </div> <!-- /container -->
</div>
  </body>

 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

You have included `bootstrap.min.js` 2 times. Remove the FIRST one as it shud be loaded after jquery. — Zee, May 12 '15 at 13:27
always first include jquery link tag then add bootstrap link.. — sheshadri, May 12 '15 at 13:29
I have removed the first one. However I am still unable to use javascript — user289040, May 12 '15 at 13:29

score 5 · Accepted Answer · edited May 23 '17 at 12:33

I guess you just copied what was said on the bootstrap side for example:

<script src="../../dist/js/bootstrap.min.js"></script>

If you have the js bootstrap file in one of your folders in the root, you might want to make sure it is the path is right. For example if your html file is in the same directory as your bootstrap.min.js it should be <script src="bootstrap.min.js"></script>.

The quick fix you just did which is simply changing it to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Might solve the problem now but it will render your local bootstrap file useless which you can make useful by using a bootstrap cdn fallback. Which is basically loading your local bootstap files if you fail to load remote bootstrap files. This is how to make a bootstrap cdn callback

score 2 · Answer 2 · answered Jul 05 '22 at 17:23

So, i did faced this problem and there are 2 main steps in this,

Number1: You need to include 3 files or links, 1 for Bootstrap CSS, 1 for bootstrap js and 1 for jquery. You can include like this:

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Number 2: Now make sure that when you include these files, you include them in this order, First CSS, then JQUERY, then JS.

This is because css is loaded first, then jquery and jquery is needed to be loaded before JS, this is because the JS used in bootstrap is written in Jquery so we need to load Jquery before JS.

And you will be good to go. Thanks

score 1 · Answer 3 · answered May 27 '17 at 18:25

If you are using bootstap 3.x then you need at least jquery 1.9.1 version library.First download the jquery library and bootstrap js and include in your application and then register both in your application page.First register the jquery library and then bootsrap js as mentioned below.

   <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="../../dist/js/bootstrap.min.js"></script>

score 0 · Answer 4 · answered May 12 '15 at 13:34

0

I changed the javascript tag displayed in my footer example from:

<script src="../../dist/js/bootstrap.min.js"></script>

to

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

This has resolved the problem.

answered May 12 '15 at 13:34

user289040

409
2
6
16

2

i hope that you are aware of the fact, that this makes your local files superflous. it was probably just a path issue. – nozzleman May 12 '15 at 13:38
@nozzleman i totally agree with you. I think he should use his local file to do a cdn callback. check my answer below. – Coding Enthusiast May 12 '15 at 14:31
this has NOT resolved the problem that it does not works locally – xakepp35 Oct 20 '18 at 22:26

score 0 · Answer 5 · answered Dec 13 '16 at 18:21

if you check the console of the page, it should show a notice that jquery is not seen by javascript. so, you can solve this by downloading the jquery source code from the jquery site and then you can add the following line of code before the end of your footer: <script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>

Bootstrap JavaScript not working

5 Answers5

Linked