How to customize bootstrap

Okay, to go and override a BootStrap style, firstly you need to figure 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 going to go insert, button, and remember when we looked earlier we found a class called btn-danger and I like it, I want to use it but I want to change the background colour, I don’t want it to be red. So what we are going to do is we are going to use this thing here and I'm going to select it all and copy it and I'm going to go to my BootStrap.css, this big mammoth thing. Somewhere in there is the style that makes btn danger big and red with white text. Now I don’t want to go searching for it manually. Lets go to edit, lets go to find and type it in here, click find next and there it is there. So what I want to do is grab this whole class an d you’ve got to make sure you grab the curly braces. There one in the beginning here and one at the end. And hit copy, so I'm going to go to edit, copy. Then I'm going to jump to my css, my nice clean empty css. And we are going to override it here.

So I'm going to paste it in using edit paste and make sure I've got my curly braces, which have come along for the ride. And theres my btn-danger and its got the full stop at the beginning that lets it know it’s a class. And the things that I want to change are pretty much the background colour and maybe the border colour as well. I don’t want to change the colour, you’ll notice the word colour always refers to the text colour, can you see its white? And the background colour refers to obviously the background colour but if you see the word colour by itself it means the font colour. So actually I don’t want to change it at all so theres no point overriding it and saying it’s the exact same colour, it’s the background colour and the border colour I want to change. So I want to change this to another colour so what I can do is if I know the hexadecimal number I could just type it in here. I don’t know a few of them off by heart. Like I know that fff was white and I know that 000 is black but that’s about all that I know off the top of my head so I need to go off and find my colour. So what I'm going to do is I'm going to undo so edit, undo to get back to where it was. And I'm going to make sure that everything is saved, save all. And I'm going to go to my css designer and now I'm going to change it using the css designer.

So to do it I'm going to click off into my design view, I'm going to click on my main css. And the good thing about it is there only one class in here. They’re called selectors, that’s the overriding name for things like classes and id's that go in your css but there he is there. You might be, just make sure that you're not stuck in current. Current can geta little bit lost, current is great when you know what you're doing but when you don’t, go to all and it just lists everything here. So can click on this and down the bottom here, I can go and style it. Now there’s a lot to go and style potentially, there he is, that’s the background colour. Now just to tidy things up, watch this, if you go show set, instead of showing you all the things that haven’t been done or potentially could be done, it only shows you all the things that have been done, in this case its only got the border style and the background colour. If I turn it off again, it shows me everything but with it on, it cuts it down to a nice, easy manageable list. So background colour, that’s the border colour, so lets do the background colour. So I'm going to click on this and I'm going to use this hue slider to change the hue. And my new danger colour is going to be magenta, bright pink. Once you pick it, there’s the hue slider, this is how light or dark it potentially is and this is how opaque it is, or how see through it is, so lets click enter. And you’ll notice that my background colour is changed to this magenta colour and what you’ll also notice is the css in BootStrap says be red. But your one, your main dot css overrides it saying the background colour is magenta and that’s what we are going to do a lot of in this class. We will leave the BootStrap.css doing its thing and then we are going to override it with our own customer’s stuff. Okay great, so that was just there for an example so I'm going to go delete the one that says btn-danger and I'm going to delete the button. I'm going to select it and delete it from my document. I'm going to go file, save all. And that is how you customize BootStrap by overriding it using your own css sheet.