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

#bootstrap #webdev #react #beginners

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. —- From 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 good for beginners who are learning React. This allows beginners to focus on learning React concepts rather than writing CSS. Rather than writing the styles, i.e., CSS of the component. But it comes with its costs. Bootstrap is not ideal for projects with highly custom UIs. From a beginner’s point of view, it’s a great resource that boosts their learning speed by focusing on concepts.

Prerequisites

To follow along with this beginner guide, there are some prerequisites. These are:

You should have basic React knowledge.
You must have Node.js installed on your system.
You should have created a React project. If you haven’t, you can read this guide or run this command in your terminal:
```
npm create vite@latest project-name
```

Installing Bootstrap in React

For installing Bootstrap in your React project, follow these steps:

1- Install via npm

If you have Node.js installed on your system, then you can run this command in your terminal to install Bootstrap:

npm install bootstrap@5.3.8

or simply (replacing install with i in command):

npm i bootstrap@5.3.8

This command will install the Bootstrap version 5.3.8 package in your React project. When you run this command in your terminal, it will install like this:

You can also verify it from package.json. If the package is installed successfully, it will be listed in the dependencies in package.json.

Note: The version of Bootstrap may be different. At the time of publishing this blog, the latest version is 5.3.8. You can check for the latest version from the official Bootstrap website.

2- Import Bootstrap CSS in `main.jsx` or `index.js`

Now, to use Bootstrap in a React project, import Bootstrap in main.jsx or index.js. Add this line in main.jsx.

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

Note: To use Bootstrap in React, there is no need for jQuery.

Using Bootstrap Classes in React Components

Now, as we have imported Bootstrap, we can use Bootstrap classes in our projects. I’m showing you a simple example.

function App() {
  return (
    <>
      <h3 className="font-monospace bg-success text-white">
        Hello World! - Styled using Bootstrap
      </h3>
    </>
  );
}
export default App;

Note: I have not used class, instead, I used className. The word className is used to add classes in a React component because class is a keyword in JavaScript. So, the word class is not used.

Common Mistakes to Avoid

Using class instead of className
Importing Bootstrap JS unnecessarily
Mixing Bootstrap with too many other UI libraries

Conclusion

In this guide, we learned what Bootstrap is and how to install, import, and use it in a React project. Bootstrap can be a helpful tool for beginners who want to build user interfaces quickly while focusing on core React concepts. While it may not be suitable for highly customized designs, it works well for learning, prototyping, and small to medium projects.