Using Bootstrap in React

Last Updated : 27 Feb, 2026

Bootstrap is a popular front-end framework for building responsive, mobile-first websites in React using ready-made UI components, grid systems, utility classes, and easy customization.

  • UI & JS components: Buttons, forms, navbars, cards, modals, carousels, dropdowns.
  • Responsive layout: Grid system for flexible, mobile-first designs.
  • Utility & customization: Manage spacing, colors, alignment; customize with Sass.
  • Using with React: Include via Bootstrap CDN, npm package, or React-Bootstrap library.

If you're new to React or want to deepen your understanding, consider checking out the React JS Beginner to Advance course . This comprehensive course covers everything from the basics to advanced concepts, ensuring you can build robust applications with React.

Three Ways to Use Bootstrap with React

  • Using the Bootstrap CDN
  • Importing Bootstrap as a Dependency
  • Using React-Bootstrap

[Method 1]: Using the Bootstrap CDN

Step 1: Add the Bootstrap CSS link

In your public/index.html file, add the following line inside the <head> section to include the Bootstrap CSS:

<link
  rel="stylesheet"
  href="https://webproxy.poorya-velaei-d67.workers.dev/https://stackpath.bootstrapcdn.com/bootstrap/5.3.2/css/bootstrap.min.css"
  integrity="sha384-GLhlTQ8iRABQYhWfXcQH87EoGdH6j2L04K17Qixxpa5zLx1W5TDBm7t0j1JbntcG"
  crossorigin="anonymous"
/>

Step 2: Add Bootstrap’s JavaScript files

If your app requires Bootstrap’s interactive JavaScript components (like modals, tooltips, etc.), add the following scripts just before the closing </body> tag:

<script
  src="https://webproxy.poorya-velaei-d67.workers.dev/https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
  integrity="sha384-oBqDVmMz4fnFO9gyb56E8fR+6xKnujsH1X2jxXUSqWExY0g0U7tUdbzPvV4H8nX"
  crossorigin="anonymous"
></script>
<script
  src="https://webproxy.poorya-velaei-d67.workers.dev/https://stackpath.bootstrapcdn.com/bootstrap/5.3.2/js/bootstrap.min.js"
  integrity="sha384-pzjw8f+ua7Kw1TIq0sStbd5Y7fuD9BqR6O3doBoq3UMaS2m5uZlZKHw3LFG2Orv6"
  crossorigin="anonymous"
></script>
HTML 
<!-- Filename - public/index.html -->
<html lang="en">
<head>
   
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          integrity="sha384-d4E8z2JwGe7y5ZK0K4dU2kjT7v43QzxB2+pN8ARdI9lDlZORFfop9tFfjG4PUwsw"
          crossorigin="anonymous">
    <title>React App</title>
</head>

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

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
            integrity="sha384-oBqDVmMz4fnFO9gyb56E8fR+6xKnujsH1X2jxXUSqWExY0g0U7tUdbzPvV4H8nX"
            crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-pzjw8f+ua7Kw1TIq0sStbd5Y7fuD9BqR6O3doBoq3UMaS2m5uZlZKHw3LFG2Orv6"
            crossorigin="anonymous">
    </script>
</body>

</html>

Output

bootstrap
Using the Bootstrap CDN
  • Bootstrap & JS: Includes Bootstrap 5.3.2 CSS via CDN and loads Popper.js + Bootstrap JS bundle
  • React Mounting:<div id="root"></div> serves as the React app’s mounting point

[Method 2]: Import Bootstrap as a Dependency

Install Bootstrap via npm and import it in React for better dependency control and version management, especially with bundlers like Webpack.

Steps to Install and Import Bootstrap

1. Install Bootstrap and Supporting Libraries

Run the following command to install Bootstrap and Popper.js (which are required for certain Bootstrap components) as dependencies:

npm install bootstrap @popperjs/core

2. Import Bootstrap in Your React App

After installing the packages, open your src/index.js (or src/index.tsx for TypeScript) and import Bootstrap CSS:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';


JavaScript 
import "bootstrap/dist/css/bootstrap.min.css"; 
import "bootstrap/dist/js/bootstrap.bundle.min";  
import React from "react";
import "./App.css";

