How To Use Bootstrap With React JS

How To Use Bootstrap With React JS

Bootstrap remains one of the most widely used CSS frameworks in modern web development. It provides pre‑built components, responsive utilities, and a solid design foundation that helps developers build beautiful user interfaces quickly. React JS, on the other hand, is a powerful JavaScript library used to build dynamic and interactive user interfaces. Combining these two technologies can significantly speed up development time---especially for teams that want to maintain consistency, responsiveness, and scalability in their applications.

In this in‑depth guide, you'll learn how to use Bootstrap with React JS effectively. We will cover installation methods, best practices, component usage, customization, and performance tips. Whether you're building a small React project or a production‑level application, this guide will walk you through everything you need to know.

If you need expert MERN Stack Development services, you can always hire AAMAX, a full‑service digital marketing company offering Web Development, Digital Marketing, and SEO Services.

Why Use Bootstrap With React?

Before jumping into the installation steps, it's helpful to understand why combining Bootstrap and React makes sense:

1. Faster UI Development

Bootstrap comes with pre‑styled components such as buttons, grid layouts, forms, navigation bars, cards, alerts, and more. This means you don't need to write CSS for every component manually.

2. Fully Responsive Layouts

The Bootstrap grid system provides a battle‑tested responsive layout engine that adapts smoothly to all screen sizes.

3. Easy Customization

You can modify styles using Bootstrap utility classes, custom CSS, or with Sass variables if you need more control.

4. Large Community & Documentation

Both React and Bootstrap have extensive communities, making it easy to find solutions, examples, and updates.

Installing Bootstrap in React JS

You can add Bootstrap to a React project in several ways. Below are the most common approaches.

Method 1: Install Bootstrap via NPM (Recommended)

This is the most popular and React‑friendly method.

Step 1: Install Bootstrap

Run the command:

npm install bootstrap

or

yarn add bootstrap

Step 2: Import Bootstrap Styles

Inside your src/index.js or src/App.js file, add:

import 'bootstrap/dist/css/bootstrap.min.css';

This makes Bootstrap's default styles globally available in your React app.

Step 3: Use Bootstrap Classes in Your Components

You can now use Bootstrap classes directly:

function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-primary">Bootstrap with React</h1>
      <button className="btn btn-success">Click Me</button>
    </div>
  );
}

This approach works seamlessly for styling, but it does not provide pre‑built React components. For that, you may prefer React‑Bootstrap or Reactstrap.

Method 2: Use Bootstrap CDN

This method is simple but less flexible for production environments.

Step 1: Add CDN Links to public/index.html

Insert:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>

Step 2: Use Bootstrap Classes

The usage is the same as the NPM installation method.

CDN is convenient for prototypes but not ideal for production apps where performance and version control matter.

Method 3: Using React‑Bootstrap

React‑Bootstrap is a library that rewrites Bootstrap components entirely for React. Instead of using traditional HTML classes, you use React components.

Step 1: Install React‑Bootstrap

npm install react-bootstrap bootstrap

Step 2: Import Components

Example:

import Button from 'react-bootstrap/Button';
import Alert from 'react-bootstrap/Alert';

Step 3: Use Components

