How to add & use Bootstrap in React?

Bootstrap is a free frontend framework for faster and easier web development. It helps you build responsive designs quickly and efficiently. The latest version is Bootstrap 5.

There are two ways to add Bootstrap in a React app:

1. By adding CDN (online)
2. By adding Bootstrap using NPM (offline)

You can get the CDN link from getbootstrap.com.

Add the Bootstrap CSS and JS CDN links inside your index.html file.

import 'bootstrap/dist/css/bootstrap.min.css'; //do not import this link because it is offline

import BsComponent from './BsComponent.jsx';
export default function App() {
  return (
    <>
        <BsComponent/>
    </>
  );
}

Install Bootstrap into your React project using NPM:

• npm install --save bootstrap (installs latest version)
• npm install --save bootstrap@4.3.1 (installs specific version)

After installation, import Bootstrap CSS into your component.

import 'bootstrap/dist/css/bootstrap.min.css';
import BsComponent from './BsComponent.jsx';
export default function App() {
  return (
    <>
        <BsComponent/>
    </>
  );
}