Subscribe or Login to watch video

Login or Subscribe to watch video

11 - How to customize bootstrap

Questions & Comments

Natalie Clark - 2 years ago

How did you add the main.css? I don't seem to see where it was created in your tutorial 10

Natalie Clark - 2 years ago

I think I got it. followed your old tutorial #16

Administrator Tayla Coman - 2 years ago

Hi Natalie, Sorry for the late reply, Christmas has been pretty hectic, glad you found it!

Melissa Sims - 2 years ago

Hello I see the comments below but I do not see the "old Tutorial #16". I believe I created the main.css and updated the color of the button fine but it is not overriding the bootstrap.css as it should. How do I make it override?

Administrator Daniel Scott - 2 years ago

If you've named it exactly the same as the Bootstrap CSS it should work. Try changing the order of your CSS. E.g. make the bootstrap.css on top of main.css in the <head> of your index.html page. Let me know how you get on. - Dan

Nicholas Hannum - 2 years ago

I am having trouble as well. I made a new CSS called main and put it in the CSS folder. But it's not appearing as yours is.

Nicholas Hannum - 2 years ago

Got it.

ron labbe - 2 years ago

Going from Tut 9 to Tut 10, the main.css suddenly appears out of nowhere... I knew how to add it, but the average student might have a problem!

Administrator Daniel Scott - 2 years ago

Ahhhhh - that's why people are having problems here. So my fault. There is a missing video. I've added it now. Video 10 is now how to create a main.css file. Should be all fixed by tomorrow. Sorry gang. - Dan.

Patrick Thor Larsen - 2 years ago

I created the main.css as you instructed and feel I followed the tutorial thoroughly, but I cant seem to override the Bootstap CSS. Are there common reasons for why it wont override? I am using Dreamweaver CC 2017

Administrator Daniel Scott - 2 years ago

Hey Patrick, I think this might be my fault. I didn't make it clear that the main.css needs to be underneath the bootstrap.css in your code. Bootstrap first then main.css. Who ever is last to be listed in CSS wins! Let me know if this helps. - Dan.

Patrick Thor Larsen - 2 years ago

Hey Dan, Thanks for the quick reply. I did as you said and it works great. Thanks a lot

Douglas Gillard - 1 year ago

This seems to be out of order? We were just talking about creating a CSS stylesheet and no you jumped up to buttons?

steven twyford - 9 months ago

Hello, currently following video 11: How to customise bootstrap in Dreamweaver Bootstrap Tutorial and i cannot locate -
Edit - Find and Replace??? (0.52)
Any feedback would be appreciated.

steven twyford - 9 months ago

Sorry made a mistake with video number, its video 10 - make your own css in the DW & B tutorial.
I cannot find Edit-find and replace command.

steven twyford - 9 months ago

Oh god its just a right click

Administrator Tayla Coman - 9 months ago

Sorry for the late reply Steven. Glad you found the solution!

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here:

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime