Bootstrap with React

Introduction

Writing every single style rule by hand is not always the best use of your time, especially for common UI patterns like buttons, cards, and grids that have been solved thousands of times already. Bootstrap is one of the most popular CSS frameworks for exactly this reason — it ships a huge set of ready-made classes you can apply directly to your markup.

Because Bootstrap is just CSS (plus some optional JavaScript for things like modals), it works in React with almost no special setup: you install the package, import its stylesheet once, and then use its class names in your JSX exactly like you would in the className attribute of any element. This lesson walks through that setup, shows practical examples, and introduces react-bootstrap, a companion library that wraps Bootstrap's markup and behavior in ready-made React components.

Installing Bootstrap

Bootstrap is distributed as an npm package, just like any other JavaScript dependency. Install it into your React project with npm.

npm install bootstrap

Once installed, import Bootstrap's compiled CSS file once, typically at the top level of your app — in main.jsx, index.js, or App.jsx — so its styles apply globally across every component.

import 'bootstrap/dist/css/bootstrap.min.css';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

Using Bootstrap Classes in JSX

Once the stylesheet is loaded, Bootstrap's classes behave exactly like any other CSS class — you apply them through the className attribute in JSX (remember, className instead of HTML's class).

Example: A Bootstrap Card

Here is a simple profile card built entirely with Bootstrap's card component classes and spacing utilities — no custom CSS file needed at all.

function ProfileCard() {
  return (
    <div className="card" style={{ width: '18rem' }}>
      <div className="card-body">
        <h5 className="card-title">Amol Chipte</h5>
        <h6 className="card-subtitle mb-2 text-muted">Frontend Developer</h6>
        <p className="card-text">Builds fast, accessible interfaces with React.</p>
        <a href="#" className="btn btn-primary">View Profile</a>
      </div>
    </div>
  );
}

export default ProfileCard;

A bordered card with a title, subtitle, description paragraph, and a blue "View Profile" button.

Example: A Bootstrap Button

Bootstrap ships several ready-made button variants. Combining btn with a variant class like btn-success gives you a fully styled, accessible button with zero custom CSS.

function SubmitButton({ onClick }) {
  return (
    <button type="button" className="btn btn-success px-4 py-2" onClick={onClick}>
      Submit
    </button>
  );
}

export default SubmitButton;

A green, rounded "Submit" button with comfortable horizontal and vertical padding.

react-bootstrap: Component Wrappers

Using className strings works well, but it means you are still writing markup structure by hand and remembering exact class name combinations. react-bootstrap is a separate library that wraps Bootstrap's components and behavior into actual React components, like <Button> and <Card>, so you write JSX instead of memorizing class names.

npm install react-bootstrap bootstrap

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

function ProfileCard() {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Body>
        <Card.Title>Amol Chipte</Card.Title>
        <Card.Text>Builds fast, accessible interfaces with React.</Card.Text>
        <Button variant="primary">View Profile</Button>
      </Card.Body>
    </Card>
  );
}

Plain Bootstrap vs react-bootstrap

Both approaches load the same underlying Bootstrap styles, so the choice mostly comes down to how much you want React managing the markup and behavior for you.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Bootstrap gives you a large, battle-tested set of CSS classes you can apply directly in JSX with almost no setup, making it a fast way to build clean, consistent interfaces without writing custom CSS. react-bootstrap takes this further by wrapping the same styles into ready-made React components for more complex, interactive widgets.

This wraps up the styling section of the course. Next, you will move on to React Fragments, a small but handy feature for returning multiple elements from a component without adding an extra wrapper node to the DOM.