How to use Bootstrap in React JS ?
Last Updated :
25 Jul, 2024
Explore the seamless integration of Bootstrap into React JS for enhanced styling and responsive web development. This comprehensive guide provides step-by-step instructions, covering the installation process, utilization of Bootstrap components, and best practices to harness the power of both technologies.
There are the following ways we can use Bootstrap in our React JS Project.
1. Using Bootstrap CDN:
The simplest way to use Bootstrap in your React application is to use BootstrapCDN. There are no downloads or installations needed. Simply provide a link in the head section of your app, as seen in the example below.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/ 4.1.0/css/bootstrap.min.css" crossorigin="anonymous">
2. Using the react-bootstrap library:
This is the recommended method for applying Bootstrap to your React program if you're using a build tool or a package bundler like webpack. Bootstrap must be installed as a dependency for your app.
npm install bootstrap
3. Install a React Bootstrap package:Â
The third choice for integrating Bootstrap into a React app is to use a package that includes rebuilt Bootstrap components that can be used as React components. The following are the two most common packages:
In the following example, we have implemented the first way to use Bootstrap in the ReactJS project.
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: Installing the required dependencies:
npm install react-bootstrap bootstrap
Project Structure:

The updated dependencies in package.json file will look like:
"dependencies": {
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Now write down the following code in the App.js file.
JavaScript
// App.js
import React, { useState } from 'react';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick = () => {
console.log("hi")
alert("The value of counter is :" + this.state.counter)
this.setState({ counter: this.state.counter + 1 })
}
render() {
return (
<div >
<div className="jumbotron">
<h1 className="display-4">Hello From GFG!</h1>
<p className="lead">This is a simple Example of using
bootstrap in React.</p>
<hr className="my-4" />
<p>the Component is called jumbotron in bootstrap.</p>
<p className="lead">
<a onClick={this.handleClick}
className="btn btn-primary btn-lg" href="#"
role="button">Click me</a>
</p>
</div>
</div>
);
}
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Similar Reads
How to use Bootstrap Icons in React ? React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. Itâs great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to
2 min read
How to Use Bootstrap with React? Bootstrap is one of the most popular front-end frameworks, widely used to create visually appealing, responsive, and mobile-first websites quickly. It provides pre-designed UI components, grid systems, and various CSS classes that help you build mobile-first, responsive web applications quickly and
9 min read
How To Install Bootstrap in ReactJS? Bootstrap is one of the most popular CSS frameworks for developing responsive and mobile-first websites. Integrating Bootstrap with ReactJS helps you build sleek, responsive interfaces quickly and easily. In this article, we will walk you through the step-by-step process of installing Bootstrap in R
4 min read
How to Install and Use React Bootstrap with Gatsby JS? In this article, we are going to learn how to install and use React Bootstrap with Gatsby JS. We will install GatsbyJS, then we will install React-Bootstrap in the project to use the class and components of Bootstrap. PrerequisitesGatsbyReactReact-BootstrapApproachTo begin, we'll install the Gatsby
2 min read
How to use Bootstrap with NextJS? Next.js is an open-source web development framework based on React and has gained significant popularity due to its amazing features. It is developed by Vercel and Next.js stands out for its robust capabilities, including server-side rendering(SSR) and enhanced search engine optimization (SEO). Next
3 min read
How to Add Bootstrap in a Project? Bootstrap is a popular open-source framework for building responsive and mobile-first websites using HTML, CSS, and JavaScript. It provides pre-designed components and templates that simplify web development. Why Use Bootstrap?Bootstrap offers several advantages for web development:Faster and Easier
3 min read
How to Add Icon in NavBar using React-Bootstrap ? This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them. PrerequisitesReactJSJSXReact BootstrapCreating React App and Installing ModuleStep 1: Create a React a
2 min read
React Bootstrap Form Text In this article, we will learn about the concept of React Bootstrap Form Text. Form.Text in React Bootstrap is the component mainly used for rendering the text in the form. We can display the information, help messages, and other textual contents in the application by using this component. We will s
2 min read
How to pass data to a React Bootstrap modal? In React Bootstrap, we have the styling and interactive components of Modal. In simple terms, Modal is nothing but the popup box that is opened when some action has been performed. To make the modal customizable in terms of its behavior, we can pass the custom data to the React Bootstrap modal using
4 min read
How to create your own React Bootstrap theme ? In this article, we will learn how to create our own react-bootstrap theme on a website Themestr.app and add it to our react project.Features:No need to think about responsiveness.A wide range of color options is available to choose from.Very easy to work and integrate into the project.Prerequisite:
3 min read