How to Use Bootstrap in a React Project (Beginner Guide)

Source: Dev.to

Introduction

In this blog, we’ll discuss what Bootstrap is, how to use Bootstrap in a React project, and why we use Bootstrap. First, understand what Bootstrap is:

Bootstrap is a powerful, feature‑packed frontend toolkit. Build anything—from prototype to production—in minutes. — Bootstrap Official Website

Why Use Bootstrap with React?

Bootstrap helps developers build UI components faster by providing pre‑built components that can be customized using utility classes. It is especially helpful for beginners learning React because they can focus on React concepts rather than writing CSS from scratch.

Note: Bootstrap isn’t ideal for projects that require highly custom UIs, but it’s a great resource for learning and rapid prototyping.

Prerequisites

To follow along with this beginner guide, you need:

• Basic React knowledge.
• Node.js installed on your system.
• A React project (you can create one with Vite):

npm create vite@latest project-name

Installing Bootstrap in React

1️⃣ Install via npm

Run one of the following commands in your terminal:

npm install bootstrap@5.3.8
# or, using the short flag
npm i bootstrap@5.3.8

The command installs Bootstrap 5.3.8 (or the latest version) into your project. You’ll see output similar to the screenshot below:

You can verify the installation in package.json:

Note: The exact version may differ. Check the official Bootstrap website for the latest release.

2️⃣ Import Bootstrap CSS

Add the following import to main.jsx (or index.js if you prefer):

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

Note: No jQuery is required to use Bootstrap with React.

Using Bootstrap Classes in React Components

Now you can apply Bootstrap classes directly in your JSX. Example:

function App() {
  return (
    <>
      <div className="container">
        Hello World! - Styled using Bootstrap
      </div>
    </>
  );
}

export default App;

Reminder: Use className instead of class in JSX because class is a reserved JavaScript keyword.

Common Mistakes to Avoid

• Using class instead of className.
• Importing Bootstrap’s JavaScript bundle when it isn’t needed.
• Combining Bootstrap with too many other UI libraries, which can cause style conflicts.

Conclusion

In this guide we covered:

• What Bootstrap is.
• How to install and import it in a React project.
• How to use Bootstrap classes in React components.

Bootstrap is a valuable tool for beginners, rapid prototyping, and small‑to‑medium projects. While it may not suit highly custom designs, it speeds up UI development and lets you focus on core React concepts.

Important Links

• Get started with Bootstrap · Bootstrap v5.3

• Node.js — Run JavaScript Everywhere

• What Are Props in React? A Beginner‑Friendly Guide

• Conditional Rendering in React: A Practical Guide for Beginners

• How to Use map() in React (With Simple Examples)

• How to Create a React App Using Vite (Step‑by‑Step Guide for Beginners)

• Create a React App Using Vite – Step‑by‑Step Guide for Beginners
  (the original link was missing; keep the title as a placeholder)

• Understanding React Project Structure Created by Vite (Beginner’s Guide)

• React Fragments Explained: How to Group Elements Without Extra DOM Nodes

• React Components Explained: A Beginner‑Friendly Guide with Examples