22

How to insert twitter-bootstrap js file to react app using webpack?

I know about react libraries like reactstrap and react-bootstrap, but I want to know how to insert bootstrap.js file without these libs.

Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44
  • Possible duplicate of [How to include bootstrap css and js in reactjs app?](http://stackoverflow.com/questions/40037657/how-to-include-bootstrap-css-and-js-in-reactjs-app) – Don May 01 '17 at 16:11
  • @DonaldPeat It's a bit different. I don't want just to use bootsrap, I want to use bootstrap without libs. – Stanislav Mayorov May 01 '17 at 16:24

2 Answers2

54

You can just install Bootstrap and jQuery via npm/yarn:

npm install bootstrap jquery

Then import Bootstrap in your top-level React file (the entry point):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

You'll need the appropriate Webpack rules to transform CSS, of course.

The problem with using Bootstrap in React is that it requires jQuery, and now you have two things mucking with the DOM, which is a recipe for trouble. That's the real value proposition of Reactstrap (for Bootstrap 4) and React-Bootstrap (which also supports Bootstrap 4 now); they remove the dependence on jQuery, and implement the functionality as React components. I highly recommend you leverage the work of these projects; you're opening a can of worms by trying to combine jQuery with React. It's possible; I've done it; I don't recommend it.

Ethan Brown
  • 26,892
  • 4
  • 80
  • 92
  • Hi @Ethan can you please look at my problem http://stackoverflow.com/questions/43651715/is-there-a-way-to-use-cdn-files-with-reactjs-using-webpack.I am stuck and not able to use pusher and fetch in react.Thank you – Vikram Saini May 01 '17 at 16:24
  • 1
    hi @Ethan i have installed bootstarp and jquery to my project and as you saw up in answer i import all of things then it shows me `Cannot find module 'bootstrap/dist/css/bootstrap-theme.min.css'` pls help me.... thank you – Kishan Gujarati Nov 13 '19 at 18:13
  • It looks like `theme.min.css` is no longer part of the Bootstrap bundle. I have removed it from this answer. It's fine to leave it off, I think the default theme is now integrated in the latest version of Bootstrap. Again, I caution you against doing things this way...I would really use React-Bootstrap or Reactstrap (they are now both supporting Bootstrap 4). – Ethan Brown Nov 17 '19 at 02:44
  • Thanks, @MurtazaJAFARI, I'm glad! – Ethan Brown Jul 13 '20 at 18:20
  • 1
    Thanks bro, no one on the internet explained that you could just import the js haha – Josué Zatarain Sep 29 '20 at 02:48
2

With Bootstrap version 5, you also need to install popper.js.

Install

npm i bootstrap@5.2.3 @popperjs/core

Use

// /src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
Ryan Dhungel
  • 3,637
  • 4
  • 19
  • 26