How to set up a React-Bootstrap app

React has become immensely popular for front-end development, making tasks easier for developers. It is the go-to library for building application user interfaces in various industries. In responsive app development, CSS frameworks play a crucial role. If you’re a front-end developer, frameworks like Bootstrap, Foundation, and Bulma are likely familiar. Bootstrap, in particular, stands out as the preferred choice for many industries.

How to add Bootstrap to React

There are three popular methods for integrating Bootstrap into React applications:

  1. Utilizing the Bootstrap CDN

  2. Importing Bootstrap as a dependency directly into React

  3. Installing a dedicated package like React-Bootstrap

Utilizing the Bootstrap CDN

This is one of the simplest ways to incorporate Bootstrap into our React application. The beauty of the Bootstrap CDN is its effortless usage without requiring any installation or download. Just copy and paste the provided link into the head section of the application to enable its functionality. Because we want to include the current stable version of Bootstraphttps://getbootstrap.com/docs/versions/, our link will look like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" 
integrity="sha256-2TnSHycBDAm2wpZmgdi0z81kykGPJAkiUY+Wf97RbvY=" crossorigin="anonymous" />

Importing Bootstrap as a dependency

If we are using a build tool or module bundler like Webpack or Vite, this becomes the recommended approach for integrating Bootstrap into our React application. To initiate the installation process, simply execute the following command:

npm install bootstrap
// OR
yarn add bootstrap

Running this command will install the latest version of Bootstrap. After the installation finishes, we can include it in the entry file of our application:

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";

Installing the React-Bootstrap package

To set up a React-Bootstrap application, we’ll follow these steps:

Create a React app: If we haven’t installed create-react-app, let’s do so globally in the terminal.

npm install -g create-react-app

Create a new React application: Replace bootstrap-application with the preferred app name.

npx create-react-app bootstrap-application

Install React-Bootstrap: Navigate to the React project directory.

cd bootstrap-application

Install the react-bootstrap and bootstrap packages.

npm install react-bootstrap bootstrap

Integration: Open the src/index.js file and import Bootstrap's CSS file.

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

Usage: We can now use React Bootstrap components in our app's components. For example, in the src/App.js file.

import React from 'react';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css'; // This import is not needed if already imported in index.js
function App() {
  return (
    <div className="App">
      <h1>Hello React Bootstrap!</h1>
      <Button variant="primary">Primary Button</Button>
    </div>
  );
}
export default App;

Code explanation

Now let’s understand the code in the App.js file:

  • Line 1: We import the React library, allowing React components and features to be used.

  • Line 2: We import the Button component from the React-Bootstrap library, enabling the usage of Bootstrap-styled buttons within the React application.

  • Line 3: This import brings in the Bootstrap CSS file. It ensures that the Bootstrap styles are applied to the components used in the application. Importing this CSS file is necessary to have Bootstrap’s visual styles applied to React-Bootstrap components.

  • Lines 3–5: We created a functional component named App, the main component of this React application.

  • Lines 7–10: We utilized a <div> element as a container to hold the content of the App component. The class name App might be used for styling purposes or as a container for the application. This <div> contains the <h1> heading and <button>.

  • Line 14: Finally, export default App; exports the App component, allowing it to be used elsewhere in the application.

Demo application

Now, let’s make the above code executable by installing all dependencies. 

{
  "name": "bootstrap-application",
  "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-bootstrap": "^2.9.2",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Bootstrap application

Conclusion

Integrating Bootstrap into React applications enhances front-end development by providing a wide range of pre-styled components and utilities. In this Answer, we explored three methods for incorporating Bootstrap into React: using the Bootstrap CDN, importing Bootstrap as a dependency, and installing a dedicated package like React-Bootstrap.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved