Getting started with Bootstrap in React

Bootstrap is an extremely effective toolkit for front-end developers. Thanks to its pre-defined utility classes you can create a coherent user interface without defining custom CSS. In this article, we will discuss the ideal method for using it in a React application.

The best way to fully utilize Bootstrap’s resources, in my opinion, is to use both Bootstrap and the React Bootstrap library simultaneously.

💡 React Bootsrap = A component-based rebuild of Bootstrap

With both libraries, you can use the pre-build components of React Bootstrap such as <Container>, or even the complicated ones like <Button>, and style them with original Bootstrap classes like ms-2 or text-muted.

First, we need to install both

💡 Since React Bootstrap depends on Bootstrap, installing the most recent version of React Bootstrap along with the Bootstrap version it was developed will provide you the best experience. You can check this information on React Bootstrap website.

Obviously, using npm

🥾 INSTALL BOOTSTRAP AND REACT BOOTSTRAP
npm install react-bootstrap@2.5.0
npm install bootstrap@5.2.0

Next, add this line to your App.tsx file

👍 IMPORT BOOTSTRAP CSS