Basic Bootstrap Usage

Quick reference

• 00:05 Okay so in the last video, we installed Bootstrap.
• 00:07 In this video, I wanna play around with that little bit, and
• 00:09 just show you how to use it, very easy to use, very fun.
• 00:12 So I've come to this CSS page, just click on the CSS link, and
• 00:16 the first thing, it tells us to do is to put in our view port meta tag.
• 00:20 So I'm gonna come back here, and
• 00:21 this goes, like between the head and the head tag, we save that.
• 00:25 Then next thing is to notice that they want you to wrap things in containers.
• 00:30 And a couple of videos go,
• 00:31 I wrapped some stuff in a row basically the same idea, these call containers.
• 00:36 And next you wanna familiarize yourself with a little bit with the grid system,
• 00:39 but you already pretty much know how to use a grid system,
• 00:41 it's the same basic thing.
• 00:42 So enough of this nonsense, let's actually do something fun.
• 00:46 So let's come here, when I click on navbars.
• 00:48 I click on components then navbar.
• 00:50 I scroll down here and I'm just gonna copy this whole thing.
• 00:54 You can look, there's all kinds of different examples you can choose from,
• 00:57 it just have whatever you want.
• 00:59 I'm just gonna grab the default, come back here, and
• 01:01 let's come up just right up here above our H1, and
• 01:06 I'm just gonna paste this in and click save, hit reload and just see what we got.
• 01:10 Boom, just like that.
• 01:11 Man, we've got this fully functioning, awesome looking navbar.
• 01:15 So that is just really cool.
• 01:17 So we come up here, we can kinda play around with this.
• 01:19 Let's see what we got here.
• 01:20 Well, I don't really like this Submit button, because we don't need this for
• 01:23 our website, let's say.
• 01:24 So let's get rid of that.
• 01:25 So how do we do that?
• 01:26 Well, first of all, we just kinda scroll down here.
• 01:29 Before we do that, check out this brand.
• 01:30 I'm gonna say, I'm gonna call this John Elder instead.
• 01:33 We save this, come up here and hit reload, boom.
• 01:35 Now it says John Elder up there, I think that's really much better looking.
• 01:38 So, next, let's look for that submit button.
• 01:41 So, here we have this search, here's a button, submit button.
• 01:44 So if we just kinda look here, form group,
• 01:46 I highlight, here we go form, that's what we're looking for.
• 01:48 So, this is all form, so I'm just gonna delete it.
• 01:52 Click save, hit reload, boom, disappears.
• 01:54 So maybe, we don't want this drop-down.
• 01:57 Well, that's probably this guy right here.
• 02:00 If I click on here, this one down here highlights.
• 02:03 So I know that this is all the stuff that has to go.
• 02:06 So I can just delete that.
• 02:07 Save it, hit reload.
• 02:08 Boom, now that disappears.
• 02:10 Maybe I wanna get rid of these two links too.
• 02:11 So I just find them.
• 02:14 Each one boom, boom.
• 02:16 Probably this one too.
• 02:18 Save, awesome.
• 02:20 So now, if we wanna come down here and look at, let's see this link.
• 02:25 Let's call this one responsive, let's capitalize it.
• 02:29 Responsive, so if we come back here and
• 02:33 type in Responsive.html, just the name of our other page.
• 02:38 If we save this, come back and hit reload.
• 02:39 Now that says responsive, I click on it, it works.
• 02:42 So I'll just leave this drop down cuz this is kinda cool to look at.
• 02:45 So that's how easy it is to add Bootstrap stuff, right?
• 02:48 So let's come back here to the CSS, and let's grab a button, I don't know.
• 02:55 Let's grab a blue button, so we want this primary button.
• 02:58 So this was all the different buttons, so we're not gonna click this copy thing or
• 03:01 else it'll copy all of them.
• 03:03 I just want the one, so I'm just gonna copy this,
• 03:05 come back here to our Hello Bootstrap thing, underneath it, type that in,
• 03:10 and boom, now we have a blue button, if we hover over it,
• 03:15 it changes color very, very cool, right?
• 03:17 I mean, that's just awesome.
• 03:19 Here we can see, look image responsive, we give it a class of image responsive.
• 03:23 Let's see what happens, I'm gonna grab this, come back.
• 03:27 Underneath our button for the SRC.
• 03:29 Let's give this a hike.png, we save this, we get this whole big thing.
• 03:36 But if we resize, what happens?
• 03:41 Look, it resizes it automatically.
• 03:43 Remember last time we did this and we resized it, it only showed like,
• 03:46 from here left.
• 03:48 My whole body got cut off, and you look up here, you notice this hamburger.
• 03:52 Boom, it's already responsive, fully functioning and
• 03:55 responsive, and we didn't do anything.
• 03:58 Just out of the box, it works like that, as long as you have your viewport set.
• 04:01 So, I can't tell you how awesome this is.
• 04:03 And this is totally free, doesn't cost a single thing to use it, so
• 04:07 spend some time, play around here, get to know the different things.
• 04:10 There's forms, there's tables.
• 04:12 Remember we did tables earlier.
• 04:13 These tables look much better, right, hover you do different colors.
• 04:17 Just very, very cool.
• 04:19 Right out of the box, completely free.
• 04:20 So check it out, play around with it.
• 04:22 That's Bootstrap, and that's all for this video.

Lesson notes are only available for subscribers.