# React-Bootstrap: Bootstrap 5 Components as Real React Components > React-Bootstrap replaces jQuery-driven Bootstrap markup with React components that own their state. Here is how the install works, what the Bootstrap 5 version pairing demands, and where the library is the wrong tool. **react-bootstrap/react-bootstrap** — Bootstrap components built with React - Repository: https://github.com/react-bootstrap/react-bootstrap - Website: https://react-bootstrap.github.io/ - Stars: 22,602 · Forks: 3,568 - Language: TypeScript - License: MIT - Published: 2026-09-21 · Updated: 2026-09-21 · Language: en - Canonical page: https://hysenlabs.com/projects/react-bootstrap-react-bootstrap ## The jQuery problem React-Bootstrap removes Plain Bootstrap ships JavaScript plugins that attach behaviour to DOM nodes through data attributes. In a React app that means two systems writing to the same element: React owns the render, and Bootstrap's plugin mutates the DOM underneath it. React-Bootstrap's answer is to reimplement those components in React so the open state of a modal or a dropdown lives in component state rather than in a plugin instance. The audience is React developers who want Bootstrap's grid, spacing and component vocabulary without importing Bootstrap's JavaScript. The README states the project is Bootstrap 5 components built with React, and the package description repeats that framing. If your team has already decided against a utility-first CSS approach, this is the shortest path from a Bootstrap design to a React implementation. ## Version pairing is the first decision, not the last The README carries a compatibility table, and it is the single most important thing on the page. Bootstrap v5.x pairs with React-Bootstrap 2.x. Bootstrap v4.x pairs with 1.x, which the table marks as not maintained. Bootstrap v3.x pairs with 0.33.x, also marked not maintained. That means the version you install is not a free choice: it is determined by the Bootstrap stylesheet you are already loading. The repository's package.json shows version 3.0.0-beta.5, and the recent releases list shows beta.4 and beta.3 landing on the same day, 2025-09-04, with beta.5 following on 2025-09-22. A beta line moving that quickly is a signal to treat 3.x as a moving target. If you need a stable dependency today, the compatibility table points you at the 2.x line, not at what the repository's own package.json currently declares. ## Installing it and rendering a first navbar The package is published to npm as react-bootstrap, and the repository points readers to a separate code-sandbox-examples repository for runnable examples. The README does not document a consumer install command, and it does not document a CSS import path, so neither is shown here. What the README does document is the contributor workflow: Yarn is the package manager of choice, and yarn run bootstrap installs all the needed dependencies. The package's exports map in package.json is the consumer-facing contract: require resolves to cjs/index.js with cjs/index.d.ts types, and import resolves to lib/index.js with lib/index.d.ts types. That is what you check when a component import fails to resolve or when tree shaking does not happen, because a bundler that picks the CommonJS condition will not drop unused components even though sideEffects is set to false. ## How the package is actually built and shipped The build script in package.json runs rimraf lib, then builds ESM output, ESM type declarations, CJS output and CJS type declarations in sequence. Babel compiles src into lib with the esm environment, then into cjs with the cjs environment, ignoring .d.ts files during the transpile step. The CJS directory gets its own package.json containing a commonjs type field, which is how the package keeps one root manifest while shipping two module formats. The exports map reflects that split: require resolves to cjs/index.js with cjs/index.d.ts types, and import resolves to lib/index.js with lib/index.d.ts types. The files field publishes only CHANGELOG.md, lib and cjs. For a consumer this matters in one practical way: if your bundler picks the wrong condition, you can end up with the CommonJS build and lose tree shaking. The sideEffects flag exists to tell bundlers that unused components can be dropped, but that only holds if the ESM path is the one being resolved. ## Working on the library itself is a Yarn workflow The README's local setup section is aimed at contributors, not consumers, and it is explicit that Yarn is the package manager of choice. Running yarn run bootstrap installs dependencies for the root and for the www directory, because the docs site is a separate workspace inside the same repository. From there the documented commands are yarn test for a single test run, yarn run tdd for watch mode, yarn start for a local docs site, and yarn run build for a local library build. The repository layout supports this: there is a src directory, test and tests directories, a www directory, a vitest.config.mts and vitest.setup.ts pair, and an eslint.config.mjs. Note that the README's CI badges still reference Travis CI alongside GitHub Actions, which suggests the README has not been fully kept in step with the current pipeline. Treat the badge row as decoration rather than as documentation. ## Where React-Bootstrap is the wrong choice The clearest failure mode is a Bootstrap version mismatch. If your project loads Bootstrap 4 CSS and you install the 2.x line, the component markup will not match the classes your stylesheet defines, and the breakage will look like a styling bug rather than a version bug. The compatibility table is the only place the README addresses this, and it does so in three rows with no further detail. The second limitation is the beta status of the 3.x line: the repository's own package.json declares 3.0.0-beta.5 while the README's table still frames the current stable pairing as 2.x with Bootstrap 5.x, so the two sources disagree about what you should install. Third, React-Bootstrap does not remove the CSS dependency. You still ship Bootstrap's stylesheet, and the components are a behavioural and structural layer on top of it. If your reason for considering this library is bundle size, it does not solve that problem. If your reason is that you want Bootstrap's look with React's component model, it does. ## Versus a utility-first CSS approach The real alternative for most teams weighing React-Bootstrap is a utility-first CSS framework such as Tailwind, where you compose styles from class names in your own JSX and there is no component library mediating the markup. The difference in approach is structural, not cosmetic. React-Bootstrap gives you named components with props and internal state, so a dropdown's open state is managed for you and the DOM structure is fixed by the library. A utility-first approach gives you no components at all: you write the markup and the state yourself, and you get full control over both. The trade-off runs in both directions. React-Bootstrap is faster to start with if your design already resembles Bootstrap, and slower the moment your design diverges from it, because you are overriding component output rather than writing markup directly. The README lists two related modules worth knowing about: react-router-bootstrap for React Router integration, and an Awesome React Bootstrap Components list that collects additional components such as off-canvas navbar, switch and sliders. Neither is part of the core package. ## Licence and the cost of staying current The package is MIT licensed, and the LICENSE file sits at the repository root. MIT is permissive: it allows commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is the extent of what the repository states, and it is not legal advice. The upgrade cost is the more interesting question. The README maintains two separate migration guides, one for Bootstrap 4 to 5 and one for Bootstrap 3 to 4, which tells you that version transitions here are documented as real work rather than as drop-in bumps. The compatibility table also marks the 1.x and 0.33.x lines as not maintained, so a project that stays on Bootstrap 4 is on a line the maintainers have stopped supporting. The last push to the default branch was on 2026-09-18, three days before this writing, so the repository is being worked on; but activity on master is not the same as support for the older version lines, and the README is the authority on which lines are maintained. ## Conclusion Adopt React-Bootstrap when you already want Bootstrap's visual language in a React app and you are willing to pin the 2.x line against Bootstrap 5.x, or to track the 3.0.0 beta. Do not adopt it if you are on Bootstrap 4 and cannot migrate, because the README marks 1.x as not maintained, and do not adopt it if you want no CSS framework in the bundle at all. Before committing, check the Bootstrap compatibility table against the version you install, confirm your bundler resolves the ESM entry at lib/index.js rather than the CJS entry at cjs/index.js, and read the migration guide at react-bootstrap.github.io/docs/migrating if you are coming from V1. ## FAQ ### How do I install React-Bootstrap? The package is published to npm as react-bootstrap, and the README pairs it with a Bootstrap version through the compatibility table. The README does not give a consumer install command, so check the version table before choosing which release to install. ### What is the latest version of React-Bootstrap? The repository's package.json declares version 3.0.0-beta.5, and the recent releases list shows v3.0.0-beta.5 published on 2025-09-22. The README's compatibility table, however, pairs the stable line 2.x with Bootstrap 5.x, so the version you should install depends on which Bootstrap version you are using. ### What is React-Bootstrap used for? It provides Bootstrap 5 components built with React, so that Bootstrap's markup and behaviour are expressed as React components rather than as DOM-mutating plugins. The README describes it as Bootstrap 5 components built with React and maintains a table mapping Bootstrap versions to React-Bootstrap versions. ### How do I use React-Bootstrap in a React app? You install the react-bootstrap package and use its components in place of Bootstrap's data-attribute driven markup, so component state such as an open dropdown lives in React rather than in a plugin. The README points to a separate code-sandbox-examples repository and a CodeSandbox workspace for runnable examples. ### How do I set up React-Bootstrap? The README's setup instructions are aimed at the repository itself: Yarn is the package manager of choice, and yarn run bootstrap installs all the needed dependencies. From there yarn test runs the tests once, yarn start starts a local copy of the docs site, and yarn run build builds a local copy of the library. ### What is Bootstrap in React? React-Bootstrap is the project that provides Bootstrap 5 components built with React, which is the pairing the README describes. The README's compatibility table is the reference for which React-Bootstrap version matches which Bootstrap version. ## Sources - [License: MIT](https://github.com/react-bootstrap/react-bootstrap/blob/master/LICENSE) - [Project website](https://react-bootstrap.github.io/) - [react-bootstrap/react-bootstrap on GitHub](https://github.com/react-bootstrap/react-bootstrap) - [README](https://github.com/react-bootstrap/react-bootstrap/blob/master/README.md) - [Releases](https://github.com/react-bootstrap/react-bootstrap/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/react-bootstrap-react-bootstrap