Basic Bootstrap Usage

Quick reference

• 00:05 Okay, so we've talked about the grid system.
• 00:07 I wanna spend just a couple of minutes talking about all of the other things in
• 00:10 here and how to use them.
• 00:11 I kind of touched on this a couple of videos ago,
• 00:13 how easy it is to just copy and paste this stuff in, but
• 00:17 I wanted to actually do it once, just to sort of show you exactly how easy it is.
• 00:22 So, I went back to Bootstrap, clicked on the CSS thing, clicked on this buttons.
• 00:26 Now let's add this primary button to our project.
• 00:30 So, we come back to our page two, I've added in our references to Bootstrap.
• 00:33 We need to add these to every page of our site that we wanna use Bootstrap on.
• 00:37 But, if I just scroll down, here's our old submit button.
• 00:40 If I just paste in this new guy, and delete that, and
• 00:44 then I click here and I put, I don't know, Send Email.
• 00:48 If we save this, come back to our page two, thing, boom!
• 00:53 Now we have this cool looking email thing.
• 00:55 Now let's go ahead and Bootstrapify the rest of this form.
• 00:57 So we come back here and we click the Forms thing.
• 00:59 We see, here's how to do it.
• 01:01 We need to wrap, underneath our form,
• 01:03 we need to wrap everything in at this form, group div.
• 01:07 So I copy this, and find our form tag.
• 01:11 Underneath it, I'm just gonna go like this.
• 01:13 And I'm gonna highlight all this stuff and
• 01:16 just sort of tab it over.
• 01:21 And we need to close that div.
• 01:24 So I'll go ahead and do that.
• 01:25 Now if I come back here and hit reload, nothing really happen, so, we continue on.
• 01:29 Now for each input type, we need to give it a class of form control.
• 01:34 Forms are kinda the hardest thing to deal with,
• 01:37 that's why I'm using it as an example.
• 01:39 So come in here, paste that, paste that, oops.
• 01:45 Let's save this and take a look.
• 01:48 Okay, so now we see it's wrapped all the way across.
• 01:51 We can change that later, but for now that's fine.
• 01:54 Now let's add that same form control to our text area, And to our select thing.
• 02:02 If we save this, boom.
• 02:06 So yeah, we've bootstrappified this thing.
• 02:08 Now, obviously this is huge and we don't want it that big.
• 02:11 So we can change that a number of ways,
• 02:13 maybe put it in a table, or change it with CSS.
• 02:16 But, yeah, just that easy to add Bootstrap to our thing.
• 02:19 So if we come back here to our main page, let's see.
• 02:26 Let's Bootstrapify our table real quickly.
• 02:29 So if we come up here to tables, and let's say we want striped rows,
• 02:35 let's give our tables a class of table striped.
• 02:40 So head back over to our index page, scroll
• 02:45 down to our table, just give it a class of that come back and
• 02:49 hit reload, and just like that, we have stripes.
• 02:53 Now still we got a border because our original border things there, so
• 02:57 let's remove that, and let's change this to 50%, save this, now it's striped.
• 03:06 Really, really cool.
• 03:06 Let's try the hover thing.
• 03:08 All we have to do is give it a class of table table hover.
• 03:12 Actually, I'm just gonna copy this last bit,
• 03:16 cause we've already added a class of table.
• 03:18 To add more class things, you just pop them in to the one that's already there.
• 03:21 Now if we hit save, come back here and hit reload, just like that we can hover.
• 03:27 Now how awesome is that?
• 03:29 Just all we had to do is put this little class in there.
• 03:31 So that's usually how easy it is to use Bootstrap.
• 03:34 And the form is the hardest thing, and even that wasn't that hard.
• 03:38 So again, come through here and look at all the things you can do.
• 03:41 I mean the CSS section, also look through the Component section,
• 03:44 it has all kinds of stuff, Dropdowns right?
• 03:48 Input groups, Pagination, Breadcrumbs, Thumbnails, all the different things.
• 03:55 So just sort of familiarize yourself with what's in here.
• 03:57 So in the next video, we're gonna dive in and
• 03:59 start talking about our first project that we're gonna do.
• 04:02 It's gonna be a resume website using Bootstrap,
• 04:04 and it's should be a lot of fun.
• 04:05 So that's all for this video.

Lesson notes are only available for subscribers.