function App() {
    return (
        <div className="App">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <a className="navbar-brand" href="#">
                    Navbar
                </a>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"  
                    data-bs-target="#navbarNav"  
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        <li className="nav-item active">
                            <a className="nav-link" href="#">
                                Home <span className="sr-only">(current)</span>
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">
                                Features
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">
                                Pricing
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div className="container mt-5">
                <div className="row">
                    <div className="col-md-6">
                        <div className="card">
                            <div className="card-body">
                                <h5 className="card-title">Card title</h5>
                                <p className="card-text">
                                    Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a href="#" className="btn btn-primary">
                                    Go somewhere
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

Output

bootstrap-2
Import Bootstrap as a Dependency
  • Layout & Components: Responsive navbar and card with title, text, and button using Bootstrap.
  • Bootstrap Features: Grid system for layout and spacing; JS features enabled via jQuery, Popper.js, and Bootstrap bundle.

[Method 3]: Using React-Bootstrap

For a more React-friendly approach, you can use the React-Bootstrap library, which provides pre-built Bootstrap components as React components. React-Bootstrap helps to seamlessly integrate Bootstrap’s UI elements into your React applications without relying on jQuery.

Step 1: Install React-Bootstrap and Bootstrap

Run the following command to install both the react-bootstrap package and Bootstrap itself:

npm install react-bootstrap bootstrap

Step 2: Import React-Bootstrap Components

React-Bootstrap allows you to use Bootstrap components as React components. For example, to add a navbar and a button:

JavaScript 
import React from 'react';
import { Navbar, Nav, Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Nav className="me-auto"> {/* Updated from 'mr-auto' to 'me-auto' */}
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
      </Navbar>
      <Button variant="primary">Click Me!</Button>
    </div>
  );
}

export default App;

Output

new-2
Using React-Bootstrap
  • Layout & Components: Dark-themed navbar, three responsive cards (image, title, description, button), and a footer.
  • Responsive Design: Grid adjusts cards per row based on screen size; footer has dark background with centered text.

Project Setup for React-Bootstrap

  • Create a React App: If you haven't already, create a new React app using the following command:
npx create-react-app my-app
cd my-app
  • Install Dependencies: Install axios, bootstrap, and reactstrap:
npm install axios bootstrap react-bootstrap
  • Project Structure : The Project Structure will look like this.

Screenshot-from-2023-10-19-12-40-38

Dependency list After installing packages 

"dependencies": {
  "@testing-library/jest-dom": "^5.17.0",               
  "@testing-library/react": "^13.4.0",                    
  "@testing-library/user-event": "^14.4.3",               
  "axios": "^1.6.0",                                    
  "bootstrap": "^5.3.2",                                
  "react": "^18.3.0",                                     
  "react-bootstrap": "^2.11.0",                            
  "react-dom": "^18.3.0",                                  
  "react-router-dom": "^6.18.0",                           
  "react-scripts": "5.0.1",                                
  "web-vitals": "^2.1.4"                               
}

Here's a simple implementation of a web page using react-bootstrap with navbar, dropdown, cards and and posts.

JavaScript 
// Filename - App.js

import React, { Fragment } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
import { Container, Row, Col } from "react-bootstrap";

import Post from "./components/Post";
import Header from "./components/Header";
import LeftCard from "./components/LeftCard";

const App = () => (
    <Fragment>
        <Header />

        <main className="my-5 py-5">
            <Container className="px-0">
                <Row
                    className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative g-0"
                >
                    <Col
                        xs={{ order: 2 }}
                        md={{ span: 4, order: 1 }} // Updated `size` to `span` in Bootstrap 5
                        tag="aside"
                        className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0"
                    >
                        <LeftCard />
                    </Col>

                    <Col
                        xs={{ order: 1 }}
                        md={{ span: 7, offset: 1 }} // Updated `size` to `span` in Bootstrap 5
                        tag="section"
                        className="py-5 mb-5 py-md-0 mb-md-0"
                    >
                        <Post />
                    </Col>
                </Row>
            </Container>
        </main>
    </Fragment>
);

export default App;

Output: This output will be visible on http://localhost:3000/ on the browser window.

  • Layout: Responsive header with two columns (LeftCard and Post) using Bootstrap’s Row and Col
  • Structure: Uses Fragment to return multiple components without extra DOM nodes

Customizing Bootstrap Styles in React

Bootstrap offers ready-to-use components for responsive websites, but you can customize them to match your React app’s style.

  • Why customize: Adapt Bootstrap components to fit your app’s design.
  • How to customize: Override CSS or use React-Bootstrap props with a simple example.

Step 1: Install Bootstrap in Your React Project

To get started, you need to install Bootstrap in your React project. You can do this by running the following command:

npm install bootstrap

Step 2: Import Bootstrap CSS

Once Bootstrap is installed, you can import its CSS into your React app. Go to your src/index.js (or src/index.tsx for TypeScript) file and add the following import statement at the top:

import 'bootstrap/dist/css/bootstrap.min.css';

Step 3: Create a Custom CSS File for Your Customizations

The easiest way to customize Bootstrap in React is by overriding its default styles with your own custom CSS. You can create a new CSS file, such as src/custom.css, to add these overrides.

/* custom.css */

/* Change the background color of the primary button */
.btn-primary {
  background-color: #4CAF50; /* Green color */
  border-color: #4CAF50;
}

/* Change the navbar background to dark */
.navbar {
  background-color: #333; /* Dark background for navbar */
}

Step 4: Import the Custom CSS File

After creating the custom styles, you need to import the custom.css file into your app. Go back to src/index.js and add this import statement after the Bootstrap CSS import:

import './custom.css';  // Import your custom styles

Step 5: Use Bootstrap Components with Your Custom Styles

With custom styles added, you can use Bootstrap components in React, like a Navbar and a Primary Button with your customized colors.

CSS 
/* custom.css */
.btn-primary {
    background-color: #4CAF50; 
    border-color: #4CAF50;
  }
  
  .navbar {
    background-color: #333;
  }
JavaScript 
import React from "react";
import { Button, Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./custom.css";  

function App() {
    return (
        <div>
            <Navbar bg="light" expand="lg">
                <Navbar.Brand href="#home">Custom Bootstrap</Navbar.Brand>
                <Nav className="me-auto"> {/* Updated from 'mr-auto' to 'me-auto' */}
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#features">Features</Nav.Link>
                </Nav>
            </Navbar>

            <div className="container mt-4">
                <Button variant="primary">Click Me!</Button>
            </div>
        </div>
    );
}

export default App;

Output

custom-bootstrap
Customize Bootstrap
  • Navbar: Default Bootstrap navbar styled with custom dark color (#333).
  • Button: .btn-primary overridden from blue to green (#4CAF50) using custom CSS.
Comment
Article Tags:
ReactJS
GBlog 2024

Explore