How to Setup and Use Bootstrap

Quick reference

<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<!-- 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>

• 00:04 In this video, we're gonna talk about how to install bootstrap into our app.
• 00:08 Now, there's two different ways.
• 00:10 If we go up to this getting started link, you can see, you can either download it and
• 00:14 install it manually or you can just reference it in your head tag.
• 00:18 I'm gonna do that first just to show you how easy it is.
• 00:20 If we click copy and head back, and let's open up our index.html page, and
• 00:25 here's our head tag.
• 00:27 And just inside of that which is Ctrl+V or Cmd+V on a Mac to paste this and
• 00:33 you see we have this new link rel style sheets, and this JS.
• 00:38 Now, these things are not hosted on our app right now.
• 00:41 They're still hosted back at bootstrap, but we can reference them.
• 00:44 So if we save this and click reload,
• 00:46 you see everything looks a little bit different.
• 00:49 The table kind of change, the font changed a little bit.
• 00:53 That's because bootstrap has been installed and is working.
• 00:56 Likewise, if we come back here and delete that, we just paste it in and save it.
• 01:01 Come back here and reload everything sort of changes back again.
• 01:04 So that's the first way to do it.
• 01:06 That's the easiest way.
• 01:07 You can also download all of the files and add them manually.
• 01:13 Now if you click here, the download button, you get this zip file and
• 01:16 I'm gonna save this to my desktop.
• 01:18 And once it's been downloaded, I can click to open it.
• 01:21 Now, you need to extract all of these files and
• 01:24 you can extract them to your desktop.
• 01:26 That's fine.
• 01:29 Now if I close these out and come back to my desktop,
• 01:32 see here is all the files right here.
• 01:35 If you click on them, double-click, there's three folders.
• 01:37 CSS folder, this has all the CSS, the cascading style sheets.
• 01:42 There is the fonts folder bunch of different fonts and
• 01:45 here's a JavaScript folder.
• 01:47 Bootstrap does use JavaScript for things like mouse over and
• 01:52 menu drop-downs, and nav bar drop-downs.
• 01:55 So it's important that you have this JavaScript.
• 01:58 So what do we do with all these things?
• 02:00 Well, what we need to do is actually drag and drop just like we drag and
• 02:03 drop an image.
• 02:04 So if you grab these and drag them into our thing and sort of hover over the basic
• 02:09 HTML directory, we can see it's automatically updating these things.
• 02:15 Now if we come back here and hit reload, nothing has happened,
• 02:18 because we still haven't referenced it on our page.
• 02:22 And to do that, go back to bootstrap.
• 02:24 And here if we just scroll down, we see just go to the basic template and
• 02:29 we need to copy some things out of here.
• 02:31 We need to copy all of this stuff, come back here.
• 02:35 Paste it in the head section.
• 02:37 And if we save this, come back.
• 02:38 Now, it's working.
• 02:40 You can see this CSS.
• 02:41 This is the link right here.
• 02:43 It links up our style sheet.
• 02:45 So it's referencing the CSS directory and this bootstrap.min.css stylesheet.
• 02:51 Now if we come up here and click on our CSS thing,
• 02:54 we can see the bootstrap.min.css file, see right there.
• 02:57 So these are all the different files you can reference in here, but
• 03:00 this is the main one you need to reference.
• 03:02 Now, you'll notice we didn't do anything with JavaScript.
• 03:05 We have no reference for the JavaScript.
• 03:07 So if you come down here, this and this, we need to copy these and
• 03:12 these are just right above the body tag, the ending body tag.
• 03:16 So if we paste these in and save it, now our JavaScript should work.
• 03:21 So those are the two ways to install bootstrap.
• 03:23 You can do it manually by adding all the files and then you have them or
• 03:28 you can do it like we did the first time at the beginning of this video, and
• 03:32 just copy these guys.
• 03:34 I recommend you just copy these guys and paste them in, much easier.
• 03:37 Instead of linking to the files internally, it links to them
• 03:41 at the bootstrap CDN which is good and solid and will always work for you.
• 03:45 So that's all for this video.
• 03:46 And the next video, we'll start using this thing.

Lesson notes are only available for subscribers.