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 Auto Select Country Using IP Lookup In jQuery
How To Auto Select Country Usi...

In this article, we will see how to auto select a country using IP lookup in jquery. Here, we will learn about auto...

Read More

May-15-2023

Laravel 8 Group By Query Example
Laravel 8 Group By Query Examp...

In this example we will see laravel 8 group by query example. how to use group by in laravel 8. As you might expect...

Read More

Nov-29-2021

How To Get Current User Location In Laravel
How To Get Current User Locati...

In this example, I will show you how to get the current user location in laravel, Many times we are required to find the...

Read More

Jun-10-2020

How to Build a Blog CMS with React JS?
How to Build a Blog CMS with R...

Are you a blogger who expresses his thoughts with the help of words? If yes, then you might have once thought to create...

Read More

Nov-13-2023