Open In App

How to install bootstrap in React.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

In React Bootstrap is used for quick styling and designing web pages along with responsive designs and flexible CSS. Also installing Bootstrap in React JS is simple and easy.

Bootstrap is one of the most popular front-end open-source toolkits for developing responsive, mobile-first front-end projects on the web. It contains various types of design templates based on CSS and JavaScript. Instead of writing code from scratch, one can use Bootstrap templates to make the work a lot easier.

React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.

Bootstrap in React Js can be installed using these 2 methods.

Prerequisite for Bootstrap installation

Steps to create React application

Step 1: Create a React App using the following command with foldername (here gfg)

npx create-react-app gfg

Step 2: Change the directory to the project folder by entering the following command.

cd gfg

Project Structure:

Project_Structure

Bootstrap in react js development can be installed and used using the CDN or Content Delivery Network. Use the CDN link the index.html in the public folder to use the Bootstrap styling classes.

Example:

HTML
<!--file name - public/index.html-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon"
        href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1" />
    <meta name="description"
        content="Web site created using create-react-app" />
    <link rel="manifest"
        href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable
        JavaScript to run this
        app.</noscript>
    <div id="root"></div>

</body>

</html>
Javascript
// filename - App.js

function App() {
    return (
        <div className="App">
            <h1 className="text-success">GeeksforGeeks</h1>
            <p className="bg-info my-5 p-5">
                This is example for Bootstrap in react using
                CDN link
            </p>
        </div>
    );
}

export default App;

Steps to Run the Application: Use this npm command in the project Directory

npm start

Output: After running the server, your output would look like this on http://localhost:3000/

Peek-2023-10-11-16-04

Approach 2: Using NPM command

In React bootsrap can also be installed using npm command

Step to install bootstrap:

npm i bootstrap

dependencies list after adding bootstrap in package.json

{
"name": "myreactapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}

Example: Let’s use simple bootstrap button in our React App. For that we have to import bootstrap minified css and bootstrap javascript minified bundle as a dependency in our index.js file. And add a button in our default index.js file. As we did already.  After that, we have to add a button inside our App to that add the following code inside app.js

Javascript
// filename app.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

function App() {
    return (
        <div className="App">
            <h1 className="text-success">GeeksforGeeks</h1>
            <div className="bg-info p-5">
                <p className="">
                    This is example for using button with
                    bootstrap styling
                </p>
                <a
                    className="btn btn-primary"
                    data-bs-toggle="collapse"
                    href="#collapseExample"
                    role="button"
                    aria-expanded="false"
                    aria-controls="collapseExample"
                >
                    Bootstrap button
                </a>
            </div>
        </div>
    );
}

export default App;

Step to run the application: Save your file and run npm server by entering following command in the terminal.

npm start

Output: After running the server, your output would look like this 

Peek-2023-10-11-16-14



Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads