EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Bootstrap

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Bootstrap

React Bootstrap

Introduction to React Bootstrap

React Bootstrap was built to replace the Bootstrap JavaScript and to make it more compatible with any User Interface Eco System. Its each and every components has been built from scratch without any dependencies on jQuery. It has advanced itself in the years and has become the best option for User Interface Foundation. Using Bootstrap Stylesheet, it can use all of the bootstrap schemes which are required to make the website wonderful. Every function is totally controlled by React making it more accessible.

Working of React Bootstrap with Methods of Adding Bootstrap in React

  • With the help of React Bootstrap packages.
  • With the help of Bootstrap dependency installation.
  • With the help of Bootstrap CDN.

1. Adding bootstrap in react with help of bootstrap packages

To include bootstrap in React there are 2 methods:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • react-bootstrap
  • reactstrap

Example with react-bootstrap:

Below example focuses on addition using react-bootstrap:

It is installed with npm:

npm install –save react-bootstrap

Our App.js file includes:

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

Once we install package, the components can be used in any components file.

Components inside public folder:

  • index.html

Components inside src folder:

  • AOC folder
  • App.css
  • App.js
  • Menu.js
  • index.js
  • styles.css

Components inside AOC folder:

  • AboutUS.js
  • AboutUSdescriptive.js

a. index.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React-Bootstrap</title>
</head>
<body>
<noscript>Enable JavaScript to run it</noscript>
<div id="root"></div>
</body>
</html>

b. AboutUS.js

Code:

import React
, { Component } from "react";
import { Jumbotron
, Button } from "react-bootstrap";
import { Link } from "react-router-dom";
export default class PasoAOCInicio extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Jumbotron>
<h1>EDUCBA</h1>
<p>
EDUCBA is a best platform for online training and video courses.
We provide trainings related to latest emerging technologies.
We help in building up the careers of professionals into these emerging fields.
</p>
<p>
<Button
variant="primary"
to="/AOC/pasoAOCDatosIdentificativos"
as={Link}
>
Click for the Training Programs
</Button>
</p>
</Jumbotron>
);
}
}

c. AboutUsdescriptive.js

Code:

import React
, { Component } from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";
export default class PasoAOCDatosIdentificativos extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<h2>Training Programs</h2>
<Link to="">Click for Main Menu</Link>
<Button
variant="primary"
to="/AOC/pasoAOCDatosIdentificativos"
as={Link}
>
Click to Continue with Training Programs
</Button>
</div>
);
}
}

d. App.css

e. App.js

Code:

import React
, { useState } from "react";
import { Row
, Col } from "react-bootstrap";
import { HashRouter as Router
, Route
, Redirect } from "react-router-dom";
import PasoAOCInicio from "./AOC/AboutUS.js";
import PasoAOCDatosIdentificativos from "./AOC/AboutUsdescriptive.js";
import Menu from "./Menu";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
const Home = () => <h2>Welcome to Home Screen</h2>;
const Pagina2 = () => <h2>Contact Us</h2>;
const App = () => (
<div>
<Row>
<Col>
<Menu />
</Col>
</Row>
<Row>
<Col>
<Route path="/" exact component={Home} />
<Route path="/home" component={Home} />
<Route path="/AOC/pasoAOCInicio" component={PasoAOCInicio} />
<Route
path="/AOC/pasoAOCDatosIdentificativos"
component={PasoAOCDatosIdentificativos}
/>
<Route path="/pagina2" component={Pagina2} />
</Col>
</Row>
</div>
);
export default App;

f. Menu.js

Code:

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import { NavLink } from "react-router-dom";
const Menu = () => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#">EDUCBA</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={NavLink} to="/AOC/pasoAOCInicio">
About Us
</Nav.Link>
<Nav.Link as={NavLink} to="/pagina2">
Contact Info
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
export default Menu;

g. index.js

Code:

import React from "react";
import ReactDOM from "react-dom";
import HashRouter from "react-router-dom/HashRouter";
import Container from "react-bootstrap/Container";
import App from "./App";
ReactDOM.render(
<HashRouter>
<Container fluid="true">
<App />
</Container>
</HashRouter>,
document.getElementById("root")
);

h. styles.css

Code:

