Twitter Bootstrap Question posted in

How to insert bootstrap.js to react app? – Twitter bootstrap

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search