How to Add Bootstrap in React JS Using NPM

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