I have installed these packages:
npm install react-bootstrap bootstrap@5.1.3
Then I created a new project using create-react-app
Then in index.html (which is inside the public folder), I added:
<head>
...
<script
src="https://unpkg.com/react/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
...
</head>
After that, I created a Home.js file in src folder and added this code to it:
<Container fluid>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
</Container>
When I do npm start it takes some time to load (assuming it’s linking the files) and after that, it shows both the columns in a stack as shown below:
>Solution :
Check the imports, make sure bootstrap/dist/css/bootstrap.css is imported.
import {Container,Row,Col} from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.css';