# Dumb Question Alert: How do I call jQuery & Bootstrap in Text Editor

**URL:** <https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354>\
**Category:** General\
**Created:** [May 18, 2017, 9:31pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354 "2017-05-18T21:31:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 18, 2017, 9:31pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/1 "2017-05-18T21:31:13Z")

</div>

I want to do the equivalent of adding Bootstrap, Javascript & jQuery but not in CodePen.

In Codepen I go to settings and load them, here:

![](https://global.discourse-cdn.com/freecodecamp/original/3X/6/0/60ab162e9758ccf2ae3973a2519ddc1b4d631789.png)

How do I do this when using a text editor? Do I put the calls in the head section?

And what are the calls, are they all done like this?

\<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”/\> \<p\>Just substitute the cdn location?\</p\> \<p\>Confused.\</p\>

---

<div class="post-metadata">

**Author:** ![pompan129](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pompan129/32/73280_2.png) [@pompan129](https://forum.freecodecamp.org/u/pompan129)\
**Post date:** [May 18, 2017, 9:39pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/2 "2017-05-18T21:39:04Z")

</div>

Yes. in the head section.  
bootstrap is like …  
`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">`

jquery…

````auto
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>```

don't put ```<p>``` tags in head though.
````

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [May 18, 2017, 9:52pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/4 "2017-05-18T21:52:53Z")

</div>

Usually the script tags are placed at the bottom of your html:

```auto
<html>
<head>
<!-- CSS links -->
</head>
<body>
<!-- Your HTML -->

<!-- script tags -->
</body>
</html>

```

This way all your HTML is displayed before jQuery etc is loaded.

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 18, 2017, 10:11pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/5 "2017-05-18T22:11:59Z")

</div>

Thank you @pompan129 and @MarkoN95 - I suspected that Codepen just appends the html and head tags. Thank you.

Here is what I have done in sublime.

(where I have downloaded local Bootstrap)  
 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/f/f/ff0248640427ce206c8281cafca7e7665cf18abd.png)

I still don’t understand where to put the script - BenGitter (sorry I can’t mention you) , you said after the html toward the bottom, but when we were going through the lessons in Free Code Camp, the script tags were put at the top? Or am I making that up?

So, would I put this right before the body closing tag?

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

And this would only load the javascript necessary for bootstrap to work property?

For jquery I would need:

```
'<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>'

```

???

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [May 18, 2017, 10:21pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/6 "2017-05-18T22:21:53Z")

</div>

> [@hejira42](#):
>
> the script tags were put at the top? Or am I making that up?

They were most likely placed above your own code. So order is very important, you will first have to add jQuery and then your own code (if your code uses jQuery of course).

The idea of placing your scrip tags just above `</body>` is to have the browser render your HTML without it waiting for the scripts to download. So the JS isn’t run any faster, but the user does have a nice site to look at faster.

There seems to be a newer, better solution:

> <https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup>

I hope I didn’t confuse you 🙂 Anyway don’t bother too much about it as long as it works…

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 18, 2017, 10:34pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/7 "2017-05-18T22:34:30Z")

</div>

Very helpful - thank you @BenGitter!!

So load jquery at the top since it needs it to render the page.

Then load javascript later, but regardless as long as it work no conflicts move on - and I"ll have a read of the Stack Overflow article now.

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [May 18, 2017, 10:39pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/8 "2017-05-18T22:39:39Z")

</div>

> [@hejira42](#):
>
> So load jquery at the top since it needs it to render the page.

Sorry, I worded that incorrectly. You can definitely load jQuery at the bottom (just above `</body>`, but above your own code:

```auto
...
<body>
<!-- Your HTML -->

  <script src="jquery_source.js"></script>
  <script src="your_code.js"></script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 18, 2017, 10:41pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/9 "2017-05-18T22:41:49Z")

</div>

@BenGitter

But below your own code, right above `</body>` right?

That article was very interesting!

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [May 18, 2017, 11:37pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/10 "2017-05-18T23:37:55Z")

</div>

Below your HTML (in body) and above script tag to your own JS code.

---

<div class="post-metadata">

**Author:** ![adityaparab](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adityaparab/32/64616_2.png) [@adityaparab](https://forum.freecodecamp.org/u/adityaparab)\
**Post date:** [May 19, 2017, 6:44am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/11 "2017-05-19T06:44:41Z")

</div>

I created a youtube video explaining just this.

[Take a look](https://forum.freecodecamp.com/t/new-youtube-channel/79296)!

---

<div class="post-metadata">

**Author:** ![thenewbiemaster](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thenewbiemaster/32/36096_2.png) [@thenewbiemaster](https://forum.freecodecamp.org/u/thenewbiemaster)\
**Post date:** [May 19, 2017, 6:50am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/12 "2017-05-19T06:50:32Z")

</div>

You need put the stylesheet on head section and the javascript on bottom inside body.

As i know, js on bottom improve page speed.

---

<div class="post-metadata">

**Author:** ![Magwit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/magwit/32/16569_2.png) [@Magwit](https://forum.freecodecamp.org/u/Magwit)\
**Post date:** [May 19, 2017, 7:04am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/13 "2017-05-19T07:04:09Z")

</div>

@hejira42 If you already have an existing codepen, just click export in bottom right corner of your codepen. Download the zip and extract. Then open that folder as a project with your code editor. Bootstrap, jQuery and any other library or framework that you’ve used in your codepen will be added automatically.

That said. The slow and cumbersome way of manually adding and typing what you need is of course better for learning and retaining.

BTW it’s not a dumb question at all.

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 20, 2017, 5:01am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/14 "2017-05-20T05:01:35Z")

</div>

> [@adityaparab](#):
>
> Take a look

Love it - I am now watching that discussion and am going to watch the first video there. Thanks @adityaparab 😄

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 20, 2017, 5:03am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/15 "2017-05-20T05:03:21Z")

</div>

@Magwit I love that idea, and I tried it.

I know that in Settings in CodePen I loaded Bootstrap 3.3.7, jQuery and JS, but I don’t see it in the exported index.html:

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/5/e/5e05d2e0ba5a4cd29c4947cc5bbebc2e2dec45be.png)

---

<div class="post-metadata">

**Author:** ![Magwit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/magwit/32/16569_2.png) [@Magwit](https://forum.freecodecamp.org/u/Magwit)\
**Post date:** [May 20, 2017, 7:04am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/16 "2017-05-20T07:04:46Z")

</div>

@hejira42 That’s curious. Can you add a link to your codepen here please? I’ll export it to my local machine and test how the exported page actually looks compared with the pen…

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 20, 2017, 7:17am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/17 "2017-05-20T07:17:39Z")

</div>

Sure @Magwit. Here it is:

> **[FCC - Tribute Page Project - A Tribute to Rumi](https://codepen.io/melinda_eve7/pen/GmGamY)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Magwit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/magwit/32/16569_2.png) [@Magwit](https://forum.freecodecamp.org/u/Magwit)\
**Post date:** [May 20, 2017, 7:53am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/18 "2017-05-20T07:53:06Z")

</div>

I exported your project to my machine and it looks different from your screenshot. But I think it is better to start with looking at your codepen first. Note how you use an internal style sheet.on the html page. Even thought it works it far from optimal, and it creates some very odd tags when exported to a project.

You will be working mostly with external stylesheets anyway so this is a right moment to learn how to use them. Try this. Remove the style tags entirely and add the styling to the css sheet instead. in you codepen. This is what I did on my [tribute page](https://codepen.io/m_rydberg/pen/PGPBJQ) .

Let me know when you’re done and we’ll look at exporting the project after that.

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 20, 2017, 8:10am UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/19 "2017-05-20T08:10:16Z")

</div>

Yes - I do see those weird tags on export. I thought it had to do with codepen styling, not my internal styling in the head.

That’s frustrating. When going through the first unit in FCC we used `<style>` in the head of the HTML page. And you’re right, I do want to learn the things that codepen is making hard to see, yet easy to use.

I’ll fix this tomorrow and we’ll have another look.

Thank you, @Magwit ! 😊

---

<div class="post-metadata">

**Author:** ![adityaparab](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adityaparab/32/64616_2.png) [@adityaparab](https://forum.freecodecamp.org/u/adityaparab)\
**Post date:** [May 20, 2017, 12:09pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/20 "2017-05-20T12:09:41Z")

</div>

Hope you understood my accent 🙂

---

<div class="post-metadata">

**Author:** ![hejira42](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hejira42/32/51644_2.png) [@hejira42](https://forum.freecodecamp.org/u/hejira42)\
**Post date:** [May 21, 2017, 7:49pm UTC](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354/21 "2017-05-21T19:49:22Z")

</div>

@Magwit Soooo much better - I see where Bootstrap, jQuery & Javascript calls are placed - a little funny there’s 2 `</body>` tags?

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/0/0/004e7d8420716d71ea6f1b38e6060e40fa2c7dcc.png)

Here’s the link to the pen: [http://codepen.io/melinda\_eve7/pen/GmGamY](http://codepen.io/melinda_eve7/pen/GmGamY)

[Next page](https://forum.freecodecamp.org/t/dumb-question-alert-how-do-i-call-jquery-bootstrap-in-text-editor/117354.md?page=2)