Guide · Open source

How to use react-bootstrap: install, pick the right version and build

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

React-Bootstrap provides Bootstrap components such as buttons, navbars and forms as React components, so you can use Bootstrap's look inside a React app without writing raw Bootstrap JavaScript. This guide is for React developers who already use Bootstrap styling, or who are migrating an older project. By the end you will know which React-Bootstrap version matches your Bootstrap version, how to set up the project, and where to look when you need to build or test it.

React-Bootstrapreact-bootstrap/react-bootstrap · ★ 22.6k · MIT Install options & downloads

Quick start

1Confirm your Bootstrap version. Check which Bootstrap version your project uses. Bootstrap 5.x needs React-Bootstrap 2.x.
2Install Node.js. Install Node.js, which includes npm, from nodejs.org.
3Clone the repository. To work from source, clone github.com/react-bootstrap/react-bootstrap.
4Install dependencies. Run npm run bootstrap inside the repository to install dependencies for the library and docs site.
5Run the tests. Run npm test to check the library, or npm run tdd for watch mode.
6Open the docs or build. Run npm start to view the docs site locally, or npm run build to build the library.

What react-bootstrap is and who it suits

React-Bootstrap is a set of Bootstrap components built with React and written in TypeScript. It is aimed at developers who already use Bootstrap styling and want those pieces available as React components.

It assumes Bootstrap's styles are present, so it is a poor fit for projects that do not use Bootstrap.

Good fit: React developers who already use Bootstrap, teams maintaining a Bootstrap 5 React app, and developers migrating a Bootstrap 4 React project to version 2.
Poor fit: projects that do not use Bootstrap, and anyone on Bootstrap 4 or 3 who wants active maintenance.

Choose the correct react-bootstrap version for your Bootstrap version

React-Bootstrap is compatible with specific Bootstrap versions, so you must pair them correctly. According to the README, Bootstrap 5.x pairs with React-Bootstrap 2.x. Bootstrap 4.x pairs with 1.x, and Bootstrap 3.x pairs with 0.33.x. The README marks 1.x and 0.33.x as not maintained.

Bootstrap 5.x: React-Bootstrap 2.x (maintained, current documentation at react-bootstrap.github.io).
Bootstrap 4.x: React-Bootstrap 1.x (not maintained).
Bootstrap 3.x: React-Bootstrap 0.33.x (not maintained).

Migrate from Bootstrap 4 or 3

If you are updating an existing project to Bootstrap 5, the README points to the migration guide for React-Bootstrap V2. For a move from Bootstrap 3 to Bootstrap 4, it points to the migration guide for V1.

Read the migration guide for your target version before changing components, because the two steps are separate.

Set up the repository and install dependencies

The README's install method is through a package manager, and the prerequisite is Node.js, which includes npm. To work on the library and its docs site from source, clone the repository and then install dependencies for both with the bootstrap script. Run the script inside the repository folder.

The README also lists a local setup flow: install Node.js, then run the bootstrap script to install dependencies for both the library and docs site.

git clone https://github.com/react-bootstrap/react-bootstrap
npm run bootstrap

Run, test and build the project

Once dependencies are installed, the README lists three commands. Run the tests once, or in watch mode. Start a local copy of the docs site. Or build a local copy of the library.

Run tests once: npm test
Run tests in watch mode: npm run tdd
Start the docs site locally: npm start
Build the library: npm run build

npm test
npm run tdd
npm start
npm run build

The README links to CodeSandbox examples that you can open in your browser without a local setup. It also lists related modules: react-router-bootstrap, which integrates with React Router, and Awesome React Bootstrap Components, which adds components such as an off-canvas navbar, switch and sliders.

CodeSandbox examples repository: github.com/react-bootstrap/code-sandbox-examples
react-router-bootstrap for React Router integration
Awesome React Bootstrap Components for extra components

What people use it for

Building a Bootstrap 5 navbar, buttons and forms inside a React app.
Maintaining an existing React app that already uses Bootstrap styling.
Migrating a Bootstrap 4 React project to React-Bootstrap version 2 by following the V2 migration guide.
Prototyping component layouts quickly with CodeSandbox examples before setting up a local project.

Frequently asked questions

Is react-bootstrap free to use?

Yes. React-Bootstrap is released under the MIT licence, as listed in its project information. Check the licence file in the repository for the full terms.

What do I need to install react-bootstrap?

The README lists Node.js, which includes npm, as the prerequisite. The install method it describes is through a package manager. To work on the source, clone the repository and run npm run bootstrap.

Which react-bootstrap version should I use with Bootstrap 5?

The README's compatibility table pairs Bootstrap 5.x with React-Bootstrap 2.x. Using the wrong pairing is a common source of problems, so match the versions before you start.

Can I use react-bootstrap with Bootstrap 4?

Yes, but the README pairs Bootstrap 4.x with React-Bootstrap 1.x and marks that line as not maintained. If you need active maintenance, move to version 2 by following the migration guide.

What are the alternatives to react-bootstrap?

Projects listed as comparable include reactstrap, react-bootstrap-extended and Material UI. Material UI is a different design system and does not use Bootstrap styles, so it suits projects that are not built on Bootstrap.

Why do the components look unstyled?

React-Bootstrap assumes Bootstrap's styles are available in your app. If Bootstrap's CSS is not loaded, or the versions do not match, the components will not look as expected. Check that your Bootstrap version pairs with your React-Bootstrap version.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use React-Bootstrap if your React app already uses Bootstrap 5 and you want its components as React pieces. Pick a different option if your project does not use Bootstrap, or if you need Bootstrap 3 or 4 support that is actively maintained.

Install options & downloads