What is the Bootstrap CSS Framework?

Quick reference

• 00:04 Congratulations, you've learned the basics of HTML.
• 00:07 Now, it's time for us to have some fun and actually build some cool things and
• 00:11 use some different templates and some frameworks and all kinds of cool stuff.
• 00:14 So from here on out, we're going to be building cool things.
• 00:17 Now, many times throughout the beginning of this course,
• 00:20 I said things like, we can style this with CSS,
• 00:22 but we're not learning CSS in this course, so there we go.
• 00:25 Well, luckily,
• 00:26 there's a way to use CSS without actually learning a whole lot of CSS.
• 00:30 And that's by using a framework.
• 00:32 And the most popular framework by and far is something called Bootstrap.
• 00:36 And it was created by some guys at Twitter and while they were working at Twitter,
• 00:40 and it became so popular that they spun it out of Twitter and
• 00:42 those guys left Twitter and now they just work on this full time.
• 00:45 So if you go to getbootstrap.com.
• 00:49 So this is the website, and I mean millions of websites use this thing and
• 00:53 you can see we're on version 4.3, this is the latest version.
• 00:56 But I actually want to use an older version because there's some features in
• 01:00 there that I like better.
• 01:02 Click on this little caret and go to version 3.3.7.
• 01:06 And this is the website we're going to use from now on in this course.
• 01:09 And if you click on here, let's look at the component section.
• 01:13 You could see this list here, it's a list of all the different things you can add to
• 01:17 your website with Bootstrap.
• 01:19 And I'm going to show you in just a minute how to do all this but
• 01:22 I just want to take a second to kind of look through here.
• 01:24 And so let's look at, say buttons, I want to add buttons that look like this.
• 01:29 We just paste this bit of code into our website if we want.
• 01:35 See what else do we have, if we want navbars, all right?
• 01:39 If we want to put a navbar that looks like this on our website,
• 01:42 we just copy this bit of code that they've already created.
• 01:44 Now, you have to install bootstrap on your website first and
• 01:47 there's a couple of different ways to do that.
• 01:49 But once you do it's really just a matter of copying and pasting these things and
• 01:54 sort of modifying a little bit.
• 01:55 So here, we have alert boxes we can put on our website.
• 01:58 So just take a minute to sort of look through here, Glyphicons,
• 02:03 these little icon things, Pagination, so very cool.
• 02:07 And so that's the Components section.
• 02:09 If you want to look at the CSS section as well, there's also some things in there.
• 02:13 Remember, we did tables a few videos ago.
• 02:15 Well, these tables look much better than the tables we did,
• 02:18 we can have these strike tables, right?
• 02:21 It's as easy as, remember when we created our table, we had the table open and
• 02:25 close tag, all we have to do is add this line right here, and
• 02:28 our table will look like this, that is really cool.
• 02:31 Or if you want to have different borders, you can do same thing,
• 02:34 just add this line of code to our table code, really cool.
• 02:37 Same thing here hover, we can hover in our tables.
• 02:40 It's just so very cool, I love this, it's a whole lot of fun to use, it's very,
• 02:44 very easy.
• 02:45 Look at this, different colored, just click the Copy button,
• 02:47 paste it into your code.
• 02:48 So this is bootstrap forms, we just did forms.
• 02:51 Remember, our form look like this, this looks pretty lame,
• 02:54 I mean I'm going to admit it, this looks like a lame looking form.
• 02:57 Well, we can have it look like this just by adding this little bit of code to our
• 03:02 form, awesome, right?
• 03:03 I mean how cool is that?
• 03:04 Buttons, better looking buttons, colored buttons, all kinds of stuff.
• 03:09 Now, if you know CSS you can customize this to make it look however you want,
• 03:13 any colors you want.
• 03:14 We don't know CSS in this course.
• 03:16 We don't care, so we're just going to use the default things for everything and
• 03:20 even that alone is really, really cool.
• 03:21 So this is bootstrap.
• 03:23 Take a few minutes to kind of look through here, browse, see what's available.
• 03:27 In the next video, we're going to go ahead and install this into our app and
• 03:30 start using it.
• 03:31 So that's all for this video

Lesson notes are only available for subscribers.