'React-Bootstrap not working after npm installing and importing it
I made an app using create-react-app and then I ran npm install react-bootstrap and then npm install bootstrap
Then in my main src/index.js file, I imported Bootstrap as : import "bootstrap/dist/css/bootstrap.min.css";
It still wont work on any components? I tried to add the Alert button in my app.js, it imported it successfully but when I added variant="success", it is displaying no colour!
Solution 1:[1]
I don't know the cause of this error. i tried running the bootstrap code that didn't work on another react project and it worked fine. i jst fixed this by using the cdn. maybe there was error in the bootstrap node installation
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> on my public html.
Solution 2:[2]
I prefer to use the CDN, so I get rid off those problems before having them. What you have to do is the following:
In your HTML file: Inside your head tag, put this:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
And inside your body tag, put this:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Solution 3:[3]
just include import 'bootstrap/dist/css/bootstrap.min.css'; to your App.jsx and all is solved
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | bimman |
| Solution 2 | AhmedSHA256 |
| Solution 3 | bimman |