Use Bootstrap Without Installing It

Quick reference

• 00:04 Okay, in this video, I'm going to show you a quick and
• 00:06 dirty way to start using Bootstrap without really needing to install it.
• 00:09 Now, chances are you will, in the future, want to install it and
• 00:13 we'll talk about that.
• 00:14 But just to use it very quickly, you don't actually have to install it and
• 00:17 I'll show you what I mean right now.
• 00:19 So head over to getbootstrap.com and just click this Get started button.
• 00:24 And when you do, we can scroll down and we can find a starter template.
• 00:28 Now if we use this starter template, it has a reference to the Bootstrap CSS and
• 00:34 the Bootstrap JavaScript that allows things like dropdowns and
• 00:38 stuff like that in menus.
• 00:40 And if you'll notice, let's look at the CSS.
• 00:43 The CSS is pointing to a CDN, a content delivery network.
• 00:47 So this is an external thing up on the Internet that you can just link to.
• 00:52 So you don't have to download and
• 00:53 install all these CSS directly onto your Django app,
• 00:56 like we learned in the last few videos, you can just reference it just like this.
• 01:01 Same thing with the JavaScript down here.
• 01:03 We don't have to actually install this JavaScript on our Django app in
• 01:07 the JavaScript directory, like we just learned how to do,
• 01:11 we can just reference the CDN like this.
• 01:13 So that's a very cool way to do it very quickly.
• 01:16 If you don't want to worry about installing those things,
• 01:19 now you can download all those things.
• 01:21 You can download these JavaScript files, and you can download this CSS and
• 01:25 you can install it into your Django app like we just learned how to do in
• 01:29 the static folder.
• 01:30 But you don't have to, you can just use this thing.
• 01:32 So let's just do that real quick.
• 01:35 Let's copy this, and head back over to our code, and
• 01:38 let's look at our base.html file.
• 01:41 And this is where we want that stuff, right?
• 01:44 So I'm just going to kind of scroll down here, get that stuff out of the way,
• 01:49 and then I'm going to right click and just paste in all that code.
• 01:52 So you'll notice we have a head tag here.
• 01:55 So we don't really need this head tag anymore.
• 02:01 But we might want to keep this title in this thing.
• 02:05 So let's move this into the head section of our Bootstrap app, right here,
• 02:09 and we can put these anywhere.
• 02:11 I'm just going to put it right there and you'll notice it comes with its own title.
• 02:15 So I'm going to get rid of that.
• 02:16 We're going to use this title that we've been using so far.
• 02:21 And it also has its own style sheet.
• 02:24 So we really don't need our old style sheet.
• 02:27 It only had that one h1 tag in there anyway, so let's just get rid of that.
• 02:34 And these links, maybe we want to keep them, so I'll just copy this.
• 02:40 And let's bring it in here to our body section and then just put it right there.
• 02:46 And I'm going to add a couple of line breaks just for good measure.
• 02:50 And what else do we have left?
• 02:51 This block content stuff.
• 02:54 We definitely still need this, right?
• 02:57 So where do we want to put this?
• 02:59 Let's just copy this and bring it up here.
• 03:02 Now let's just put it right here, and instead of Hello,
• 03:06 world there, let's get rid of that.
• 03:11 I'm going to just sort of tab this over.
• 03:14 Okay, so that looks good.
• 03:18 And we can get rid of this footer stuff, we don't really need it anymore.
• 03:23 Okay, so we can get rid all of this extra space.
• 03:29 So that should be good.
• 03:30 So let's go ahead and save this and pull up our website.
• 03:34 And notice here's what it used to be.
• 03:36 Now when we click Reload, you'll notice the links change color.
• 03:41 Everything is smushed up against the side here like this.
• 03:45 And the font is a little different.
• 03:47 Now these are all bootstrappy things.
• 03:49 And to move this stuff off the side like this if we wanted to,
• 03:55 we could just wrap our block content in a div with a class equals container.
• 04:02 This is just a Bootstrap thing.
• 04:05 Now let's tab this over and then close our div.
• 04:08 If we save this, and head back, boom, this all pops over a little bit.
• 04:13 And it's sort of interesting, but very cool,
• 04:16 that's all it takes to start using Bootstrap.
• 04:19 So for instance, if we wanted a component of one of these buttons, right,
• 04:24 let's say we want the Success button.
• 04:27 Now all we do is copy this and head back over to our code,
• 04:32 and put it wherever we want it.
• 04:35 So let's say right here,
• 04:37 we wanted to make our JavaScript button into this button.
• 04:46 We could just copy this, Into there and
• 04:51 then change Success to Push The Button!
• 04:56 And then we can get rid of our old button.
• 04:58 We save this, come back here to our homepage and hit Reload.
• 05:02 Boom, now we get this green Bootstrap button.
• 05:04 If we click it, it still works.
• 05:06 If we don't like green, maybe we want it to be this light blue info on,
• 05:12 we just changed the class to button info.
• 05:15 We'll back up our code,
• 05:18 change this class to btn-info, save it.
• 05:23 Back here and hit Reload, and boom, it changes.
• 05:26 So that's very cool.
• 05:27 And it's just that easy to use Bootstrap and all the components that come with it.
• 05:30 So that's all for this video.
• 05:31 In the next video, we'll start to talk about themes.
• 05:34 And we'll start to look at the actual theme we're going to use to build out our
• 05:38 resume website.
• 05:39 And that'll be in the next video.

Lesson notes are only available for subscribers.