React Bootstrap

React Bootstrap

React has a widely used JavaScript framework for creating web applications, and Bootstrap has become the most popular CSS framework. Single-page apps have become popular from the last few years, so the front-end frameworks like Angular, React, Ember, etc. have introduced. As a result, jQuery has lost its popularity for building web applications. So it is necessary to learn the ways by which we can use the Bootstrap in React apps.

React Bootstrap

Adding Bootstrap to React

There are several ways to add Bootstrap to react apps; some are listed as follows:

  • By using Bootstrap CDN
  • Bootstrap as dependency
  • React Bootstrap package

Using Bootstrap CDN

It is one of the simplest ways to use Bootstrap in ReactJS. It does not require any installation and downloading of Bootstrap. We have to put <link> tag into the <head> section of the index.html file of the react application.

If it is required to use Bootstrap components depends upon JavaScript/jQuery in the react application, we have to include jQuery and some files like Popper.js and Bootstrap.js within the document. You have to add the following imports within the <script> tags in the <head> section of the index.html file.

  

   

Now, we have successfully added the Bootstrap in the React application so that we can use all of the UI components and CSS utilities available from Bootstrap in the React application. 

Bootstrap as a dependency

If you are working with the build tool or a module bundler like Webpack, then it is preferred to be import Bootstrap as a dependency for adding Bootstrap in your React Application.

You can install Bootstrap as a dependency for your react application only by running the following command in the terminal window:

npm install bootstrap --save

Bootstrap as a dependency

Once it gets installed, you can import it in your React application entry file. If you are creating the React project with the create-react-app tool, then open the src/index.js file, and add the following code:

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

Now, you can use the utilities and CSS classes in the React application. If you want to use the components of JavaScript, then you have to install the popper.js and jquery packages from npm. To install these packages, run the following command in your terminal window:

npm install jquery popper.js

run the following command in your terminal window

Once it gets installed, open your src/index.js file and add the following:

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

React Bootstrap Package

It is the popular way of adding the Bootstrap in the React application. There are several Bootstrap packages created by the community, which aims to recreate Bootstrap components as the react components.

Two necessary packages of Bootstrap are as follows:

  1. react-bootstrap: It is the full re-implementation of the components of Bootstrap, such as react components. There is no requirement of any dependencies like jquery or bootstrap.js. If you have the React-setup and React-Bootstrap installed, then you have sufficient things you need.
  2. reactstrap: It is a library that contains the components of React Bootstrap 4, which favors control and composition. It does not depend upon jQuery or Bootstrap JavaScript. However, react-popper is required for the advanced positioning of content such as Tooltips, Popovers, and auto-flipping dropdowns.

React Bootstrap Installation

Let us try to create a new react app by using the following command:

npx create-react-app react-bootstrap-app  

React Bootstrap Installation
React Bootstrap Installation1

After creating the react app, you have to install the Bootstrap, and the best way to install it by using the npm package. Now, for installing the Bootstrap, open your terminal and navigate to the React app folder to run the following command:

npm install react-bootstrap bootstrap --save  

terminal and navigate to the React app folder

Importing Bootstrap

After installing the Bootstrap, open your src/index.js file and add the following code for importing the Bootstrap file:

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

We also can import the individual components such as import { SplitButton, Dropdown } from 'react-bootstrap'; rather than the entire library. It gives us the particular components that we require to use.

In the React app, let’s create a file like ThemeChanger.js in the src directory or you can use your existing App.js file, and put the following code into it:

ThemeChanger.js

import React, { Component } from 'react'; 
 import { SplitButton, Dropdown } from 'react-bootstrap'; 
 class ThemeChanger 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 parentContainer = { 
  position: 'absolute', 
  height: '100%', 
  width: '100%', 
  display: 'table' 
  }; 
  const subContainer = { 
  position: 'relative',  
  height: '100%', 
  width: '100%', 
  display: 'table-cell', 
  }; 
  return ( 
  

{theme || 'Default'}

Primary Theme Danger Theme Success Theme Reset Theme
); } } export default ThemeChanger;

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';    
import './index.css';  
import ThemeChanger from './ThemeChanger'; 
ReactDOM.render(<ThemeChanger />, document.getElementById('root')); 

Output:

When the code gets successfully executed, you will get the following output:

code gets successfully executed

When you click on the dropdown menu button, you will get the following output:

click on the dropdown menu button

If we select any theme from the list, we will get the corresponding output, like if we are selecting the primary theme, then we will get:

if we are selecting the primary theme

On selecting the success theme, we will get:

selecting the success theme

By using Reactstrap

Let us try to create a new React app by using the following create-react-app command:

npx create-react-app reactstrap-app 

create-react-app command
npx create-react-app reactstrap

Now, you have to install the reactstrap by using the npm package. To install reactstrap, go to your terminal and navigate to the React app folder, and run the following command:

npm install bootstrap reactstrap --save

install the reactstrap by using the npm package

Importing Bootstrap

Now, open your src/index.js file and add the following code for importing the Bootstrap file:

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

We also can import the components like import { Button, Dropdown } from 'reactstrap'; rather than the entire library. It gives the individual components which we require to use and can reduce the code. 

Let us try to understand the following example of Buttons in Bootstrap:

App.js

import React from 'react'; 
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Button } from 'react-bootstrap';
 import {ButtonToolbar} from 'react-bootstrap';
 class App extends React.Component{
 render(){
 return(
 

ReactJS Bootstrap Buttons

); } } export default App;

Output:

Buttons in Bootstrap

Let us see another example of Accordion and Card in Bootstrap:

For using Accordion and Card, you have first to import two packages in your App.js file:

import { Accordion } from 'react-bootstrap';
import { Card } from 'react-bootstrap'; 

Now, open your App.js file and paste the following code into it.

App.js

import React from 'react'; 
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Accordion } from 'react-bootstrap';
 import { Card } from 'react-bootstrap';
 import {Button} from 'react-bootstrap';
 class App extends React.Component{
 render(){ 
 return(
 
  
  
  
  Click me!
  
  
  
  Hello World! I'm the first body.
  
  
  
  
   
  Click me!
  
  
  
  Hello World! I'm another body
  
  
 
 );
 }
 } 
 export default App; 

Output:

After the successful execution of code, you will get the following output:

After the successful execution of code

On clicking the ‘Click me!’ You will see that the details get to hide, it will be clear from the following image:

On clicking the ‘Click me

On clicking the second ‘Click me!’ you will get:

On clicking the second

Similarly, when you click again on the second ‘Click me!’ then you will get:

when you click again on the second Click me