Avatar of Mike Eghtebas
Mike Eghtebas
Flag for United States of America asked on

Bootstrap effect on the existing css

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.

Avatar of undefined
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;

Open in new window

So, if you just create a class called my-p and do something like

    font-weight: 300;

Open in new window

this rule will be ignored: you'll must to set the rule this way:
.jumbotron p.my-p{
    font-weight: 300;

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 :-)

Mike Eghtebas

I've requested that this question be deleted for the following reason:

I need to rephrase and state my question in a different way.
Marco Gasi

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy