Menu
I'm new to Bootstrap, so this might be a naive question for you all. But I'm sure others have or will have a similar question so here goes.
I'm implementing bootstrap to a site that has been around for quite a while and evolved over the years. As soon as I add the bootstrap css and js to my html, many elements get messed up. As far as I can tell, this is attributable to me using the same class names as bootstrap. For example, I have a class called 'btn' and so does bootstrap. All my buttons look ugly and/or odd shaped. The list goes on and on.
Is this pretty much par for the course when people first implement Bootstrap on an existing site? Is it just a matter of going through the old css files and renaming things? Any elegant solutions out there?
729
To resolve such conflicts, you have CSS Cascade. The CSS Cascade is a way for browsers to resolve conflicting CSS declarations. By specifying CSS rules, you specify where the CSS style is added to the cascade hierarchy. The further down a hierarchy a declaration falls, the less likely it will end up as the final style.
Only use BEM class selectors in your stylesheets. Do not use element selectors, id selectors, or inline styles for the purpose of styling. Give meaningful names to the block, element and modifier sections. For example, .
Yes. You will want to put your additions in a separate file and link it below the bootstrap. css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file.
Paul and Millimoose both provided the solution that worked for me. However, for newbies, the solution took a bit of digging, so here's a step by step description of what worked for me (and what I believe they were recommending).
Basically, you have to modify the bootstrap css file. Basically wrap the entire bootstrap css file inside this:
.bootstrap{ //entire boostrap css file goes here }
Use http://winless.org/online-less-compiler to generate new css code. You'll need to past the code above into the left hand side of form in the above link.
Copy and past the output from the above link into a css file. Include this css file in your html.
When needing to use boostrap, simply place around the elements you want bootstrap to apply to.
Big thanks for all the help in figuring out this solution. Works well.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
