How to use Bootstrap in ReactJS ?

28 Apr, 2021
There are the following ways we can use bootstrap in our ReactJS 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”integrity=”sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4′′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:
react-bootstrap
reactstrap
In the following example, we have implemented the first way to use Bootstrap in the ReactJS project.
Creating React Application:
Step 1: Create a React application using the following command:npx create-react-app foldername
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 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
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/, you will see the following output:
Picked
React-Bootstrap
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React