So first up we're gonna look at the components part  of Bootstrap, then we'll look at Grid afterwards. So let's look at some of the components  that Bootstrap have created for us  and we'll compare kind of, I guess, um, just to show  how great Bootstrap is. We're gonna show like how to create them using Bootstrap  and then kind of manually how  to create them in the difference in timing and, um, control. So let's look at that. So let's make a really simple thing. Uh, just a button.

Okay? Just a clickable button and bootstrap. And then we'll make it by ourselves. So, uh, I'm going to go to file New on the Bootstrap. I'm gonna create a new everything. Click create.

Alright. All right, so not a lot happens. Okay? I've got my plain old document, but if I go to insert  and I go into button, so I'm in insert form  and I'm gonna go to button, I get this, okay,  that is a button and it's had some styling applied to it. So I'm gonna save this document now  and this is gonna be my Bootstrap test. Bootstrap test.

We're gonna throw this document away. So, um, just a quick little demo. I'm gonna create a completely new file  using plain old H Tm L without Bootstrap. Okay? Essentially the same thing to start with,  except it doesn't have the backing of Bootstrap. I'm gonna save it.

And this is gonna be called plain  Old H Tm L. Okay, so if I add a button here,  the difference is the styling really to start off with. Can you see this button? Here is what you expect  to see is a button, um, and straight Outta code. And this button here and Bootstrap is slightly more styled. The fonts different.

The, there's a bit of a grading in the background, so, okay,  not a big deal. Okay? In terms of the styling, where it becomes quite, um,  cool is that, um, let's check, check out Bootstrap some  of the bootstrap website. And this is really handy to go back  and forward from just to see what is available. You're not gonna remember exactly  or every single thing bootstrap can do,  but it's good to go in and check  and see what it can do every now and again. So if we got a components, uh, there is, um, buttons.

Okay, where are we? Buttons. Buttons, there's button groups,  there's all sorts of things to do with buttons. Okay? These are the components. You can see that there are uh, dropdowns,  there are input groups as well as buttons.

There are, what else we got? There's navigation in here, there's breadcrumbs, uh, how  to put in a jumbotron thumbnails. This is all the pre-made components. We are looking at just the buttons at the moment. Okay? So we've got our button.

Now we're gonna look at the top,  go all the way up to the top again  and we're gonna look at the CSS  that styles these now components. Okay? So there's a whole bunch  of pre-made CSS styles as well. So we're gonna go down to buttons  and you can see there is, these are my default buttons  and we can do, uh, there are options  for the buttons, different colors you can use. Uh, there are different sizes, uh, bro level ones. So you can do lots with buttons, okay?

Without having to do all the styling yourself. So let's give that a test. So, um, I got my button selected. I'm gonna add  A class. Okay? Class starts with a full stop  and this will bring up all of, can you see it says BTN  and it'll bring up all the different, um,  button options from Bootstrap.

Now one of the ones on that last page is button  button slash, sorry, button danger. Okay? And you can see by adding  that class called button danger, it's gone red,  it's got white text, okay? So that's the kind of things that Bootstrap can do. It's got some pre-made classes. Now  to do the same thing here in our H TM O document, I'm going  to go to CSS designer  and I guess I'm just trying to prove, uh, the validity  of bootstrap or at least show you, it's um,  at least show you why people love it so much.

So I'm gonna add a new CSS sheet, which is great. I'm gonna call this one, uh,  plain old, okay? I'm gonna make a selector called  uh, button Dan. Okay? And I'm gonna say  I'm gonna try and start it the same way. So I'm gonna apply that button now, even though it's got no,  no actual, um, attributes, I've applied it,  great, it's not doing anything.

So I'm gonna make it have a background color of red. Oops, what am I styling buttons. Oops. What am I styling? I've applied my class to this body tag,  which is the underlying one, not the actual button itself. That's what I'm meant to click.

