Bootstrap is a popular CSS framework that provides ready-made classes and components for creating responsive and attractive user interfaces. Bootstrap can be used with React to quickly build layouts, buttons, forms, cards, navigation bars, alerts, and other UI elements.
Bootstrap is a front-end CSS framework containing reusable styles and components.
It helps developers create responsive websites without writing every CSS rule from scratch.
React and Bootstrap can work together to create reusable and responsive interfaces.
Bootstrap can help you:
Bootstrap can be installed using npm.
npm install bootstrapAfter installation, Bootstrap appears in the project's dependencies.
After installing Bootstrap, import its CSS into your React entry file.
import "bootstrap/dist/css/bootstrap.min.css";
For example, this can be placed in main.jsx.
Some Bootstrap interactive components require Bootstrap's JavaScript bundle.
import "bootstrap/dist/js/bootstrap.bundle.min.js";The bundle includes Bootstrap's JavaScript functionality and its required Popper dependency.
The container class provides a responsive fixed-width container.
function App() {
return (
<div className="container">
<h1>
React with Bootstrap
</h1>
</div>
);
}
The container-fluid class uses the full available width.
<div className="container-fluid">
<h1>
Full Width Layout
</h1>
</div>Bootstrap provides a grid system based on rows and columns.
<div className="container">
<div className="row">
<div className="col-md-6">
Left Column
</div>
<div className="col-md-6">
Right Column
</div>
</div>
</div>Bootstrap columns can be used to divide a row into responsive sections.
<div className="row">
<div className="col-md-4">
Column 1
</div>
<div className="col-md-4">
Column 2
</div>
<div className="col-md-4">
Column 3
</div>
</div>
Three col-md-4 columns can occupy one complete Bootstrap row.
Bootstrap provides predefined button classes.
<button className="btn btn-primary">
Save
</button>
<button className="btn btn-success">
Submit
</button>
<button className="btn btn-danger">
Delete
</button>Bootstrap provides different button sizes.
<button className="btn btn-primary btn-sm">
Small
</button>
<button className="btn btn-primary">
Normal
</button>
<button className="btn btn-primary btn-lg">
Large
</button>Cards are useful for displaying grouped information.
<div className="card">
<div className="card-body">
<h5 className="card-title">
React Course
</h5>
<p className="card-text">
Learn React step by step.
</p>
<button className="btn btn-primary">
Start
</button>
</div>
</div>Alerts can display messages to users.
<div className="alert alert-success">
Registration successful!
</div>
<div className="alert alert-danger">
Something went wrong.
</div>Bootstrap provides classes for styling form controls.
<div className="mb-3">
<label className="form-label">
Email
</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
/>
</div>React state can control a Bootstrap-styled form input.
const [name, setName] =
useState("");
return (
<input
type="text"
className="form-control"
value={name}
onChange={e =>
setName(
e.target.value
)
}
/>
);Bootstrap provides classes for creating responsive navigation bars.
<nav className="navbar navbar-expand-lg bg-dark">
<div className="container">
<a
className="navbar-brand text-white"
href="#"
>
My App
</a>
</div>
</nav>Bootstrap buttons can use normal React event handlers.
function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<button
className="btn btn-primary"
onClick={handleClick}
>
Click Me
</button>
);
}Bootstrap provides margin and padding utility classes.
<div className="mt-4">
Content
</div>
<div className="p-3">
Padded Content
</div>
<button className="mt-3 mb-3">
Button
</button>
Classes such as mt, mb, ms,
me, and p are useful for spacing.
Bootstrap provides utility classes for text alignment and appearance.
<p className="text-center">
Centered Text
</p>
<p className="text-primary">
Primary Text
</p>
<p className="fw-bold">
Bold Text
</p>Bootstrap provides responsive classes that can change layout behavior at different screen sizes.
<div className="col-12 col-md-6 col-lg-4">
Product
</div>This allows the same component to adapt to different screen widths.
React expressions can dynamically select Bootstrap classes.
const [active, setActive] =
useState(false);
return (
<button
className={
active
? "btn btn-success"
: "btn btn-secondary"
}
onClick={() =>
setActive(!active)
}
>
{active
? "Active"
: "Inactive"}
</button>
);Bootstrap table classes can be used to display data returned from React state or APIs.
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>React</td>
</tr>
</tbody>
</table>React can generate Bootstrap cards from an array.
const courses = [
"React",
"JavaScript",
"Python"
];
function Courses() {
return (
<div className="row">
{courses.map(
(course, index) => (
<div
className="col-md-4"
key={index}
>
<div className="card mb-3">
<div className="card-body">
<h5>
{course}
</h5>
<button
className="btn btn-primary"
>
Start
</button>
</div>
</div>
</div>
))}
</div>
);
}A modal can be displayed conditionally using React state.
const [show, setShow] =
useState(false);
return (
<>
<button
className="btn btn-primary"
onClick={() =>
setShow(true)
}
>
Open Modal
</button>
{show && (
<div className="modal d-block">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5>
Hello
</h5>
</div>
<div className="modal-body">
Modal content
</div>
<div className="modal-footer">
<button
className="btn btn-secondary"
onClick={() =>
setShow(false)
}
>
Close
</button>
</div>
</div>
</div>
</div>
)}
</>
);For production applications, Bootstrap's modal behavior can also be integrated with Bootstrap's JavaScript or a React-specific component library.
Bootstrap Icons is a separate icon library that can be installed and used with React.
npm install bootstrap-iconsThen import the icon CSS:
import "bootstrap-icons/font/bootstrap-icons.css";Example:
<i className="bi bi-house"></i>
<i className="bi bi-person"></i>Bootstrap classes can be placed directly inside reusable React components.
function CourseCard({
title,
description
}) {
return (
<div className="card mb-3">
<div className="card-body">
<h5 className="card-title">
{title}
</h5>
<p className="card-text">
{description}
</p>
<button
className="btn btn-primary"
>
Learn More
</button>
</div>
</div>
);
}| Bootstrap | React-Bootstrap |
|---|---|
| Primarily uses Bootstrap CSS classes | Provides React components for Bootstrap UI |
Example: className="btn btn-primary" |
Example: <Button> |
| Can be used directly with React | Designed specifically around React components |
Both approaches can be used to build React interfaces. The choice depends on the project's requirements and preferred development style.
import { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
function Course() {
const [started, setStarted] =
useState(false);
return (
<div className="container mt-5">
<div className="row">
<div className="col-md-8 mx-auto">
<div className="card shadow">
<div className="card-body">
<h1 className="card-title">
React Course
</h1>
<p className="card-text">
Learn React step by step.
</p>
{started && (
<div className="alert alert-success">
Course Started!
</div>
)}
<button
className="btn btn-primary"
onClick={() =>
setStarted(true)
}
>
Start Course
</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default Course;class instead of className.key when rendering lists.React
↓
Components
↓
Bootstrap Classes
↓
Responsive UInpm install bootstrap.className instead of HTML's class attribute.Question: Which attribute should be used instead of class when applying Bootstrap classes in JSX?