Adding bootstrap in HTML

Question

I'm going to use bootstrap to build up my front end. Also I'm using JSP and JSTL

What I've read in some articles over the internet is the proper approach of adding an external javascript file should be written before the body closing tag for more optimization of the page. Now I'm trying to apply this with the bootstrap, what i did is put the css of the bootstrap to an external html file:

import_header.html:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.min.css">

which I imported to the head of the html like this:

<jsp:include page="import_header.html" flush="true" />

Now I want to do the same thing with the js file of the of the bootstrap and the jQuery lib but I don't know what is the proper way of doing this.

You mean that you want to include them in your main html file? As is <script src="js/jquery.js"> insert right before the body closing tag? — EmptyArsenal
– EmptyArsenal, Commented Oct 12, 2013 at 6:24
What I did above is make an external html file where I already link all css files then I will only include 1 file in the html file. If I do what your suggesting. I have to include 4 js file every time I create a new page. — newbie
– newbie, Commented Oct 12, 2013 at 6:32
Yeah, that's how it goes. Use some of the js frameworks, and you'll have to include a dozen files. Trying to include them in an external like you did with your css files seems unnecessary. — EmptyArsenal
– EmptyArsenal, Commented Oct 12, 2013 at 6:40

score 11 · Accepted Answer · 2015-10-13 06:51:46Z

11

that's the recommended way, how to place them:

e.g. footer.html

        <!-- Placed at the end of the document so the pages load faster -->
        <script src="jquery/jquery-2.0.3.min.js"></script>
        <script src="bootstrap/bootstrap-2.3.1.min.js"></script>
        <script src="myOwn.js"></script>
    </body>
</html>

edited Oct 13, 2015 at 6:51

answered Oct 12, 2013 at 6:33

user2227400

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

1 Comment

crafter Over a year ago

I would say 'recommended', rather than 'correct'. Traditionally, scripts were loaded in the <head> section. Nowadays, JS sees heavy usage and hence the page is given time to load while the JS code is loading and running, hence placing them towards the end.

Collectives™ on Stack Overflow

Adding bootstrap in HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related