Link to home
Start Free TrialLog in
Avatar of Mike Eghtebas
Mike EghtebasFlag 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.
index.zip
BootstrapQuestion.png
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

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
Avatar of Mike Eghtebas

ASKER

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

I need to rephrase and state my question in a different way.
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial