Legacy CSS conflicts with Bootstrap - how to resolve?

Question

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?

You can namespace Bootstrap's styling to children of specific containers: http://stackoverflow.com/questions/13966259/how-to-namespace-twitter-bootstrap-so-styles-dont-conflict. This will require you to, effectively, maintain your own "customised" Bootstrap version but the customisation is pretty trivial. — millimoose, Aug 06 '13 at 23:45
You could download a customized version of bootstrap that only has the components you want. http://getbootstrap.com/2.3.2/customize.html — thgaskell, Aug 06 '13 at 23:48

score 30 · Answer 1 · answered Aug 07 '13 at 03:45

30

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.

answered Aug 07 '13 at 03:45

Randy Greencorn

3,724
2
21
15

1

Was having a lot of trouble figuring out how to do this with Less. Thank you very much. Do you know if this will affect how the bootstrap js file works? Is it dependent on class names in anyway? – Batman Feb 03 '14 at 19:01
Thank you so much. This has helped me. – carbotex Mar 03 '14 at 09:52
How do you do step (4) -> simply plcae around the elements?? I don't understand this. – zaitsman Aug 09 '16 at 23:31
1

@zaitsman, I think he means:
– Timothy Lee Russell Aug 16 '16 at 15:23
hi, the winless website does not work with the content. – Myoch Jan 30 '21 at 21:42

score 3 · Answer 2 · answered Aug 06 '13 at 23:52

3

I think the easiest way is to use a css pre-processor to namespace all of bootstraps css components.

If you got to their github repo: https://github.com/twbs/bootstrap/ you will see they have a LESS distrubution of the code. From there, you can namespace all of their styles by wrapping the library in some kind of class, such as millimoose mentioned.

From their you can add the bootstrap namespace to certain html elements, and the library will only effect that dom node and its children.

answered Aug 06 '13 at 23:52

Paul T

1,395
10
15

1

How do you add bootstrap namespace to certain html elements? – zaitsman Aug 09 '16 at 23:31
1

I would love to see an answer here. – Andres Ramos Apr 26 '18 at 17:13

score 1 · Answer 3 · answered Dec 28 '15 at 20:23

I did a GIST with Bootstrap 3 all inside a class named .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

I started with this tool: http://www.css-prefix.com/ And fix the rest with search and replace in PHPstorm. All fonts @font-face are hosted on maxcdn.

First line example

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Mas Ghahremani · Answer 4 · 2020-01-30T11:38:26.977

0

This issue occurs when an HTML document recognizes two parameter of one style within it.

Remove or comment or modify parameters that caused project messed up. bootstrap.css file or any referrence else, except your custom css file.

Notice : you aren't able to do this when you use bootstrap.min.css format of file. use bootstrap.css without min to be editable.

edited Jan 30 '20 at 11:38

answered Jan 27 '20 at 13:30

Mas Ghahremani

31
1
5

score -1 · Answer 5 · answered Jun 21 '21 at 11:25

One of the solutions is to copy Bootstrap.css file and wrap it inside any wrapper

.wrapper{
//bootstrap code
}

and save the files as scss e.g styles.scss

after that open the command prompt or terminal and type the following command

npx sass styles.scss destination.css

this will create a destination CSS file that will contain wrapper as top-level style so to use these styles you will have to wrap your code with a

<div class="wrapper">
//your elements that will use bootstrap
</div>

Legacy CSS conflicts with Bootstrap - how to resolve?

5 Answers5

Linked