How to insert bootstrap.js to react app?

Question

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.

Possible duplicate of How to include bootstrap css and js in reactjs app? — Don
– Don, Commented May 1, 2017 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
– Stanislav Mayorov, Commented May 1, 2017 at 16:24

Ethan Brown · Accepted Answer · 2019-11-17 02:44:49Z

56

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.

edited Nov 17, 2019 at 2:44

answered May 1, 2017 at 16:20

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vikram Saini Over a year ago

Hi @Ethan can you please look at my problem stackoverflow.com/questions/43651715/… am stuck and not able to use pusher and fetch in react.Thank you

Kishan Gujarati Over a year ago

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

Ethan Brown Over a year ago

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 Over a year ago

Thanks, @MurtazaJAFARI, I'm glad!

Josué Zatarain Over a year ago

Thanks bro, no one on the internet explained that you could just import the js haha

Ryan Dhungel · Accepted Answer · 2022-12-08 01:01:40Z

5

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

Install

npm i [email protected] @popperjs/core

Use

// /src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

answered Dec 8, 2022 at 1:01

Ryan Dhungel

3,7954 gold badges23 silver badges27 bronze badges

1 Comment

jeffci Over a year ago

Great answer! Solved my issue with an older app using 5

Collectives™ on Stack Overflow

How to insert bootstrap.js to react app?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related