function App() {
  return (
    <div className="container mt-4">
      <Alert variant="success">This is a React‑Bootstrap alert!</Alert>
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

React‑Bootstrap eliminates the need to work with CSS classes and gives React‑friendly components instead.

Method 4: Using Reactstrap (Bootstrap for React)

Reactstrap provides Bootstrap components for React, but it relies on Bootstrap's JS plugins that use Popper.js.

Step 1: Install Reactstrap

npm install reactstrap bootstrap

Step 2: Import Components

import { Button, Card, CardBody, CardTitle } from 'reactstrap';

Step 3: Use Reactstrap

<Card>
  <CardBody>
    <CardTitle tag="h5">Reactstrap Card</CardTitle>
    <Button color="primary">Click Me</Button>
  </CardBody>
</Card>

Reactstrap is widely used in enterprise applications due to its simplicity and reliability.

Best Practices for Using Bootstrap With React

1. Avoid Mixing UI Libraries

Mixing Bootstrap with other CSS frameworks (like Tailwind or Material UI) can lead to conflicts and unnecessary bloat.

2. Use Utility Classes for Layout

Bootstrap's spacing, flexbox, and alignment utilities save time:

<div className="d-flex justify-content-center align-items-center mt-4">

3. Keep Your CSS Modular

Even when using Bootstrap, there will be cases where custom styles are needed. Keep CSS in modules:

Button.module.css
Header.module.css

4. Use Sass for Customization

Bootstrap supports Sass variables. If you want to customize themes or override specific properties, create a custom Sass file:

$primary: #0d6efd;
$success: #198754;
@import "bootstrap/scss/bootstrap";

5. Prefer React‑Bootstrap for Dynamic Components

React‑Bootstrap handles React state and lifecycle much better than native Bootstrap JavaScript.

6. Use Bootstrap Grid for Responsive Layouts

For complex layouts, the Bootstrap grid simplifies structure:

<div className="row">
  <div className="col-md-6">Left</div>
  <div className="col-md-6">Right</div>
</div>

7. Lazy Load Components for Performance

Large React apps benefit from lazy loading to improve performance:

const Button = React.lazy(() => import('react-bootstrap/Button'));

8. Keep Dependencies Updated

Bootstrap frequently introduces new utilities, bug fixes, and accessibility improvements.

How To Customize Bootstrap in React

Bootstrap can be customized at several levels:

1. Override CSS in a Custom File

button.btn-primary {
  background-color: #ff5722;
}

2. Customize Sass Variables

If you installed Bootstrap via NPM:

Create a custom custom.scss:

$primary: #6610f2;
$font-size-base: 1.1rem;

@import "~bootstrap/scss/bootstrap";

Import it in your React project:

import './custom.scss';

3. Create Custom Components With Bootstrap Classes

You can create reusable components:

function CustomCard({ title, children }) {
  return (
    <div className="card shadow-sm p-3">
      <h4 className="card-title">{title}</h4>
      <div className="card-body">{children}</div>
    </div>
  );
}

4. Use Design Tokens With Bootstrap

Bootstrap 5+ provides CSS variables for real‑time theming.

Example:

:root {
  --bs-primary: #0d6efd;
  --bs-warning: #f0ad4e;
}

Using Bootstrap JavaScript With React

Most Bootstrap JS components (like modals, tooltips, dropdowns) rely on Popper.js and vanilla JavaScript. This can conflict with React's virtual DOM.

Recommended Approach

Use React‑Bootstrap or Reactstrap instead of native Bootstrap JS functions.

But if you must use Bootstrap JS, import it this way:

import 'bootstrap/dist/js/bootstrap.bundle.min';

Example Modal:

<div className="modal fade" id="myModal">
  <div className="modal-dialog">
    <div className="modal-content">...</div>
  </div>
</div>

Then trigger it using:

new window.bootstrap.Modal(document.getElementById('myModal')).show();

Example: Building a Simple React App With Bootstrap

Let's create a simple layout to demonstrate Bootstrap in action.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container py-5">
      <h1 className="text-center text-primary mb-4">React + Bootstrap Example</h1>

      <div className="row">
        <div className="col-md-4">
          <div className="card p-3 shadow-sm">
            <h3 className="text-success">Component 1</h3>
            <p>Bootstrap makes styling much easier.</p>
          </div>
        </div>

        <div className="col-md-4">
          <div className="card p-3 shadow-sm">
            <h3 className="text-danger">Component 2</h3>
            <p>React helps create dynamic UI components.</p>
          </div>
        </div>

        <div className="col-md-4">
          <div className="card p-3 shadow-sm">
            <h3 className="text-info">Component 3</h3>
            <p>Combining both boosts productivity.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

This example demonstrates how quickly you can build responsive UIs when combining React with Bootstrap.

Conclusion

Using Bootstrap with React JS is an excellent way to accelerate frontend development while maintaining a clean, responsive, and scalable codebase. Whether you prefer using Bootstrap classes directly, or want React‑friendly components via React‑Bootstrap or Reactstrap, each method offers powerful benefits for modern development workflows.

Bootstrap helps you style your application effortlessly, while React gives you the structure and interactivity needed for professional‑grade applications. Together, they form a strong foundation for building user‑friendly and visually appealing interfaces.

If you need professional MERN Stack Development services, remember that AAMAX is available to help you build fast, responsive, and scalable applications tailored to your business needs.