About this lesson
Exploring the Bootstrap CSS Framework and understanding when to use it.
Exercise files
Download this lesson’s exercise file.
What is the Bootstrap CSS Framework?.docx199.6 KB
Quick reference
What is the Bootstrap CSS Framework?
Bootstrap allows us to add really cool effects to our website without learning CSS.
When to use
Anytime you want to style a website without learning CSS, Bootstrap is for you.
Instructions
In this video we'll just introduce Bootstrap. Head to GetBootstrap.com to check it out.
Browse the components and css pages to see what all Bootstrap has to offer.
Hints & tips
- Bootstrap is an HTML, CSS, and Javascript framework.
- You don't need to know CSS or Javascript to use it.
- Check it out at GetBootStrap.com
- 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.