How to install bootstrap 4 in react js?
April 08, 2023Hi Friends 👋,
Welcome To aGuideHub!
To install bootstrap 4 in React js, you have to use the npm or yarn package manager that is how you can install the bootstrap 4 library into your project.
Today, I am going to show you, how to install bootstrap 4 in react js.
Install Bootstrap 4
Install the following packages to use bootstrap 4 in react js.
npm
npm install bootstrap@4.6.2Table of contents
- Create a new React JS project.
- Import the bootstrap 4 component.
- Use bootstrap 4 components in the project.
Let’s start with the first step.
Step 1: Create a new React JS project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import bootstrap 4 component.
After installing install bootstrap 4, you have to import your React component. To do this, add the following line to the top of your component file.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';Step 3: Use bootstrap 4 components in the project.
A button element is defined inside a container div element. The button has the class of btn btn-primary and displays the text Primary.
<div>
<button type="button" class="btn btn-primary">
Primary
</button>
<button type="button" class="btn btn-secondary">
Secondary
</button>
<button type="button" class="btn btn-success">
Success
</button>
<button type="button" class="btn btn-info">
Info
</button>
<button type="button" class="btn btn-warning">
Warning
</button>
<button type="button" class="btn btn-danger">
Danger
</button>
<button type="button" class="btn btn-dark">
Dark
</button>
</div>ReactJS use bootstrap 4 example.
This code below is an example, The code below is an example of this, we have to style with CSS and include the button.
App.js
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
function App() {
return (
<div>
<button type="button" class="btn btn-primary">
Primary
</button>
<button type="button" class="btn btn-secondary">
Secondary
</button>
<button type="button" class="btn btn-success">
Success
</button>
<button type="button" class="btn btn-info">
Info
</button>
<button type="button" class="btn btn-warning">
Warning
</button>
<button type="button" class="btn btn-danger">
Danger
</button>
<button type="button" class="btn btn-dark">
Dark
</button>
</div>
);
}
export default App;Check the output of the above code example.
Here, we are provided code sandbox links for the above program to install bootstrap 4 in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
