How to use Bootstrap in ReactJS ?

0 0 2 minutes read

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 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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!