Bootstrap: Proper way of linking JavaScript files in HTML layout

Question

I am still new to web development, and I admit I am not good at designing, so I relied heavily on Bootstrap's nice CSS for styling tables, dropdowns ,etc., .How do you link your Bootstrap files in main layout?So far Bootstrap works nicely in my newly created site, but I have one problem, Google's developer's console tells that I have error in my layout.html

Uncaught Error: Bootstrap's JavaScript requires jQuery

This is how I linked Bootstrap css/js in my layout,

<head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

So I tried this way

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Now the error is gone.The styling in table, pager still works, but Bootstrap's dropdown in navbar no longer works.How do you fix this?

<div class="navbar navbar-default navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="{{ path('voters_register') }}">
                            Register Here
                        </a>
                        <button type="button" class="navbar-toggle"
                                data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="{{path('homepage')}}">Home</a></li>
                            <li><a href="{{ path('about') }}">About</a></li>
                            <li><a href="{{path('contact')}}">Contact</a></li>
                            <li class="dropdown">//the problem is here
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stats<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="{{path('voters_groups')}}">Supporter's Groups</a></li>
                                    <li><a href="{{path('voters_island')}}">Statistics</a></li>
                                    <li><a href="{{path('search_city')}}">Search</a></li>
                                    <li><a href="{{path('voter_graph')}}">Graphs</a></li>
                                    <li><a href="{{path('voters_list')}}">Lists of Supporters</a></li>
                                    <li><a href="{{path('voters_messages')}}">Supporter's Messages</a></li>
                                    <li><a href="{{path('voters_register')}}">Register Here</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="dropdown-header">Nav header</li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                      <.........other markups....>

Is Bootstrap 3.3.5 compatible with jQuery 1.11.3 (edit: yes, requires 1.9.1 or better). Also, so you know, with this code you're embedding JavaScript (not CSS) in your page. Have you also included the CSS links? — Patrick Moore
– Patrick Moore, Commented Aug 23, 2015 at 4:58
I'm not able to reproduce the problem with the dropdown not working. Can you provide a jsfiddle to demonstrate the problem? — Maximillian Laumeister
– Maximillian Laumeister, Commented Aug 23, 2015 at 5:17

user2338925 · Accepted Answer · 2015-08-23 05:24:24Z

3

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

answered Aug 23, 2015 at 5:24

user2338925

Sign up to request clarification or add additional context in comments.

Comments

AlmightyWhy · Accepted Answer · 2016-08-12 04:45:51Z

1

Get rid of the 'https:' from the boostrap JS file, you might be causing an SSL conflict by loading the page over http.

Edit: Why did I get downvoted? Relative URL's are a thing... even the top answer is using them...

edited Aug 12, 2016 at 4:45

answered Aug 23, 2015 at 5:15

AlmightyWhy

4746 silver badges12 bronze badges

Comments

Svyat · Accepted Answer · 2015-08-23 05:02:04Z

0

Here you can find an example how to link files Bootstrap basic template

Did you include stylesheets? If so show your navbar code, probably mistake is there.

answered Aug 23, 2015 at 5:02

Svyat

1421 gold badge2 silver badges14 bronze badges

2 Comments

Svyat Over a year ago

Is there any error when you click on dropdown link?

Danielle Rose Mabunga Over a year ago

the error is still there.But it is already fixed now as answered by user Ian Russel Adem

user4257136 · Accepted Answer · 2015-08-23 05:17:43Z

0

please use this link tag

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 </head>

answered Aug 23, 2015 at 5:17

user4257136

Comments

BobJoe · Accepted Answer · 2019-06-05 17:32:11Z

0

There are many code snippets available, make sure your code matches the version of bootstrap your loading.
If, if jquery is required bring it in first then the bootstrap.
Finally, (not-always) but in most cases its better to put your javascript at the bottom, that is just before your closing tag of body:

answered Jun 5, 2019 at 17:32

BobJoe

1

Collectives™ on Stack Overflow

Bootstrap: Proper way of linking JavaScript files in HTML layout

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related