What is the Bootstrap CSS Framework?

Quick reference

• 00:05 Congratulations you've learned the basics of HTML.
• 00:08 Now, it's time for us to have some fun and actually build some cool things,
• 00:11 and use some different Templates, and some frameworks, and all kinds of cool stuff.
• 00:15 So from here on out we're gonna be building cool things.
• 00:18 Now, many times throughout the beginning of this course,
• 00:21 I said things like, we can style this with CSS, but
• 00:23 we're not learning CSS in this course, so there we go.
• 00:26 Well, luckily there's a way to use CSS without actually learning
• 00:29 a whole lot of CSS, and that's by using a framework.
• 00:33 And the most popular framework by and
• 00:35 far is something called Bootstrap, and it was created by some guys at Twitter.
• 00:39 And while they were working at Twitter, and it became so
• 00:42 popular that they spawn it out at Twitter and
• 00:44 those guys left Twitter, and now they just work on this full time.
• 00:46 So if you go to getbootstrap.com, and
• 00:50 I mean it just millions of websites used this thing.
• 00:53 And if you click on here, let's look at the Components section.
• 00:56 You can see these lists here,
• 00:58 a lists of all the different things you can add to your website with bootstrap.
• 01:03 And I'm gonna show you in just a minute how to do all this.
• 01:05 But I'm just wanna take a second to kind of look through here.
• 01:08 And so let's look at buttons.
• 01:10 You wanna add buttons that look like this.
• 01:12 We just paste this bit of code in to our website.
• 01:16 For our Navbars.
• 01:18 We wanna put in navbar that looks like this in our website.
• 01:20 We just copy this bit of code that they've already created.
• 01:23 Now, you have to install bootstrap on your website first.
• 01:26 And there's a couple of different ways to do that but
• 01:28 once you do, it's really just to a matter of copying and pasting these things.
• 01:32 And sort of modifying well a little bit.
• 01:34 So here we have alert boxes we can put on our website.
• 01:37 So just take a minute to sorta look through here.
• 01:40 Glyphicons, all these little icon things.
• 01:43 Pagination, so very cool.
• 01:45 And so that's the Components section.
• 01:47 If you wanna look at the CSS section as well, there's also somethings in there.
• 01:51 Remember we did tables a few videos ago.
• 01:54 Well, these tables look much better than the tables we did.
• 01:56 We can have this striped tables.
• 01:59 It's as easy as when, remember when we created our table.
• 02:02 We had the table open and close tag,
• 02:04 all you have to do is add this line right here in our table will look like this.
• 02:09 That is really cool or if you wanna have different borders,
• 02:12 you can do same thing just add this of line code to our table code.
• 02:15 Really cool.
• 02:16 Same thing here Hover, we can hover In our tables.
• 02:19 Just so very cool, I love this it's a whole lot of fun to use it's very,
• 02:22 very easy.
• 02:23 Look at this,
• 02:24 different colored, just click the copy button paste it into your code.
• 02:27 So, forms, we just did forms.
• 02:29 Remember our form looked like this, well we can have it look like this
• 02:33 just by adding this little bit of code to our form, awesome.
• 02:37 I mean how cool is that, Buttons, better looking buttons,
• 02:40 colored buttons, all kind of stuff.
• 02:43 Now if you know CSS, you can customize this to make it look however you want,
• 02:47 any colors you want.
• 02:48 We don't know CSS in this course, so we're just gonna use the default things for
• 02:52 everything.
• 02:52 And even that alone is really, really cool.
• 02:55 So this is bootstrap, take a few minutes to kinda look through here, browse,
• 02:59 see what's available.
• 03:00 In the next video,
• 03:01 we're gonna go ahead and install this into our app and start using it.

Lesson notes are only available for subscribers.