How to customize bootstrap

Okay. To go and override our bootstrap style, first you need  to work out which one you want to override. So I'm going to insert a button  and then figure out the style name. So I'm gonna go insert button, okay? And remember we looked at earlier  that we found a class called BTN  uh, hyen Danger. And I like it.

I want to use it,  but I want to change the background color, okay? I don't want it to be red. So  what we're gonna do is we are going  to use this thing here, okay? I'm gonna select it all and copy it  and I'm gonna go to my bootstrap CSS,  this big mammoth thing. Somewhere in there is the style that makes, uh,  Betty in danger, big and red with white text. Now I don't wanna go searching for it manually.

Let's go to edit and let's go to find and type it in here. Okay, click find next. And there he is there. Hit close. So what I wanna do is grab this whole class, okay? You gotta make sure you grab the coolly braces.

There's this one at the beginning here,  one at the end and hit copy. So I'm gonna go to edit copy, then I'm gonna jump to my CSS,  my nice clean empty CSS and we're gonna to override it here. So I'm gonna paste it in using edit paste  and make sure I've got my curly braces. They've came along for the ride  and there's my, uh, button danger. And it's got the full stop at the beginning making, uh,  that lets it know that it's a class. Okay?

And the things that I wanna change is pretty much just  the background color and maybe the border color as well. I don't wanna change the color. You'll notice that the word color always refers  to the text color. Can you see? It's white and the background color refers  to obviously the background color,  but if you see color by itself, it means the font color. So actually I don't wanna change it at all.

So there's no point overriding it in saying  it's the exact same color. So I'm gonna delete that one. It's the background color and  the border color I wanna change. So I wanna change this to another color. So, uh, what I can do is if I know the Hexa decimal  number, I can just type it in here. I don't know a few of them off by heart.

Like I know that FFF was uh, white  and I know that 0 0 0 is black. Uh, but that's about all  that I remember off the top of my head. So I need to go off and find the color. So what I'm gonna do is I'm gonna undo, so edit undo  to get back to where it was,  and I'm gonna make sure that everything is saved. Saved all. Okay, I'm gonna get my CSS designer  and now I'm gonna go and change it using the CSS designer.

So to do it, I'm going to click off into my design view. I'm gonna click on my main css. And the good thing about it is  that there's only one class in here, okay? They're called Selectors. It's the overriding name for uh,  things like classes and IDs that go in your css. But there is there, okay?

Um, you might be just to make sure  that you're not stuck in current,  current can get a little bit lost current's great when you  know what you're doing, but when you don't go to all  and just list everything here. So I can click on this and  Down the bottom here. Um, I can go and style it. Now there's lots to go in style potentially. Okay, there he is. There's the background color.

Now, just to tidy things up, watch this. If click show set, instead of showing you all the things  that haven't been done or potentially could  be done, click show set. It only shows you the things that have been done. In this case, it's only got the border  style and the background color. If I turn it off again, it shows me everything. Okay?

But with it on cuts it down to a nice easy manageable list. So, uh, color  and so background color, that's the border color. And let's do the background color. So I'm gonna click on  this and I'm gonna use thise slider to change the hue, okay? And uh, my new danger color is going to be magenta, okay? But left bright pink.

Once you pick it, there's the hue sider. This is how light or dark it potentially is. And this is how opaque it is, okay? Or how see through it's, let's click enter  and you'll notice that my background color is changed  to this magenta color. And um, what you'll also notice is the CSS  and Bootstrap says be red,  but your one, okay,  your main CSS overrides it saying the  background color is magenta. And that's what we're gonna do a lot of in this class is  that we'll leave the bootstrap CSS doing its thing  and then we're gonna override it with our own custom stuff.

Okay, great. So that was just there for as an example. So I'm gonna go delete the one that says button danger. And I'm gonna delete the button. I'm gonna select it, delete it from my document. I'm gonna go file save all.

Alright? And that is how you customize Bootstrap  by overriding it using your own CSS sheet.