CODEWITHSUNDEEP
twitter-bootstrapreactjswebpack
Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

How to insert bootstrap.js to react app?

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.

Upvotes: 24

Views: 37020

Answers (2)

Ryan Dhungel
Ryan Dhungel

Reputation: 3775

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";

Upvotes: 4

Ethan Brown
Ethan Brown

Reputation: 27282

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.

Upvotes: 57

Related Questions