React bootstrap not styling my react components

First of what you need to is to Install Bootstrap using NPM

npm install --save bootstrap

then

go for writing this statement in which component you have to use bootstrap, This works in my case.

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

CSS Styling will start working. :)

Happy Coding!


I ran into the same issue and this worked for me -->

I ended up installing bootstrap with npm:

  • 1) npm i --save bootstrap

Then, in index.js (where I render App.js) I imported bootstrap's minified css file from nodes_modules like so:

  • 2) import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Now the responsive positioning is working (where as before I saw react-bootstrap rendering the correct class names, but without styling).

Note: https://react-bootstrap.github.io/getting-started/introduction says you should add the css to the head of index.html. I did not have success doing it this way.