CODEWITHSUNDEEP
reactjscomponentsreact-bootstrap
carlos_luis63
carlos_luis63

Reputation: 43

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

Upvotes: 4

Views: 5438

Answers (3)

jkenyon
jkenyon

Reputation: 41

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>
  );
};

Upvotes: 4

Exifers
Exifers

Reputation: 2822

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.

Upvotes: 4

brooksrelyt
brooksrelyt

Reputation: 4025

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.

Upvotes: -1

Related Questions