How to import bootsrap in just one component in react.js

Actually im "migrating" a website project where i used a template. There are some conflicts when i put the bootstrap link in the index.html. I would like to apply bootstrap just into one component to avoid this conflicts, but im not sure how to do it. Im pretty new with react.

The "conflicts" are just visual, like if importing bootstrap changes the rows and columns numbers

Solution

Unfortunately CSS is always global, so there's no easy way of doing this.

One way however, is to recompile Bootstrap and wrap it in a wrapper class. Then, in your code, setup the wrapper class on a wrapper component and only classes that will be inside that wrapper component will be affected by Bootstrap classes.

Steps to do it : (you'll need npm to do it)

download bootstrap sources here
unzip it, go in ./scss/bootstrap.scss
add a wrapper css class on all @import like so :

.local-bootstrap {
  @import "function";
  @import "variables";

  /* ... */

  @import "print";
}

go back to the root of the unzipped directory
run npm install and npm run css-compile
your local bootstrap is in ./dist/css/bootstrap.css, that's what you can add to your project

Then in your code :

 <div class="local-bootstrap"> /* wrapper component */
   /* inside, the code is affected by your local bootstrap */
   <div class="alert alert-primary" role="alert"/>
 </div>

 /* outside it is not */
 <div>
 </div>

That said, it's pretty sure that the javascript part of bootstrap won't fully work because it relies on classes, this is a bit hacky, anyway.