Bootstrap 5 in a React App

3 min read

Bootstrap is the most popular CSS framework for building responsive, mobile-first websites. It gives you a battle-tested grid system, a library of ready-made components, and a huge set of utility classes so you spend less time writing repetitive CSS.

Installation in a React App

Install Bootstrap 5 (stable) via npm:

1npm install bootstrap
2

Then import the CSS in your

1index.js

1_app.js

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

If you also need JavaScript-powered components (dropdowns, modals, tooltips), import the bundle too:

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

The 12-Column Grid System

Bootstrap's grid is built on flexbox. You wrap rows of columns inside a container:

1<div className="container">
2  <div className="row">
3    <div className="col-md-8">Main content</div>
4    <div className="col-md-4">Sidebar</div>
5  </div>
6</div>
7

Columns stack vertically on small screens and sit side-by-side at the

1md

| Infix | Breakpoint | Min-width | |-------|-----------|-----------| | (none) | Extra small | < 576 px | |

1sm

1md

1lg

1xl

1xxl

A common pattern for a three-column layout that collapses to full-width on mobile:

1<div className="row row-cols-1 row-cols-md-3 g-4">
2  <div className="col"><CardComponent /></div>
3  <div className="col"><CardComponent /></div>
4  <div className="col"><CardComponent /></div>
5</div>
6

The

1g-4

Useful Utility Classes

Bootstrap ships with hundreds of utilities so you rarely need to write custom CSS for common patterns:

1{/* Spacing */}
2<div className="mt-4 mb-2 px-3">...</div>
3
4{/* Flexbox alignment */}
5<div className="d-flex justify-content-between align-items-center">...</div>
6
7{/* Text */}
8<p className="text-muted fw-bold text-center">...</p>
9
10{/* Display */}
11<div className="d-none d-md-block">Hidden on mobile</div>
12

Spacing scale runs from

10

15

1auto

1mt-md-4

Common Components

Bootstrap components map almost one-to-one to JSX class names:

1{/* Button variants */}
2<button className="btn btn-primary">Save</button>
3<button className="btn btn-outline-secondary">Cancel</button>
4
5{/* Alert */}
6<div className="alert alert-warning" role="alert">
7  Something needs your attention.
8</div>
9
10{/* Badge */}
11<span className="badge bg-success">New</span>
12
13{/* Card */}
14<div className="card shadow-sm">
15  <div className="card-body">
16    <h5 className="card-title">Hello</h5>
17    <p className="card-text">Card content here.</p>
18  </div>
19</div>
20

Bootstrap Icons

Bootstrap 5 ships 2,000+ free SVG icons as a separate package:

1npm install bootstrap-icons
2

Import the CSS in

1index.js

1import 'bootstrap-icons/font/bootstrap-icons.css';
2

Then use icons by class name:

1<i className="bi bi-github fs-4 me-2"></i>
2<i className="bi bi-check-circle-fill text-success"></i>
3

The

1fs-*

1me-*

1ms-*

Tips

• Use

  1container-fluid

  for full-width layouts and

  1container

  for a centered max-width layout.
• Prefer Bootstrap's utility classes over inline styles — it keeps markup consistent and makes responsive overrides straightforward.
• If you only need a subset of Bootstrap, install the

  1sass

  package and import individual SCSS files to keep bundle size down.

For the full component reference, see the Bootstrap 5 documentation and the companion Bootstrap Icons gallery.