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

Question

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

Answer 1

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.

Answer 2

If you're using SCSS, add the following to your SCSS file:

.local-bootstrap {
    @import "~bootstrap/scss/bootstrap";
}

In your component file, make sure the SCSS file has been imported and then wrap the code you want to use bootstrap in a local-bootstrap classed div (see example).

Example:

import React from 'react';
import '<PATH TO SCSS FILE>';

const Example = () => {
  return (
    <div className='local-bootstrap'>
      CODE YOU WANT TO USE BOOTSTRAP
    </div>
  );
};

Answer 3

You can use reactstrap, import what you need into your component file and leave the others alone.

Example:

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

Using:

import 'bootstrap/dist/css/bootstrap.min.css';

You can import Bootstraps CSS into that specific component if you do not want it in your app.js or sitewide.