How to add Bootstrap in React

Today we’ll show you how to add bootstrap in React. There are multiple ways to import bootstrap in react project but we will refer only standard package managers to install bootstrap in ReactJS.

You can also use some other packages such as reactstrap, React Bootstrap, etc.

https://youtu.be/zIf4iQz6Fjo

1. Create a react application

First, we have to create a simple react application using the `create-react-app` npm package. Run the following command to set up a react application.

npx create-react-app add-bootstrap-react

2. Install bootstrap package

Here, we will use the bootstrap npm package to import bootstrap in react application. Run the following command to install bootstrap.

npm i bootstrap

After successful installation, you can import CSS or JS in the topmost component of the application. We suggest you import bootstrap CSS at the beginning of your `src/index.js` file.

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

Refer the following link to get more information about this package.

Bootstrap Installation

3. Create component using bootstrap

For demonstration, we will use bootstrap in `App.js` file to create a simple card. Let’s copy the bootstrap card code from here.

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div class="m-5">
      <h5 class="mb-3">Add Bootstrap in React - <a href="https://cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
      <div class="card" style={{ width: '25rem' }}>
        <img src="https://pbs.twimg.com/profile_banners/1187404980988198914/1601635305" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Clue Mediator</h5>
          <p class="card-text">Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
          <a href="https://cluemediator.com" target="_blank" class="btn btn-dark" rel="noopener noreferrer">Visit Website</a>
        </div>
      </div>
    </div>
  );
}

export default App;

4. Output

Run the application and check the output in the browser.

Output - How to add Bootstrap in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project