Bootstrap’s CSS works well in React. For interactive components such as dropdowns and modals, use React-Bootstrap rather than Bootstrap’s JavaScript plugins by default: Bootstrap warns that its JavaScript is not fully compatible with frameworks such as React, which manage the DOM themselves.
Choose how Bootstrap will work in your React app
Decide whether you need Bootstrap’s styling, interactive behavior, or both. React can use Bootstrap’s grid, typography, spacing utilities, and other CSS without handing DOM control to Bootstrap’s JavaScript.
| Approach | Best suited to | Trade-off |
|---|---|---|
| Bootstrap CSS only | Layouts, responsive utilities, and static components | Interactive behavior must be implemented separately or provided by React components. |
| React-Bootstrap with Bootstrap CSS | React-managed components such as dropdowns and modals, alongside Bootstrap styling | Install the component package and the stylesheet separately; use component APIs rather than Bootstrap’s JavaScript plugins. |
| Bootstrap CSS and vanilla Bootstrap JavaScript | Projects that specifically need Bootstrap’s official JavaScript plugins | Requires careful DOM boundaries and lifecycle management to avoid conflicts with React. |
Bootstrap describes its JavaScript as not fully compatible with frameworks such as React, Vue, and Angular because those frameworks assume full knowledge of the DOM. When both React and a Bootstrap plugin mutate the same interactive element, controls can become stuck or inconsistent. See Bootstrap’s JavaScript guidance.
Install Bootstrap 5 and React-Bootstrap
For a React app that needs Bootstrap styling and React-managed interactive components, install both packages:
#1 Best Overall
npm install react-bootstrap bootstrapYarn users can install the same packages with:
yarn add react-bootstrap bootstrapReact-Bootstrap does not bundle Bootstrap’s CSS, so installing the component package alone will not provide the stylesheet. Its documentation recommends consuming the library through npm and explains that CSS is not included because the package does not depend on one precise Bootstrap version. Import the stylesheet once in the application entry point—for example, src/index.js or src/main.jsx:
import 'bootstrap/dist/css/bootstrap.min.css';Then import the components where they are used. For example:
import Button from 'react-bootstrap/Button';
function SaveButton() {
return <Button variant="primary">Save</Button>;
}Individual component imports can reduce the code sent to the client compared with importing the entire library. Check the build output for your project rather than assuming a particular bundle-size result.
Match the React-Bootstrap and Bootstrap major versions
For Bootstrap 5, the React-Bootstrap compatibility table maps Bootstrap v5.x to React-Bootstrap v2.x. The table marks the Bootstrap v4.x and React-Bootstrap 1.x line, and the Bootstrap v3.x and React-Bootstrap 0.33.x line, as not maintained. Check the React-Bootstrap compatibility information before choosing versions; do not assume that arbitrary major versions work together.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The compatibility table does not establish a definitive React-version peer-dependency matrix. For the React version in your app, check the peer dependencies in the package metadata for the version you install.
Use Bootstrap CSS without React-Bootstrap
If the app only needs styling and static components, you can use Bootstrap’s CSS classes directly in React markup. For example, Bootstrap utility classes and grid classes can style ordinary elements without adding Bootstrap’s JavaScript:
function Notice() {
return <div className="alert alert-primary" role="alert">
Your changes have been saved.
</div>;
}In JSX, use className rather than the HTML attribute class. This CSS-only approach is useful for responsive layout, spacing, and typography when the component does not need Bootstrap-managed interaction.
Bootstrap also documents npm-based bundler imports, selective JavaScript plugin imports, Sass source integration, and Popper for plugins that require it. If you choose a vanilla Bootstrap plugin, keep its interactive DOM separate from React-managed updates where possible, and define how it is initialized and cleaned up.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
Style and customize the result
The precompiled CSS import is the simplest setup. If your team needs to change Sass variables or use mixins, integrate Bootstrap’s Sass source with the app’s bundler instead. Place custom overrides after Bootstrap so the CSS cascade is deliberate, and make sure the markup and class names you use match the Bootstrap major version installed in the project.
Avoid dropdown and modal conflicts
React-Bootstrap supplies React-oriented behavior for dropdowns, modals, tooltips, alerts, navbars, and similar components. Use those React-managed components when the app needs those interactions. Do not automatically add bootstrap.bundle.js when React-Bootstrap already provides the behavior: loading both implementations can create competing event handlers and DOM mutations.
If a project must use a vanilla Bootstrap plugin, document three things for that integration:
- DOM boundary: which elements the plugin may manipulate and which subtree remains under React’s control.
- Lifecycle: when the plugin is initialized and when it is destroyed or cleaned up.
- State ownership: which implementation is responsible for updating the interactive element and reflecting its state.
When a control becomes stuck or behaves inconsistently, check whether both a React component and a vanilla Bootstrap plugin are controlling the same element. Remove the duplicate behavior or isolate the plugin’s DOM boundary.
Quick Recap
Check the setup when components do not look or behave as expected
- Components render without Bootstrap styling: confirm that
bootstrap/dist/css/bootstrap.min.cssis imported once in the app’s entry point or global stylesheet. - Classes have unexpected effects: verify that the class names and component markup correspond to the Bootstrap major version you installed.
- Dropdowns or modals misbehave: check for Bootstrap JavaScript plugins running on elements already managed by React or React-Bootstrap.
- An installed package does not support your React version: inspect that package version’s peer-dependency metadata; the compatibility table alone does not settle React-version support.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
