Bootstrap in ReactJS

by

React Bootstrap
Bootstrap is one of the most popular CSS frameworks. Bootstrap can be added to the React app in 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 the 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 need to be added in the 



Using Bootstrap as Dependency:


    
 	
  • It is a better way to add 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 need 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 utilized.


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 favor 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 (
<div style={parentContainerStyles}>
<div style={subContainerStyles}>
<span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`}
style={{ marginBottom: 25 }}>{theme || 'Default'}</span>
<div className="center-block text-center">
<SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>
<Dropdown.Item eventKey="Block1" onSelect={this.chooseTheme}>Theme1</Dropdown.Item>
<Dropdown.Item eventKey="Block2" onSelect={this.chooseTheme}>Theme2</Dropdown.Item>
<Dropdown.Item eventKey="Block3" onSelect={this.chooseTheme}>Theme3</Dropdown.Item>
<Dropdown.Item divider />
<Dropdown.Item eventKey="Block0" onSelect={this.chooseTheme}>Theme0</Dropdown.Item>
</SplitButton>
</div>
</div>
</div>
);
}
}
export default ThemeSwitcher;


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(<ThemeSwitcher />, 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 (
<div className="d-flex flex-wrap justify-content-center align-items-center">
<span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>
<ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
<Button id="caret" color={themeClass}>{theme || 'Main'} Theme</Button>
<DropdownToggle caret size="lg" color={themeClass} />
<DropdownMenu>
<DropdownItem onClick={e => this.chooseTheme('One', e)}>Theme1</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Two', e)}>Theme2</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Three', e)}>Theme3</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={this.resetTheme}>Theme0</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
);
}
}
export default ThemeSwitcher;


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(<ThemeSwitcher />, document.getElementById('root'));