20

I'm implementing Bootstrap on 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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
  • 2
    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
  • 2
    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

5 Answers5

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

  1. 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 }

  2. 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.

  3. Copy and past the output from the above link into a css file. Include this css file in your html.

  4. 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.

Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
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.

Paul T
  • 1,455
  • 11
  • 15
1

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%}
Gino
  • 1,834
  • 2
  • 19
  • 20
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.

Mas Ghahremani
  • 67
  • 1
  • 5
-1

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>
Bilal Nasir
  • 205
  • 2
  • 10