bootstrap image

How to Install Bootstrap in your React Project ?

by

Bootstrap is very popular front-end web development framework that allows developers to create responsive and mobile-first websites very quickly and easily. It was developed by Twitter and is now maintained by a community of developers.

How to Install ?

There are many ways to install bootstrap in your project but in this article we will see three most common ways to install bootstrap in an existing project.

These are the most popular ways to install bootstrap :

  • Downloading Bootstrap Files.
  • CDN Links
  • Using npm

1. Downloading Bootstrap Files

To download and use Bootstrap in your React project, there are 3 steps that you need to follow :

Step 1 – Downloading files

You can download Bootstrap files from the official website of bootstrap.
to download files – Click here.

You only need to click on the first link (Compiled CSS and JS), it will download all the necessary files which we need.

Step 2 – Bootstrap Setup

After downloading bootstrap files you need to extract the downloaded files,
to extract these files you can simply do left click and choose the option
`Extract all`, it will extract your downloaded files.

Now, you will move the extracted files to your project folder, and then import these files in `head` and `script` tag in your index.html.

You need to paste this code in the head tag of your index.html file. 

<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">

“Make sure to replace “path/to/bootstrap” with the actual path to the Bootstrap files in your project directory.”

You need to paste this code at the end of the body tag in your index.html file.

<script src="path/to/bootstrap/js/bootstrap.min.js"></script>

“Make sure to replace “path/to/bootstrap” with the actual path to the Bootstrap files in your project directory.”

Now you are all set to use Bootstrap in your react project.

Step 3 – Testing

To test that bootstrap has installed or not, paste this code in your `App.jsx` file :

<button class="btn btn-primary">Click me</button>

This code will display a blue primary button with the text “Click me” on the page.

2. CDN links

This is one of the best, easiest and fastest way to use Bootstrap in your project.
You don’t need to download any external file you just need to use some links and that’s it.

You just need to paste this code into your head tag in index.html file. 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

This code links your HTML document to the Bootstrap CSS file so that the styles defined in the CSS file can be applied to the HTML content of the page.

Next, This code should be placed at the bottom of the body section of your index.html, just before the closing </body> tag. 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

This code links your HTML document to the Bootstrap JavaScript file so that the code included in the file can be executed, and the functionality provided by Bootstrap components can be used in your web page.

Now you are all set to use Bootstrap in your project.

3. Using npm

To install Bootstrap into your project using npm, first you need to open the command line and paste the code given below : 

npm install bootstrap

Now, you need to open your index.html file and add the code given below to the head section of the file :

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

the next step would be adding JavaScript to your index.html and for that you need to add the code given below to the bottom of the body section of your index.html, just before the closing </body> tag :

 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

and here you are all set to use Bootstrap in your react project.

ALSO SEE – HOW TO SET UP A REACT APP USING VITE

Leave a Comment