Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • What is Bootstrap in ReactJS
  • Learn React

What is Bootstrap in ReactJS

Spoke Right December 15, 2022 3 min read

Bootstrap In REactJS

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.

Toast testToast = Toast.makeText(this, "Your Message Here", Toast.LENGTH_LONG);
testToast.show();

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 (  
<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'));

Continue Reading

Previous: How do I use CSS in React
Next: What IS Difference Between React And Vue

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.