How to Use Bootstrap with React ?
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.
Table of Content
- Using Bootstrap CDN
- Import Bootstrap as a Dependency
- Install React-Bootstrap Package
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" /> <!-- Bootstrap CSS link --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 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 > <!-- Bootstrap script files --> < 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 > </ 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
// Filename - index.js 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
// Filename - components/Header.js 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 = "https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg" ; 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
// Filename - components/LeftCard.js import React, { Fragment } from "react" ; import { Button, Alert, Card, CardImg, CardBody, CardTitle, CardSubtitle, CardText, } from "react-bootstrap" ; const BANNER = "https://i.imgur.com/CaKdFMq.jpg" ; 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
// Filename - components/Post.js 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( "https://baconipsum.com/api/?type=meat-and-filler¶s=4&format=text" ) .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.