React Bootstrap: Syntax, Usage, and Examples

React Bootstrap is a library that replaces Bootstrap’s traditional jQuery-based JavaScript with fully React-compatible components. Instead of writing raw HTML with Bootstrap classes and relying on external JavaScript, you use reusable React components styled with Bootstrap.

How to Use React Bootstrap

To use Bootstrap, start by installing the package. You don’t need jQuery or Bootstrap's JavaScript files— Bootstrap handles everything with React components.

Installation

Install React Bootstrap using npm or yarn:

npm install react-bootstrap bootstrap

You also need to import the Bootstrap CSS into your app:

// index.js or App.js
import 'bootstrap/dist/css/bootstrap.min.css';

Once you’ve installed and imported it, you can start using React components like <Button>, <Modal>, or <Form> directly.

When to Use Bootstrap

React Bootstrap is ideal for developers who want to use Bootstrap styles but prefer using React components instead of raw HTML and jQuery. Here are a few good use cases:

Rapid UI Prototyping

React Bootstrap provides pre-styled components out of the box, so you can build prototypes quickly. No need to write custom CSS or manually apply class names.

Consistent UI Design

By using standardized Bootstrap components like cards, forms, and modals, your app maintains a consistent look and feel across pages.

Replacing jQuery in Legacy Projects

If you’re migrating from a jQuery-based Bootstrap setup, React Bootstrap lets you keep the familiar styles but with a modern component-driven approach.

Examples of Bootstrap

Below are some common components and patterns you’ll use when working with Bootstrap.

Example 1: React Bootstrap Button

import { Button } from 'react-bootstrap';

function App() {
  return (
    <Button variant="primary">
      Click Me
    </Button>
  );
}

This renders a blue primary-styled button. You can use other variants like "secondary", "danger", or "success".

The <Button> component is one of the most commonly used Bootstrap components.

Example 2: React Bootstrap Modal

import { Modal, Button } from 'react-bootstrap';
import { useState } from 'react';

function ModalExample() {
  const [show, setShow] = useState(false);

  return (
    <><Button variant="info" 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>This is a modal using React Bootstrap.</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(false)}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

This example demonstrates how to toggle a Bootstrap modal with local state. It provides a cleaner approach than manually toggling modal visibility with jQuery.

Example 3: React Bootstrap Form

import { Form, Button } from 'react-bootstrap';

function SignupForm() {
  return (
    <Form>
      <Form.Group controlId="formEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
      </Form.Group>

      <Form.Group controlId="formPassword" className="mt-3">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>

      <Button variant="primary" type="submit" className="mt-3">
        Submit
      </Button>
    </Form>
  );
}

The Bootstrap form component supports validation, styling, and input grouping—without having to remember individual class names.

Example 4: Bootstrap Dropdown

import { Dropdown } from 'react-bootstrap';

function DropdownExample() {
  return (
    <Dropdown>
      <Dropdown.Toggle variant="success">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

This example shows how to build a Bootstrap dropdown with nested items using React components rather than raw markup.

Learn More About React Bootstrap

React with Bootstrap vs Traditional Bootstrap

If you’ve worked with standard Bootstrap before, using React with Bootstrap might feel more structured. You don’t need to write classes like btn btn-primary manually—instead, components like <Button variant="primary"> handle styling for you.

The big difference in the React vs Bootstrap comparison is that React Bootstrap avoids direct DOM manipulation. Instead of toggling classes via jQuery, React manages state and passes it into components. This makes code easier to test and debug.

For example:

Traditional Bootstrap:

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

React Bootstrap:

<Button variant="primary" onClick={() => setShow(true)}>Open</Button>
<Modal show={show} onHide={() => setShow(false)}>...</Modal>

In short, Bootstrap React gives you the styling of Bootstrap, but in a React-friendly format.

Customizing Themes and Styles

React Bootstrap components work with any Bootstrap 5 theme or custom SCSS. You can override variables or use tools like Bootstrap Theme Builder to customize the look of your entire UI.

You can also use utility classes directly alongside components:

<Button className="w-100 mt-4" variant="outline-secondary">
  Full Width Button
</Button>

Creating Your Own Bootstrap Components

You’re not limited to built-in components. You can build your own components using Bootstrap’s grid, spacing, and typography classes.

function CardSection({ title, children }) {
  return (
    <div className="p-4 border rounded bg-light">
      <h4 className="mb-3">{title}</h4>
      {children}
    </div>
  );
}

This approach lets you standardize layout and design across your app while keeping your codebase clean and consistent.

Accessibility Features

All bootstrap react components include accessible markup by default. The modal component, for instance, manages focus trapping, ARIA roles, and escape key behavior without extra setup.

The button, form, dropdown, and modal elements all include semantic HTML and support for keyboard navigation.

Integration with Other Libraries

React Bootstrap plays nicely with tools like React Router or Formik.

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to="/dashboard">
  <Nav.Link>Dashboard</Nav.Link>
</LinkContainer>

This lets you use Bootstrap’s layout and style without losing out on advanced routing or form management.

You can also wrap React Bootstrap components in your logic-driven components:

function SubmitButton({ loading }) {
  return (
    <Button variant="primary" disabled={loading}>
      {loading ? "Saving..." : "Submit"}
    </Button>
  );
}

Mobile Responsiveness

Since React Bootstrap is built on Bootstrap 5, you get full responsiveness and grid support out of the box.

import { Container, Row, Col } from 'react-bootstrap';

function LayoutExample() {
  return (
    <Container>
      <Row>
        <Col sm={12} md={6}>Left</Col>
        <Col sm={12} md={6}>Right</Col>
      </Row>
    </Container>
  );
}

Your app adjusts across devices without custom media queries or CSS hacks.

React Bootstrap offers a smooth, component-driven way to use Bootstrap styles and layouts. It brings the benefits of Bootstrap’s battle-tested design system into the React ecosystem. With a full set of components—from modals to buttons to forms—React bootstrap is ideal for building responsive, accessible, and consistent interfaces in modern React apps.