I have one page html (see attachment) which works fine with an external css file. But when I add bootstrap css links (see the attached image), it messes my existing format.
Question: How can I keep my formats (fonts etc) as before after the bootstrap css is added to it?
FYI, there are bunch of bootstrap functionality I want to add to this page later. For now I want to find a way these two CSSs co exist first. index.zip BootstrapQuestion.png
CSSHTMLBootstrap
Last Comment
Marco Gasi
8/22/2022 - Mon
Marco Gasi
Hi Mike.
It looks like you want I download the file and do all needed edits. But I really have no time to do it, I'm sorry. I can explain how you have to proceed to get the result.
Theorically speaking, you have to overwrite all bootstrap rules you want to change. Practically, you have to use Firefox and Firebug or Chrome and its developer tools. Since I use FFX I'll tell about the former.
Once your page is loaded, open Firebug and select the element whose style you want to change: in the Firebug right panel you'll see all the cs rules wich involve that element. You can play with the rules and see the result in real time.
Once you've got what you want, you can right-click on the selector of the rule you have changed and copy the whole rule and then paste it in your custom css (usually app.css). You have to link your css after all other css, so the rules of you stylesheet will overwrite the previous rules.
You can also create a specific class to attach to your element if they are not many. In other words, if you want change all paragraphs' font size is better to follow the first way. If you want to change just a specific element, then you have to create a class for that specific element and apply your rules.
This second way not always works as expected. Suppose you want to change a paragraph within jumbotron element.
bootstrap.css holds some specific rules for those paragraphs:
.jumbotron p { font-size: 21px; font-weight: 200; margin-bottom: 15px;}
It looks like you want I download the file and do all needed edits. But I really have no time to do it, I'm sorry. I can explain how you have to proceed to get the result.
Theorically speaking, you have to overwrite all bootstrap rules you want to change. Practically, you have to use Firefox and Firebug or Chrome and its developer tools. Since I use FFX I'll tell about the former.
Once your page is loaded, open Firebug and select the element whose style you want to change: in the Firebug right panel you'll see all the cs rules wich involve that element. You can play with the rules and see the result in real time.
Once you've got what you want, you can right-click on the selector of the rule you have changed and copy the whole rule and then paste it in your custom css (usually app.css). You have to link your css after all other css, so the rules of you stylesheet will overwrite the previous rules.
You can also create a specific class to attach to your element if they are not many. In other words, if you want change all paragraphs' font size is better to follow the first way. If you want to change just a specific element, then you have to create a class for that specific element and apply your rules.
This second way not always works as expected. Suppose you want to change a paragraph within jumbotron element.
bootstrap.css holds some specific rules for those paragraphs:
Open in new window
So, if you just create a class called my-p and do something like
Open in new window
this rule will be ignored: you'll must to set the rule this way:
Open in new window
Keep in mind that Firebug (or the Chrome Developer Tools) are a must if you want to play with css and javascript.
I hope this will help you and I'm very sorry for having no time to edit personally your files, but fortunately I have some job to do :-)
Cheers