How to Install Bootstrap in React

By Codes With Pankaj

Bootstrap is a popular CSS framework that helps style your React application quickly and easily.

Step-by-Step Guide

Step 1: Create a React App (if not already created)

If you don’t already have a React app, create one by running:

npx create-react-app react-bootstrap-example
cd react-bootstrap-example

Step 2: Install Bootstrap

Option 1: Install via NPM

  1. Open the terminal in your project directory.

  2. Run the following command to install Bootstrap:

    npm install bootstrap

  3. Once installed, you’ll see bootstrap listed in your package.json file under dependencies.

Option 2: Use a CDN (Quick and Easy)

You can add Bootstrap via a CDN link if you don’t want to install it.

  1. Open the public/index.html file in your React app.

  2. Add the following <link> tag inside the <head> section:

    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUa5HcNrAJ6OvhW2Q6NIe9ClxpBB9VbQAl1CAVJ4M9I8H/92pO+PZcNp5ji"
  crossorigin="anonymous"
/>

Note: Using the CDN method does not require installing Bootstrap, but it’s less flexible for custom builds.

Step 3: Import Bootstrap in Your React App

If you used NPM to install Bootstrap, you need to import it into your project.

  1. Open the src/index.js file.

  2. Add the following import statement at the top:

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

This makes Bootstrap’s styles available globally in your app.

Step 4: Use Bootstrap Classes in Your Components

Now, you can use Bootstrap’s CSS classes in your React components to style your elements.

  1. Open src/App.js.

  2. Replace its content with the following code to create a simple Bootstrap-styled component:

    import React from 'react';

function App() {
  return (
    <div className="container">
      <h1 className="text-center text-primary my-5">Welcome to Codes With Pankaj</h1>
      <button className="btn btn-success">Click Me!</button>
    </div>
  );
}

export default App;

  3. Explanation:

    • container: Centers and limits the width of the content.

    • text-center: Centers the text horizontally.

    • text-primary: Applies the Bootstrap primary color (blue) to the text.

    • btn btn-success: Styles the button with a green background.

Step 5: Run the Project

  1. Start the development server:

    npm start

  2. Open your browser at http://localhost:3000.

You should see a styled page with a centered heading and a green button.

Optional: Add JavaScript Components (e.g., Modals, Dropdowns)

If you need Bootstrap components that require JavaScript (like modals or dropdowns), you’ll also need Bootstrap’s JavaScript library and Popper.js.

  1. Install the required libraries:

    npm install bootstrap @popperjs/core

  2. Import Bootstrap’s JavaScript in src/index.js:

    import 'bootstrap/dist/js/bootstrap.bundle.min.js';

  3. Now, you can use advanced Bootstrap components like modals, carousels, and dropdowns.

Congratulations! 🎉

You’ve successfully installed and started using Bootstrap in your React project.

Next Steps

  1. Experiment with Bootstrap components like grids, cards, and navbars.

Stay tuned for more React tutorials from Codes With Pankaj! 😊

PreviousHow to Create Multiple Class-Based Components in a Single File in ReactNextExperiment with Bootstrap components like grids, cards, and navbars.

Last updated