React-Bootstrap is a complete re-implementation of the Bootstrap 5 components using React, removing the need for jQuery. It provides a set of accessible and customizable React components that mirror Bootstrap's visual style and functionality. The current stable version is 2.10.10, with active development on a new major version (v3.0.0-beta.x) that introduces further breaking changes and improvements like enhanced ESM support. This library is a popular choice for developers who want to leverage Bootstrap's extensive styling framework within a React application without the performance overhead or potential conflicts of integrating traditional Bootstrap's JavaScript. Releases are frequent for both maintenance and beta branches, ensuring timely bug fixes and new features.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
For optimal bundle size, import individual components directly from their sub-paths.
import Button from 'react-bootstrap/Button';
ESM imports are the recommended pattern. CommonJS `require` is not officially supported or documented for modern versions.
import Modal from 'react-bootstrap/Modal';
Sub-component imports like `Navbar.Brand` are accessed via the main Navbar component object, e.g., `Navbar.Brand`.
import Navbar from 'react-bootstrap/Navbar';
The `Form` component also exports sub-components like `Form.Control` and `Form.Group`.
import Form from 'react-bootstrap/Form';
Demonstrates a basic React-Bootstrap setup with a button that opens a modal containing a form, showcasing component imports and state management.
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Container from 'react-bootstrap/Container';
function MyFormModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
console.log('Form submitted!');
handleClose();
};
return (
<Container className="p-4">
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="secondary" onClick={handleClose} className="me-2">
Close
</Button>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</Container>
);
}
export default MyFormModal;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.