Bootstrap animations not working

[gordillo99]

Hey guys I am having problems with Bootstrap. So I have imported the bootstrap css files

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

Bootstrap seems to be working fine, but the dropdown animation is not working. So, I assumed that it was because I was because it was missing the bootstrap.js file. So, I imported it

import 'bootstrap/dist/js/bootstrap.js'

However, when I do that, I get the following error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

I have installed jQuery using npm, but I still see the error. How do I fix it?

PS: I'm really new to web development. Thanks for your help!

[raerpo]

Hi Gordillo99,

You can't use jQuery's bootstrap features in a React project just like that because it tries to modify the DOM and React already does that. If you want to use bootstrap in a React project you have to use project that mix them to work nicely.

Maybe this?: https://github.com/reactstrap/reactstrap#adding-bootstrap

[Timer]

Hi @gordillo99!

Like @raerpo said, it is advised against using bootstrap directly as it modifies the DOM -- React should control these things.
I would suggest you look at react-bootstrap.

If you would like to use native bootstrap, however, you need to install jQuery yourself.
You can either add the script tag to your index.html, or npm install [email protected] --save (or yarn add [email protected]) and add import $ from 'jquery' or const $ = require('jquery') to the top of your index.js.

Let us know if you have any more questions!

[cr101]

@Timer react-bootstrap only supports Bootstrap 3 which is No Longer Supported while reactstrap uses Bootstrap 4

The current issue with using Bootstrap in a React app built with CRA is that you are not able to customize Bootstrap by changing the SASS variables because CRA does not process SASS files.

[Timer]

@olivia101 react-bootstrap supports the latest stable version of bootstrap, which is not going anywhere like v2.

As bootstrap 4 is not yet stable, we cannot recommend it to our users with confidence.

---

Additionally, you can support SASS customization without ejecting from CRA by adding a buildstep and adjusting start/build by appending node-sass ./src/scss/app.scss -w -o ./src/css && ....

[cr101]

@Timer is adding support for SASS processing without ejecting documented because I couldn't find it in the CRA docs?

[Timer]

https://github.com/facebookincubator/create-react-app/pull/1008/files