Locked lesson.

Upgrade

About this lesson

How to add Bootstrap to your website.

Exercise files

Download this lesson’s exercise file.

Setting Up Bootstrap.docx
58.9 KB

Quick reference

Setting Up Bootstrap

Installing Bootstrap is a two-step process.

When to use

Use these steps anytime you want to install Bootstrap.

Instructions

To Install Bootstrap, go to GetBootstrap.com and click on the "Getting Started" link, and then the "Download Bootstrap" link.

Download the zip file to your computer, and unzip it "extract all files".

Once unzipped, drag the "css", "fonts", and "js" folders into your C9 development environment.

Once uploaded, you need to reference the CSS file and Javascript in your web page.

The css reference goes in your <head> and </head> tag:

<link href="css/bootstrap.min.css" rel="stylesheet">

The Javascript reference goes above your </body> tag:

 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

 

Hints & tips

  • Get the Bootstrap files at GetBootstrap.com
Login to download
  • 00:05 In this video, we're going to install Bootstrap.
  • 00:07 So very easy.
  • 00:08 Go to getbootstrap.com, click on the getting started link.
  • 00:12 Now what we wanna do, there's actually two ways to do this.
  • 00:14 You can actually just copy this and paste right into your HTML document.
  • 00:19 I've created a new HTML page called bootstrap.html, so we can start fresh.
  • 00:24 But like you would just come up here and in between the head document,
  • 00:28 just copy this, paste it in, and just like that Bootstrap is installed on your site.
  • 00:34 So what it's doing, just like we use our style sheet here,
  • 00:38 in fact I'm gonna get rid of this style sheet, that's our old style sheet.
  • 00:41 It's doing the same thing.
  • 00:41 It's referencing these style sheets, but it's referencing them on an external
  • 00:45 website over, that's on a CDN that Bootstrap maintains.
  • 00:49 Now this is not a great way to do it, and I don't recommend that you do it this way,
  • 00:52 but it is a way.
  • 00:54 It tends to work okay, but sometimes the JavaScript gets a little wonky.
  • 00:58 And Bootstrap uses JavaScript for things like drop-down menus, and
  • 01:01 things like that.
  • 01:02 And if you do it that way, it's not a great way to go.
  • 01:06 So instead, I recommend you actually install all the files for Bootstrapping.
  • 01:11 It's really easy, just come here to Bootstrap and
  • 01:13 click the Download button and just download it to your desktop.
  • 01:18 And once it is downloaded, you can click it here.
  • 01:20 And this is a ZIP file.
  • 01:22 We need to extract all these files.
  • 01:23 We need to unzip this file in order to use them.
  • 01:26 So we come up here, and we click this Extract files button and
  • 01:29 extract it and boom, boom, boom, it goes ahead and does it.
  • 01:32 Here's the files.
  • 01:33 I can close all these things and minimize my browser.
  • 01:36 So, here's the zip file, let me just delete that,
  • 01:38 and this is the extracted file.
  • 01:40 So, if we open this, double click this, now these are the different files we want.
  • 01:44 Here's all of our CSS files,
  • 01:48 here’s the different fonts that come with it, and here's the JavaScript stuff.
  • 01:52 So, really easy.
  • 01:54 All we do is, I'm gonna highlight this, I'm gonna hold down my Shift key and
  • 01:57 arrow down or you hit Ctrl + A to highlight all these.
  • 02:00 And I'm just gonna click here hold my button down and
  • 02:03 drag these guys like we've drag images in the past.
  • 02:06 When I come back here, and just, you could see it's uploading all the stuff, and
  • 02:10 then boom, boom, boom.
  • 02:14 We see now all these files are here.
  • 02:16 So, let me find our, shouldn't have deleted this guy.
  • 02:19 Come back to our Bootstrap page and put that back in here.
  • 02:23 Now, we need to reference this and we can scroll down here.
  • 02:27 Here we go.
  • 02:27 So, here's some examples of how to reference this.
  • 02:30 So, we need this style sheet, so I'm gonna copy this and paste it.
  • 02:34 And you can see, it looks just like our last style sheet, our old one.
  • 02:39 I'm just gonna delete the old one here.
  • 02:41 And you can see, it's pointing to CSS Bootstrap.
  • 02:43 And that's right here, CSS bootstrap.min, there it is.
  • 02:48 So this is the style sheet we're gonna be using.
  • 02:50 Close that, come back here and what else do we need?
  • 02:53 Down here at the bottom.
  • 02:55 This is JavaScript.
  • 02:56 This is J query and JavaScript.
  • 02:58 So, this is a reference to the JavaScript.
  • 03:00 You highlight this, copy it.
  • 03:02 And this goes right above our body tag.
  • 03:04 So, we just come down here and paste that in.
  • 03:06 And we're now good to go.
  • 03:08 In fact, if I come back and hit, Hello Bootstrap.
  • 03:14 Save this, come back and type in Bootstrap.
  • 03:19 You can notice, I don't know if you can tell or not, but
  • 03:22 that's slightly different font, right?
  • 03:24 That's not like the font that we used to have.
  • 03:26 In fact, if I go back and copy this and delete it and save this, and hit Reload.
  • 03:32 We can see this is what our h1 used to look like.
  • 03:34 We put that back in there.
  • 03:36 We're done, we've installed Bootstrap, everything is working perfectly.
  • 03:40 And in the next video,
  • 03:41 I'm gonna show you exactly how to use this thing, and that's all for this video.

Lesson notes are only available for subscribers.

Gift this course