.App {
font-family: 'Times New Roman', Times, serif;
text-align: center;
}

Output:

React Bootstrap 1

Welcome to Home SCreen

React Bootstrap 3

React Bootstrap 4

Example with reactstrap

Below example focuses on addition using reactstrap:

It is installed with npm:

npm install -g create-react-app

Our index.jsx file includes:

import "bootstrap/dist/css/bootstrap.css";

Once we install reactstrap package, the reactstrap components can be used in any components file.

Components inside public folder:

  • index.html

Components inside src folder:

  • BadgeList folder
  • Breadcrumb folder
  • ButtonList folder
  • Dropdown folder
  • ListGroup folder
  • AlertList.jsx
  • index.js

Components inside BadgeList folder:

  • index.jsx

Components inside Breadcrumb folder:

  • index.jsx
  • styles.css

Components inside ButtonList folder:

  • index.jsx
  • styles.css

Components inside Dropdown folder:

  • indexxjsx

Components inside ListGroup folder:

  • index.jsx
  • styles.css

a. index.jsx (in BadgeList folder)

Code:

import React from "react";
import { Badge } from "reactstrap";
const BadgeList = props => {
return (
<div>
<Badge color="secondary" pill>
Blog
</Badge>
<Badge color="primary" tag="div">
What is EDUCBA?
</Badge>
<Badge color="danger">SignUp</Badge>
<Badge color="success">Corporate Training</Badge>
<Badge color="info">Contact Us</Badge>
<Badge color="warning">Verifiable Certificate</Badge>
<Badge color="dark">Reviews</Badge>
<Badge color="light">Privacy Policy</Badge>
</div>
);
};
export default BadgeList;

b. index.jsx (in Breadcrumb folder)

Code:

