How to include bootstrap css and js in reactjs app?

Question

I am newb to reactjs, I want to include bootstrap in my react app

I have installed bootstrap by npm install bootstrap --save

Now, want to load b

Answer 1

If you use CRA(create-react-app) in your project, you can add this:

npm install react-bootstrap bootstrap

If you use bootstrap in your app and if it's not working, then use this in index.html :

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

I did the above to solve similar problem. Hopefully this is useful to you :-)

Answer 2

Via npm, you would run the folowing

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

If bootstrap 4, also add dependency popper.js

npm install popper.js --save

Add the following (as a new object) to your webpack config

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

Add the following to your index, or layout

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

Answer 3

You can just import the css file wherever you want. Webpack will take care to bundle the css if you configured the loader as required.

Something like,

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

And the webpack config like,

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

Note: You have to add font loaders as well, else you would be getting error.

Answer 4

I too had a similar scenario. My setup was as indicated below

npm install create-react-app

This will provide you with a boiler-plate code setup to begin. Play around with the App.js file for the main logic.

Later you can use bootstrap CDN in index.html created by the CLI tool. or

npm install bootstrap popper jquery

and then simply include this in the App.js file.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

Few authors have mentioned using className attribute instead of class, but in my case, both were working like below. But if you use class and look at console in developer tools on browser, you will see error for using class.So use className instead.

    <div className="App" class = "container"> //dont use class attribute

And don't forget to remove the default CSS imports to avoid conflicts with bootstrap.

Hope that helps, Happy coding!!!

Answer 5

You can't use Bootstrap Jquery based Javascript components in React app, as anything that tries to manipulate DOM outside React is considered bad practice. Here you can read more info about it.

How to include Bootstrap in your React app:

1) Recommended. You can include raw CSS files of Bootstrap as the other answers specify.

2) Take a look at react-bootstrap library. It is exclusively written for React.

3) For Bootstrap 4 there is reactstrap

Bonus

These days I generally avoid Bootstrap libraries which provide ready to use components (above-mentioned react-bootstrap or reactstrap and so on). As you are becoming dependent on the props they take (you can't add custom behavior inside them) and you lose control over DOM that these components produce.

So either use only Bootstrap CSS or leave Bootstrap out. A general rule of thumb is: If are not sure whether you need it, you don't need it. I've seen a lot of applications which include Bootstrap, but using the only small amount of CSS of it and sometimes the most of this CSS is overridden by custom styles.

Answer 6

Since Bootstrap/Reactstrap has released their latest version i.e. Bootstrap 4 you can use this by following these steps

1. Navigate to your project
2. Open the terminal

3. I assume npm is already installed and then type the following command

   npm install --save reactstrap react react-dom

This will install Reactstrap as a dependency in your project.

Here is the code for a button created using Reactstrap

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

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

You can check the Reactstrap by visiting their offical page