You can see how easy it is,  button or the body. Okay? So I'm going to remove it from the body,  click on my button and apply that very same class. I should go through and delete that sort of stuff,  but it's the kind of problems you're gonna run into. So I leave them in there. I like to pretend like it's a part  of my training just to show you what could happen.

But really it's just me getting lost. But we're back. So this button here, okay,  has got a class name button, Dan linked to it. I've made it red, I've gone to my type here  and I'm gonna make it white, okay? It needs a bit of padding. So I'm gonna go up to this top one here called layouts  and I'm gonna make it have some padding around the outside.

So it's gonna have padding of maybe five at the top,  10 on the sides, maybe 15 on the sides,  five on the top 10 there. Great. Okay, the font needs to be centered in here. Now can you start to see the time saving by using Bootstrap? Okay, so I'm nearly there as in,  I'm almost getting this thing to um, do the same as this. It's not the same, okay?

But it's kind of saved a bit of time. Now this is one little tiny part. So buttons are really small. You can imagine where it becomes a whole lot more quicker  using Bootstrap when you start looking at like an image  carousel where there's lots of bits and pieces to it. Start building it yourself. Could be a two day project,  whereas I'll show you in a second how it's just a drag  and drop using Bootstrap.

So, um, let's have a look at back  to the Bootstrap version. There  Are lots of different CSS classes that you can apply. Can you see here? And there's the options. So we picked Danger, but there's some other ones, uh,  we can go through and there's sizes. And all you need to know though is these namings here.

You won't remember them off, off by heart, don't worry. But say I wanna apply this button large, all I need to do is  um, type this in, see the full stop from making it a class. And then BTN Hyen large. So if I come in here  and I go full stop, BTN Hyen  large, it's a large  button, okay? Some of the bits on the other side was,  there was something called button lock. Uh, so BTN actually do btn.

There's one they called Block  and that just makes it go full screen, okay? So it's a giant button that kind of spreads out to the edges  of its container. So then to go off and start building this  and plain old HTML,  I could definitely do it no problem at all,  but I'm gonna be playing around for a long time to try  and get up to speed with, uh, bootstrap. So it's just a time saver. Now let's look at some  of the magical bits of these components. So button pretty boring, Dan.

So let's go and, uh, delete him. So I'm gonna click on my button, delete. What I wily want to do is look at some  of the really cool things and we're gonna look at them  properly later on, but at the moment,  I guess it's just a little fly through where I can say form  bootstrap components. And these are the things that are kind of pre-made. If you look at the bootstrap sides, um,  right at the top here, okay, these are the components. So Dreamweaver, there's a bunch  of 'em on the side here, okay?

And Dreamweaver's incorporated a lot  of them in itself, okay? To make it easier to apply rather than copy  and pasting code across, you  just have to click some of these things. So let's look at one of the more exciting ones. So let's look at, uh, the carousel. Okay? And I want to design my own carousel.

A, you wouldn't, but B,  even if you found somebody else's carousel  to implement in your site, it'll take a lot of working  around to try and get going. Then will it work on all browsers? Probably, maybe. But I know Bootstraps are pretty good at working on all  sorts of different browsers and sizes and devices. Let's click carousel. Voila, one button and a carousels being added.

I'm gonna preview this in a browser,  so I'm gonna save my document. I'm gonna go down preview on a browser  and I've now got a responsive carousel. Can you see it adjusts, works with different sizes. Click the button, moves across. And all I need to do now as a designer is go through  and okay, there's lots of things I don't like about it. Like I don't need potentially this text or the second text,  but I can turn that off quite easily.

And the image in the background here with the crazy, uh,  the, with the ugly white striper around the outside,  I can go through and adjust that  and change it with my own images. It's pretty damn amazing. And that's why people love Bootstrap. It's quick, it's easy, it's a installs,  a pretty plain Jane version of what you need. But it's all done. All the bugs are worked out of it mostly,  and you can go through  and add your own style to it very quickly and easily.