What is Bootstrap in ReactJS

Spoke Right / 14 Nov, 2023

React Bootstrap
Bootstrap is one of the most popular CSS frameworks. Bootstrap can be added to the React app in mainly three ways.

• Using the Bootstrap CDN
• Using Bootstrap as Dependency
• Using React Bootstrap Package

Using the Bootstrap CDN:

Being the easiest way of adding Bootstrap, there is no need to install or download Bootstrap while using the Bootstrap CDN for React app. It can be simply added with the below links.

To include jQuery, Popper.js, and Bootstrap.js in the document, the following imports needs to be added in the tag of the index.html file. Here, jQuery's slim version is used, however we can also use the full version.

Using Bootstrap as Dependency:

• It is a better way for adding Bootstrap to the React application if a build tool or a module bundler such as Webpack is used. To install Bootstrap as a dependency for the React app:
  Command:

  
  

  $npm install bootstrap --save 

• After installing Bootstrap it can be imported to the React application entry file. Add the below code in the src/index.js file, if the React project is created using the create-react-app tool.

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

• To install the jquery and popper.js packages:
  Command:

  
  

  $ npm install jquery popper.js 

• To include jQuery, Popper.js, and Bootstrap.js in the document, the following imports needs to be added in the src/index.js file.

  import $ from 'jquery';  
  import Popper from 'popper.js';  
  import 'bootstrap/dist/js/bootstrap.bundle.min';  

Using React Bootstrap Package:

It is the most popular way to add bootstrap in the React application. There are mainly two popular Bootstrap packages offered by the community that is mostly utilised.

react-bootstrap:
Without any dependencies, React-Bootstrap offers everything that the user needs, along with the React setup. It can simply be understood as a complete re-implementation of the Bootstrap components as React components

reactstrap:
It is a library that does not depend on jQuery or Bootstrap JavaScript, as it contains React Bootstrap 4 components that favour composition and control.

React Bootstrap Installation:
To create a new React app:
Command:

$ npx create-react-app react-bootstrap-app  

Now navigate to the React app folder. Next, to install Bootstrap:
Command:

$ npm install react-bootstrap bootstrap --save  

Importing Bootstrap:
To import the Bootstrap file, add the following code to the src/index.js file.

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

Instead of the entire library, individual components can also be imported from 'react-bootstrap'. Now, create a new file named ThemeSwitcher.js.

ThemeSwitcher.js:

import React, { Component } from 'react';  
import { SplitButton, Dropdown } from 'react-bootstrap';  
class ThemeSwitcher extends Component {  
state = { theme: null }   
chooseTheme = (theme, evt) => {  
evt.preventDefault();  
if (theme.toLowerCase() === 'reset') { theme = null }  
this.setState({ theme });  
}  
render() {  
const { theme } = this.state;  
const themeClass = theme ? theme.toLowerCase() : 'default';      
const parentContainerStyles = {  
position: 'absolute',  
height: '100%',  
width: '100%',  
display: 'table'  
};  
const subContainerStyles = {  
position: 'relative',  
height: '100%',  
width: '100%',  
display: 'table-cell',  
};  
return (  

Update the src/index.js file.
Index.js:

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
ReactDOM.render(, document.getElementById('root'));

Using reactstrap:
To create a new React app:
Command:

$ npx create-react-app reactstrap-app  

Navigate to the React app folder, and install the reactstrap via the npm package.
Command:

$ npm install bootstrap reactstrap --save  

Importing Bootstrap:
To import the Bootstrap file, add the following code to the src/index.js file.

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

Instead of the entire library, individual components can also be imported from 'react-bootstrap'. Now, create a new file named ThemeSwitcher.js.

ThemeSwitcher.js:

import React, { Component } from 'react';  
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';  
class ThemeSwitcher extends Component {  
state = { theme: null, dropdownOpen: false }  
toggleDropdown = () => {  
this.setState({ dropdownOpen: !this.state.dropdownOpen });  
}  
resetTheme = evt => {  
evt.preventDefault();  
this.setState({ theme: null });  
}  
chooseTheme = (theme, evt) => {  
evt.preventDefault();  
this.setState({ theme });  
}  
render() {  
const { theme, dropdownOpen } = this.state;  
const themeClass = theme ? theme.toLowerCase() : 'secondary';  
return (  

Update the src/index.js file.
Index.js:

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
ReactDOM.render(, document.getElementById('root'));