What it is
React Bootstrap is a popular UI framework that rebuilds Bootstrap components entirely with React. It removes jQuery dependencies while keeping the same look and feel of traditional Bootstrap.
React Bootstrap provides Bootstrap components like buttons, modals, forms, navbars, and grids as React components. Styling comes from Bootstrap CSS, while behavior is handled by React.
Installation
npm install react-bootstrap bootstrapGetting started
The smallest useful thing you can do with it, and what each part means.
import Button from 'react-bootstrap/Button';
<Button variant="primary">Click Me</Button>import Alert from 'react-bootstrap/Alert';
<Alert variant="success">This is a success alert!</Alert>Advanced usage
Where the library earns its place over a simpler alternative.
import { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
function Demo() {
const [show, setShow] = useState(false);
return (
<>
<Button onClick={() => setShow(true)}>Open Modal</Button>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton>
<Modal.Title>React Bootstrap Modal</Modal.Title>
</Modal.Header>
<Modal.Body>Modal content goes here.</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setShow(false)}>Close</Button>
</Modal.Footer>
</Modal>
</>
);
}import { Navbar, Nav, Container } from 'react-bootstrap';
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home">MyApp</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Components not styled
- Ensure Bootstrap CSS is correctly imported in your project.
- Modal backdrop not working
- Check that React Bootstrap and Bootstrap versions are compatible.
- Build size too large
- Import components individually (e.g., `import Button from 'react-bootstrap/Button'`) instead of the entire library.
Best practices
- Always include Bootstrap’s CSS either via CDN or npm for proper styling.
- Use React Bootstrap components instead of raw Bootstrap JS plugins to avoid conflicts.
- Combine React Bootstrap with Bootstrap’s grid system for responsive layouts.
- Customize Bootstrap themes using SASS variables or CSS overrides if needed.
- Avoid mixing jQuery-based Bootstrap plugins with React Bootstrap components.
Background
Why it exists, and what it was reacting to.
React Bootstrap was created as an alternative to using Bootstrap’s JavaScript plugins, which relied heavily on jQuery. By rewriting components in React, it provides a more modern, declarative approach, making it easier to integrate with React applications while retaining the familiarity of Bootstrap’s styling.