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.
index.zip
BootstrapQuestion.png
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
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

p.my-p{
    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 :-)

Cheers
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I've requested that this question be deleted for the following reason:

I need to rephrase and state my question in a different way.
0
Marco GasiFreelancerCommented:
Hi, Mike.

Using Firebug as I told in my comment, select html element in the left panel of Firebug: In the right panel you'll see this:

*::before, *::after {
    box-sizing: border-box;
}
*::before, *::after {
    box-sizing: border-box;
}
html {
    background: url("../images/html.png") repeat-x scroll 0 0 rgb(244, 244, 244);
}
html {
    font-size: 10px;
}

Open in new window


The last rule (line 5 of bootstrap.min.css) is the one is breaking your style. In Firebug, you can click on the left side of each single rule to temporarely disable it. A red circle will appear and your original style will win againt bootstrap font-size.

Use Firebug and check each element whcih could affect your element style: start from the element style and go up to its parent and the parent of its parent until you fix the problem.

Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.