How to Add Bootstrap in React JS Using NPM

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In this quick article, we will see step by step how to add Bootstrap CSS library in a React App using NPM (Node Package Manager).

Adding Bootstrap, a popular CSS framework, to your React.js project can help you create responsive and visually appealing user interfaces. In this step-by-step guide, we will explore how to add Bootstrap to your React app using NPM (Node Package Manager), the preferred method for managing dependencies in a React project.

Steps to Add Bootstrap in React Using NPM

1. Create a new React app

Open your terminal or command prompt and navigate to the directory where you want to create your React app. Run the following command to create a new React app using create-react-app:

npx create-react-app my-app

This command creates a new directory named my-app and sets up a basic React project structure inside it.

2. Navigate into the app directory

Move into the newly created app directory by running the following command:

cd my-app

3. Install Bootstrap using NPM

In the terminal, run the following command to install Bootstrap as a dependency in your project:

$ npm install bootstrap --save

--save option add an entry in the package.json file

Open the src/index.js file and add the following code:

4. Import Bootstrap CSS in your app

Open the src/index.js file in your project's directory. Add the following import statement at the top of the file:

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

5. Start the development server

Start the development server by running the following command in the terminal:

npm start

This command starts the development server and opens your React app in the browser. You should now see Bootstrap styles being applied to your app.

6. Test Bootstrap styles

Add the below statement to display the heading at a center in the App component and see the result in the browser.

function App() {

  return (
    <div>
        <h1 className='text-center'>Hello World!</h1>>
    </div>
  )
}

export default App

With these steps, you have successfully added the Bootstrap CSS library to your React app using NPM. You can now use Bootstrap classes and components in your app's components to build responsive and stylish user interfaces.

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF