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 Install Moment.js In Angular 15
How To Install Moment.js In An...

Welcome to this step-by-step guide on installing Moment.js in your Angular 15 project. As an Angular developer, I unders...

Read More

Jun-26-2023

Laravel 8 Autocomplete Search from Database
Laravel 8 Autocomplete Search...

In this article, we will see the laravel 8 autocomplete search from the database. Using ajax autocomplete...

Read More

Mar-01-2021

Getting Started with Laravel in CodeLobster IDE
Getting Started with Laravel i...

Laravel is probably one of the most promoted PHP frameworks at the moment. It has a huge team and an excellent knowledge...

Read More

Jan-16-2022

How to Multiple Image Upload in Laravel 10 API
How to Multiple Image Upload i...

Hello everyone! I'm excited to share with you how I'm enhancing my Laravel 10 API by enabling the capability to...

Read More

Dec-01-2023