CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
javaGirl243
javaGirl243

Reputation: 99

Bootstrap JS not loading

The solution to this problem might be very trivial but its got me banging my head on walls! Bootstrap's js files are not loading on my web page for some reason.

I simplified the page to the bare minimum and here's the code:

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="cz" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="cz">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    </body>
</html>

Now when I click on the button, nothing happens and I don't see the dropdown. When I checked the js files loaded(through browser inspect element), I see that only JQuery has loaded.

If I remove JQuery, I get the correct error that Bootstrap requires Jquery. I've created a codepen and it works perfectly fine on it. Could someone help me with this please?? :(

Upvotes: 2

Views: 2195

Answers (2)

Chathura Buddhika
Chathura Buddhika

Reputation: 2195

you didn't close first tag. it should be,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

UPDATE : if you are thinking why self closing script tags are not working, refer this. Why don't self-closing script tags work?

Upvotes: 3

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Close script tag

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>

Upvotes: 3

Related Questions