How To Install Bootstrap In React JS

Websolutionstuff | Sep-08-2022 | Categories : Bootstrap React JS

In this article, we will see how to install bootstrap in react js. Also, we will see how to use bootstrap in react js. If you work as a front-end developer, then Bootstrap, Foundation, and Bulma kind of frameworks are not new to you. Most industries use the Bootstrap framework. Millions of websites are running on bootstrap.

So, let's see how to install bootstrap 4/5 in react js and how to add bootstrap in react js.

In this article, we will see two ways to install bootstrap in react application.

1. we will use the 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 the library for bootstrap javascript. So, you can easily import bootstrap buttons, alert, navbar, and modal.

Install Bootstrap 4

Now, we will install bootstrap 4 using the npm command. So, run the following command.

npm install --save bootstrap

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, you can use a bootstrap class like the below code example.

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 JS - Websolutionstuff</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;

 

 

Install react-bootstrap

Now, we will install bootstrap using the npm react-bootstrap command.

npm install react-bootstrap bootstrap

After successfully installing bootstrap, we need to import bootstrap CSS in the src/index.js file.

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();

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 message!
        </Alert>
    </div>
  );
}
  
export default App;

 


You might also like:

Recommended Post
Featured Post
How to Send E-mail Using Queue in Laravel 7/8
How to Send E-mail Using Queue...

Today I will show you how to send e-mail using queue in laravel 7/8, many times we can see some processes take...

Read More

Oct-30-2020

Carbon diffForHumans Laravel Example
Carbon diffForHumans Laravel E...

In this article, we will see carbon diffForHumans in laravel. Carbon diffForHumans function in carbon provides the...

Read More

Dec-14-2020

How To Login With Magic Link In Laravel 9
How To Login With Magic Link I...

In this article, we will see how to login with magic link in laravel 9. Here, we will learn passwordless login with...

Read More

Feb-01-2023

How To Change Text In Laravel 9 Datatable
How To Change Text In Laravel...

Do you want to learn how to change text in a Laravel 9 Datatable? This blog post is your complete guide to mastering tex...

Read More

Jan-06-2023