import React from "react";
import { Breadcrumb
, BreadcrumbItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";
const styles = {
marginBottom: "21px"
};
const Bread = props => {
return (
<div style={styles}>
<Breadcrumb tag="nav">
<BreadcrumbItem tag="a" href="#">
Click for Home Screen
</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">
Click for Blog Menu
</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">
Click for Training Menu
</BreadcrumbItem>
<BreadcrumbItem active tag="span">
Click for SignUp Menu
</BreadcrumbItem>
</Breadcrumb>
</div>
);
};
export default Bread;

c. styles.css (in Breadcrumb folder)

Code:

.breadcrumb {
background-color: opaque;
}

d. index.jsx (in ButtonList folder)

Code:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";
const ButtonList = props => {
return (
<div>
<Button active>Resources</Button>
<Button disabled>Finance</Button>
<Button href="#">Data Science</Button>
<Button color="success" size="lg">
Software Development
</Button>
<Button color="danger" className="add-class">
Excel
</Button>
<Button color="warning" outline>
Design
</Button>
<Button tag="span">Project Management</Button>
<Button color="warning" block>
EDUCBA
</Button>
</div>
);
};
export default ButtonList;

e. styles.css (in ButtonList folder)

Code:

.btn-success {
background-color: #f082ff;
}

f. index.jsx (in Dropdown folder)

Code:

import React from "react";
import {
Dropdown
, DropdownToggle
, DropdownMenu
, DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.css";
export default class DropdownComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>Bundle Certification Courses</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Financial Analyst Course</DropdownItem>
<DropdownItem disabled>Data Science Course</DropdownItem>
<DropdownItem>Software Development Course</DropdownItem>
<DropdownItem divider />
<DropdownItem>Excel VBA Course</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
}

g. index.jsx (in ListGroup folder)

Code:

import React from "react";
import { ListGroup
, ListGroupItem } from "reactstrap";
import "./styles.css";
const Listgroup = props => {
return (
<ListGroup flush>
<ListGroupItem>Welcome to Our Page</ListGroupItem>
<ListGroupItem tag="a" href="#">
Click for more Information
</ListGroupItem>
<ListGroupItem>Click to Contact Us</ListGroupItem>
<ListGroupItem>Click for Training Videos</ListGroupItem>
<ListGroupItem>Click for Specialization Courses</ListGroupItem>
</ListGroup>
);
};
export default Listgroup;

h. styles.css (in ListGroup folder)

Code:

.list-group {
margin: 31px 0;
}
a.list-group-item {
font-weight: 601;
}
.list-group-item::before {
content: "▶︎";
display: inline-block;
padding-right: 9px;
font-size: 13px;
line-height: 2;
}

i. AlertList.jsx (in src folder)

Code:

import React from "react";
import { Alert } from "reactstrap";
const AlertList = props => {
return (
<div>
<Alert>Label</Alert>
</div>
);
};
export default AlertList;

j. index.js (in src folder)

Code:

import React from "react";
import ReactDOM from "react-dom";
import ButtonList from "./ButtonList";
import BadgeList from "./BadgeList";
import AlertList from "./AlertList";
import Listgroup from "./ListGroup";
import Bread from "./Breadcrumb";
import DropdownComponent from "./Dropdown";
const styles = {
margin: "21px"
};
const App = () => {
return (
<div style={styles}>
<ButtonList />
<BadgeList />
<Listgroup />
<Bread />
<DropdownComponent />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

k. index.html (in public folder)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#f082ff">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
To run this kindly enable JavaScript.
</noscript>
<div id="root"></div>
</body>
</html>

Output:

React Bootstrap 5

React Bootstrap 6

2. Adding bootstrap in react with help of bootstrap dependency installation

It is installed with npm:

npm install bootstrap
npm install jquery popper.js

Our index.js file includes:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Now let’s code:

Components inside public folder:

  • index.html

Components inside src folder:

  • components folder
  • index.js
  • styles.css

Components inside components folder:

  • templates folder
  • HelloWorld.js

Components inside templates folder:

  • HelloWorldHtml.jsx

a. HelloWorldHtml.jsx

Code:

import React from "react";
export const HelloWorldHtml = () => {
return (
<div className="col-6 bg-light mx-auto text-center">
<h1>Ciao!</h1>
<p>Let’s Explore</p>
<button className="btn btn-dark">Click to Proceed</button>
</div>
);
};

b. HelloWorld.js

Code:

import React, { Component } from "react";
import { HelloWorldHtml } from "./templates/HelloWorldHtml.jsx";
class HelloWorld extends Component {
render() {
return <HelloWorldHtml />;
}
}
export default HelloWorld;

c. index.js

Code:

import React from "react";
import ReactDOM from "react-dom";
import bootstrap from "bootstrap";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import HelloWorld from "./components/HelloWorld";
function App() {
return (
<div className="container">
<HelloWorld />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

d. styles.css

e. index.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React Bootstrap Application</title>
</head>
<body>
<noscript> Enable JavaScript to run Application </noscript>
<div id="root"></div>
</body>
</html>

Output:

dependency installation

3. Adding bootstrap in react with the help of bootstrap CDN

It is the easiest way to add bootstrap. Like any other CDN, CDN in index.html of the public folder or react project.

Below is the CDN url used in index.html file:

<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json”>

<link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico”>

Components/files used:

  • Hello.js
  • index.html
  • index.js

a. Hello.js

Code:

import React from 'react';
export default ({ name }) => <h1>Welcome {name}!</h1>;

b. index.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#f082ff">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React BootStrap CDN App</title>
</head>
<body>
<noscript>
To run this please enable JavaScript.
</noscript>
<div id="root"></div>
</body>
</html>
<div id="root"></div>

c. index.js

Code:

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
const styles = {
fontFamily: 'times',
textAlign: 'center',
};
class App extends React.Component {
render() {
return (
<div style={styles}>
<Hello name="Coder" />
<h2>{'\u2725'} Here Magic Happens with Coding {'\u2725'}</h2>
<h3>{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}{'\u2735'}</h3>
<h4>{'\u2736'}{'\u2736'}{'\u2736'}{'\u2736'}{'\u2736'}{'\u2736'}</h4>
</div>
);
}
}
render(<App />, document.getElementById('root'));

Output:

CDN

Conclusion

On the basis of the above article, we saw how to use and the different methods to use it. We went through different examples to understand its working and how to use it according to different requirements of the website.

Recommended Articles

This is a guide to React Bootstrap. Here we discuss the introduction and working with methods of adding bootstrap in react respectively. You may also have a look at the following articles to learn more –

  1. React Native SectionList
  2. React Native Authentication
  3. React-Native Calendar
  4. React Native Template

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Native Redux
    • React JSX
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) Learn More