React Bootstrap Installation

Step 1: Go to the official website of React bootstrap to get the installation commands and CDN links.

Step 2: In your existing React project install react bootstrap using the following command.

npm install react-bootstrap bootstrap

Step 3: If you also want to use normal Bootstrap along with React Bootstrap you can add these CDN links in your public/index.html file.

<script src=”https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js” crossorigin></script>

<script

src=”https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js”

crossorigin></script>

<script

src=”https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js”

crossorigin></script>

<link

rel=”stylesheet”

href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css”

integrity=”sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN”

crossorigin=”anonymous”

/>

Step 4: To use the React Bootstrap add the following import in either index.js or App.js in src folder.

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

Now you are ready to use React Bootstarp in your React project.

React Bootstrap is a popular library that let us use the Bootstrap framework’s power and flexibility to React.js applications. By combining the flexibility of React with the UI components provided by Bootstrap, you can create responsive and visually appealing user interfaces with ease.

In this article, we’ll see the process of installing React Bootstrap in a React.js application.