CODEWITHSUNDEEP
javascripttwitter-bootstrap
user289040
user289040

Reputation: 409

Bootstrap JavaScript not working

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>

Upvotes: 6

Views: 50883

Answers (5)

VIASK
VIASK

Reputation: 31

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

Upvotes: 2

Sheo Dayal Singh
Sheo Dayal Singh

Reputation: 1683

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>

Upvotes: 1

goodnesskay
goodnesskay

Reputation: 735

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>

Upvotes: 0

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

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

Upvotes: 5

user289040
user289040

Reputation: 409

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.

Upvotes: 0

Related Questions