We all know the popularity of React, and how this library has made development tasks easier for frontend developers. React is the most popular front-end library for building the user interface of the application. Industries are slowly reducing the use of jQuery and DOM libraries for building their application.
When it comes to building a responsive app, CSS frameworks are useful in the market. If you work as a front-end developer, then Bootstrap, Foundation, and Bulma kind of framework are not new for you. Most industries use the Bootstrap framework. Millions of websites are running on bootstrap.
Here in this blog, we are going to discuss how to use React and Bootstrap, how to add bootstrap to React app. How to install the React bootstrap package and how to use it in React application. Let’s start with it…
There are mainly three ways to use Bootstrap with React JS app.
Method 1: Using Bootstrap CDN
This is one of the easiest ways to use bootstrap in your React app. The best thing about bootstrap CDN is no requirement for installation or downloads. You just need to copy and paste a link in the head section of your app to make it work. Below is the link that you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
In case your application needs JavaScript components along with the bootstrap, then at the bottom of the page place <script> tag, just before the closing </body> tag.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
These snippets will be added to the public/index.html page.
Example: index.html in public directory will be
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon"
href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<meta name="theme-color"
content="#000000" />
<meta name="description"
content="Web site created using create-react-app" />
<link rel="apple-touch-icon" />
<link rel="manifest"
href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet"
href=
integrity=
"sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App</title>
</head>
<body>
<noscript>You need to enable
JavaScript to run this
app.</noscript>
<div id="root"></div>
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous">
</script>
</body>
</html>
|
Method 2: Import Bootstrap as a styling Dependency
You might have used some module bundler or webpack in your application or you might have heard these names. This one is another option to add bootstrap to your React application. You can run the command given below and install bootstrap as a dependency in your application.
Step to install bootstrap in React Project: Run this command to install bootstrap and other supporting libraries jQuery and popper.js along with this
npm i bootstrap jquery popper.js
Dependencies list in package.json
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
After installation, import the bootstrap as below in the component.
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
Example: In Index.js file add new dependencies.
Javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
|
Method 3: Install React-Bootstrap Package
The other method to add bootstrap in your React component is adding a package with the inbuilt bootstrap component. These are designed to work with your React application components.
Create React App With Bootstrap
Step 1: Use the command given below to create a React app in your machine.
create-react-app my-app
Step 2: Move to the project directory
cd my-app
Step 3: Now, run the command given below to install dependencies as given below.
npm i axios bootstrap reactstrap
Here we have installed Axios as a dependency which is a JavaScript library used to make the HTTP request from node.js or XMLHttpRequests from the browser. Axios allows you to fetch posts from the APIs.
Project Structure
The Project Structure will look like this.
Dependency list After installing packages
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.1",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-router": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: Here’s a simple implementation of a web page using react-bootstrap with navbar, dropdown, cards and and posts.
Javascript
import React, { Fragment } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
import { Container, Row, Col } from "react-bootstrap";
import Post from "./components/Post";
import Header from "./components/Header";
import LeftCard from "./components/LeftCard";
const App = () => (
<Fragment>
<Header />
<main className="my-5 py-5">
<Container className="px-0">
<Row
noGutters
className="pt-2 pt-md-5 w-100
px-4 px-xl-0 position-relative"
>
<Col
xs={{ order: 2 }}
md={{ size: 4, order: 1 }}
tag="aside"
className="pb-5 mb-5 pb-md-0
mb-md-0 mx-auto mx-md-0"
>
<LeftCard />
</Col>
<Col
xs={{ order: 1 }}
md={{ size: 7, offset: 1 }}
tag="section"
className="py-5 mb-5 py-md-0 mb-md-0"
>
<Post />
</Col>
</Row>
</Container>
</main>
</Fragment>
);
export default App;
|
Javascript
import React from "react";
import logo from "../logo.svg";
import {
Container,
Row,
Col,
Form,
Input,
Button,
Navbar,
Nav,
NavbarBrand,
NavLink,
NavItem,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "react-bootstrap";
const AVATAR =
const Header = () => (
<header>
<Navbar
fixed="top"
color="light"
light
expand="xs"
className="border-bottom border-gray bg-white"
style={{ height: 80 }}
>
<Container>
<Row
noGutters
className="position-relative w-100
align-items-center display-flex flex-row"
>
<Col className="d-none d-lg-flex
justify-content-start">
<Nav
className="mrx-auto
display-flex flex-row"
navbar
>
<NavItem className="d-flex
align-items-center mx-5">
<NavLink
className="font-weight-bold"
href="/"
>
<img
src={AVATAR}
alt="avatar"
className="img-fluid
rounded-circle"
style={{
width: 36,
}}
/>
</NavLink>
</NavItem>
<NavItem className="d-flex
align-items-center mx-5">
<NavLink
className="font-weight-bold"
href="/"
>
Home
</NavLink>
</NavItem>
<NavItem className="d-flex
align-items-center mx-5">
<NavLink
className="font-weight-bold"
href="/"
>
Electronics
</NavLink>
</NavItem>
</Nav>
<Dropdown
className="d-flex
align-items-center overflow-x"
nav
inNavbar
>
<DropdownToggle
className="font-weight-bold"
nav
caret
>
fashion
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
className="font-weight-bold
text-secondary text-uppercase"
header
disabled
>
Learn React
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Men
</DropdownItem>
<DropdownItem>
Women
</DropdownItem>
<DropdownItem>
Baby and Kids
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col
className="d-flex justify-content-xs-start
justify-content-lg-center"
>
<NavbarBrand
className="d-inline-block p-0"
href="/"
style={{ width: 80 }}
>
<img
src={logo}
alt="logo"
className="position-relative img-fluid"
/>
</NavbarBrand>
</Col>
</Row>
</Container>
</Navbar>
</header>
);
export default Header;
|
Javascript
import React, { Fragment } from "react";
import {
Button,
Alert,
Card,
CardImg,
CardBody,
CardTitle,
CardSubtitle,
CardText,
} from "react-bootstrap";
const LeftCard = () => (
<Fragment>
<Alert color="danger" className="d-none d-lg-block">
<strong>Account not activated.</strong>
</Alert>
<Card>
<CardImg
top
width="100%"
src={BANNER}
alt="banner"
/>
<CardBody>
<CardTitle
className="h3 mb-2 pt-2
font-weight-bold text-secondary"
>
ReactJS Tutorials
</CardTitle>
<CardSubtitle
className="text-secondary mb-3
font-weight-light text-uppercase"
style={{ fontSize: "0.8rem" }}
>
ReactJS Tutorials, GFG
</CardSubtitle>
<CardText
className="text-secondary mb-4"
style={{ fontSize: "0.75rem" }}
>
ReactJS is a declarative, efficient, and
flexible JavaScript library for building
user interfaces.
</CardText>
<Button
color="success"
className="font-weight-bold"
>
Start Learning
</Button>
</CardBody>
</Card>
</Fragment>
);
export default LeftCard;
|
Javascript
import React, { Component, Fragment } from "react";
import axios from "axios";
import { Badge } from "react-bootstrap";
class Post extends Component {
state = { post: null };
componentDidMount() {
axios
.get(
)
.then((response) =>
this.setState({ post: response.data })
);
}
render() {
return (
<Fragment>
{this.state.post && (
<div className="position-relative">
<span className="d-block pb-2 mb-0 h6
text-uppercase text-info
font-weight-bold">
Editor's Pick
<Badge
pill
color="success"
className="text-uppercase px-2 py-1
ml-3 mb-1 align-middle"
style={{
fontSize: "0.75rem",
}}
>
New
</Badge>
</span>
<span className="d-block pb-4 h2 text-dark
border-bottom border-gray">
React Tutorial
</span>
<article
className="pt-5 text-secondary text-justify"
style={{
fontSize: "0.9rem",
whiteSpace: "pre-line",
}}
>
{this.state.post}
</article>
</div>
)}
</Fragment>
);
}
}
export default Post;
|
Steps to run the Run: Use this command to run the application.
npm start
Output: This output will be visible on http://localhost:3000/ on the browser window.
Conclusion
So we have discussed multiple ways to include bootstrap in React app. We have also discussed using the react-bootstrap library. Alert, badge, navbar, dropdown, button, card, nav, form, etc. are the common components of the bootstrap library in React that you will be using frequently. Other useful components are tables, modals, tooltips, carousel, jumbotron, pagination, tabs, etc. React bootstrap is very useful in giving the layout and designing the user interface of your website. Once you will start using it, you will get to know the uses of its components.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...