ItSolutionStuff.com

How to Install Bootstrap in React App?

By Hardik Savani β€’ May 1, 2024
Bootstrap React JS

Hi Guys,

In this article we will cover on how to implement react install bootstrap example. i would like to show you how to install bootstrap in react js. you will learn how to use bootstrap in react native. let’s discuss about how to install bootstrap 4 in react native. You just need to some step to done how to include bootstrap in react.

In this post, i will show you two way to install bootstrap in react application.

1) we will use npm bootstrap library so you can easily use all the classes of bootstrap 4 in your react js app.

2) we will use react-bootstrap they provide library for bootstrap javascript. so you can easily import bootstrap buttons, alert, navbar, model and work on it.

Now let's see both way one by one and you can use any one way that you require:

Preview:

1) Install Bootstrap 4

Now here, we have to install bootstrap using npm command. so let's run bellow command to install bootstrap in react.

npm install --save bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

serviceWorker.unregister();

Now we are ready to use bootstrap class. so you can use it as like bellow i used.

src/App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

return (

<div class="container">

<h1>How to Install Bootstrap in React App - ItSolutionStuff.com</h1>

<button class="btn btn-success">Success Button!</button>

<button class="btn btn-primary">Primary Button!</button>

<button class="btn btn-danger">Danger Button!</button>

<div class="alert alert-success">

<p>This is success alert.</p>

</div>

<div class="alert alert-primary">

<p>This is primary alert.</p>

</div>

<div class="alert alert-danger">

<p>This is danger alert.</p>

</div>

</div>

);

}

export default App;

2) Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

serviceWorker.unregister();

Now we are ready to use bootstrap class with import component. so you can use it as like bellow i used.

src/App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Button, Alert } from 'react-bootstrap';

function App() {

return (

<div className="container">

<Button variant="success">Success</Button>

<Button variant="primary">Primary</Button>

<Button variant="danger">Danger</Button>

<Alert key="1" variant="success">

This is a success alertβ€”check it out!

</Alert>

</div>

);

}

export default App;

Now you can use anyone way.

I hope it can help you....

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

πŸ“Ί Subscribe on YouTube

We Are Recommending You

β˜…

Jquery Convert Array into Object Example

Read Now β†’
β˜…

Jquery Convert Object to String Example

Read Now β†’
β˜…

How to install Vue JS in Laravel 7?

Read Now β†’
β˜…

How to install React in Laravel 7?

Read Now β†’
β˜…

How to install Bootstrap 4 in Laravel 7?

Read Now β†’
β˜…

Install Bootstrap 4 in Angular 9 | How to Add Bootstrap in Angular 9

Read Now β†’
β˜…

PHP Signature Pad Example | E-Signature Pad using Jquery Ajax and PHP

Read Now β†’
β˜…

Angular 9/8 Highcharts Example Tutorial

Read Now β†’
β˜…

Laravel 6 Install React JS Example

Read Now β†’
β˜…

Laravel React JS Axios Post Request Example Tutorial

Read Now β†’
β˜…

Laravel 5 - Simple CRUD Application Using ReactJS - Part 1

Read Now β†’