For Developers

Bootstrap With React: How to Setup and Use It

Bootstrap with React

Bootstrap is a mobile-first CSS framework. It is one of the leading frontend frameworks in web development with over 162k stars on GitHub and over 4.9 million weekly downloads on NPM.

Benefits of using Bootstrap in a React-powered application include, customization, a large community, faster development with prebuilt components and a responsive grid system reducing development time and efforts.

Setting up a React project

In this section, we're going to set up a new React application with the create-react-app command. The create-react-app command is the easiest way to set up a native React project and is also easy to maintain.

Run the command below to bootstrap a new React app.

npx create-react-app my-app

or use yarn

yarn create react-app my-app

Where my-app is the name of our application and a folder will be created with this name on your PC.

After a successful installation, navigate into the my-app directory in your terminal with the cd command below:

cd my-app

Start your app server with any of the commands below:

npm run start

or using yarn

yarn run start

Your server will run on port http://localhost:3000 or any available port with the screen below:

Bootstrap react native.webp

Installing Bootstrap in a React app

Run the command below to install Bootstrap and its dependencies in your React application.

npm install bootstrap

or use yarn

yarn add bootstrap

This installation will allow us to use Bootstrap CSS classes and JavaScript functions in our React application.

Adding Bootstrap files in a React App

After a successful installation of the Bootstrap package, the next step is to import the Bootstrap minified CSS and JavaScript bundle files in the /src/index.js file as shown below.

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

To confirm that Bootstrap is correctly installed in your React app, replace your app.js file with the following snippet.

import "./App.css";

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <div class='alert alert-primary' role='alert'>
          <p style={{ display: "none" }} className='d-block'>
            Bootstrap is now successfully installed 😃
          <p className='d-none'>
            Bootstrap is not installed if you can see this 😢

export default App;

If Bootstrap is successfully installed, you should see the following screen:

Bootstrap react.webp

If Bootstrap is not successfully installed or you comment out the Bootstrap CSS and JS files in index.js, you should see the following screen:

how to use Bootstrap.webp

Bootstrap components

Bootstrap offers collections of pre-built HTML, CSS, and JavaScript components to help developers create responsive, mobile-first web applications quickly and easily.

Some of the components provided by Bootstrap are discussed below:


A Bootstrap accordion is a user interface component that displays collapsible content sections. It typically consists of a series of headers each associated with a content section that can be expanded or collapsed by clicking on the header as shown below:

using Bootstrap with react.webp

PS: For the accordion collapsible to function properly, the Bootstrap JavaScript plugin is necessary.

A navbar (short for navigation bar) is a user interface component that provides users with a menu of navigation links. It is usually located at the top of a web page and is used to guide users through various sections of a website or web application as shown below:

how to use Bootstrap css.webp


Bootstrap modal is a user interface component that is used to display content on top of the current page or application, in a separate layer or dialog box. Modals are commonly used for displaying lightboxes, user notifications, or custom content.

An example of a Bootstrap modal is shown below:

react native css framework.webp


It is a technique that is commonly used in websites and web applications to display lists of items such as search results, product listings, or news articles.

It is used in dividing large amounts of content into smaller, more manageable page links referred to as pagination. Here is an example of pagination.

How to Use Bootstrap with React.webp


Bootstrap placeholder refers to a temporary visual element or message that is displayed while content is being loaded.

It is commonly used to provide feedback to users that something is happening or loading and to prevent the page or application from appearing unresponsive or blank. Below is an example of a placeholder in Bootstrap.

How to install bootstrap in React.js.webp

Progress bar

The Bootstrap progress bar is a graphical user interface component that shows how far a task or operation has progressed. It is commonly used to indicate how much of a task has been completed and how much work remains.

Set up a React Bootstrap.webp

A progress bar can also be labeled in Bootstrap as shown below:

Progress bar in React Bootstrap.webp

Basic Bootstrap layout in React

Bootstrap layout refers to the breakpoint, containers, columns, and grid-based layout system provided by the Bootstrap framework that enables developers to create responsive web pages that adapt to different screen sizes.

Bootstrap grid system

The Bootstrap Grid system utilizes the flexbox grid technology to construct a mobile-first 12-column system.

Bootstrap grid system.webp

Bootstrap utility classes

Bootstrap utility classes serve the purpose of displaying, hiding, arranging, and providing gaps between elements.

The Bootstrap utility classes are grouped into the following:

  • Display property utilities
  • Toggle visibility utilities
  • Margin and padding or spacing utilities
  • Flexbox utilities

Bootstrap breakpoints

As per the documentation of Bootstrap, breakpoints are configurable widths that define the behavior of the responsive layout across various device or viewport sizes in the Bootstrap framework.

The main core concepts of Bootstrap breakpoints include:

  • Breakpoints are the building blocks of responsive design
  • Use media queries to architect your CSS by breakpoint.
  • Mobile-first, responsive design is the goal.

The predefined min-width media query breakpoints in Bootstrap are as follows:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
The following are the pre-defined max-width media query breakpoints in Bootstrap:
// sm applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// md applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// lg applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// xl applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// xxl applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Wrapping up

In conclusion, Bootstrap is a powerful and popular CSS framework that can be easily integrated into a React application to enhance its design and functionality. With the help of pre-built Bootstrap components and a responsive grid system, developers can save more time and effort in the development process.

By following the steps outlined in this article, developers can easily set up and use Bootstrap CSS and JavaScript in their React applications and take advantage of its many benefits.

Troubleshooting common issues

This section covers the common issues when setting up or using Bootstrap with React and how to solve them

  • If Bootstrap is not working after installation, ensure you've added the correct Bootstrap CSS and JS files in the src/index.js file.
  • Ensure you've added valid Bootstrap classes such as text-primary or bg-primary in your JSX element.
  • Ensure your custom CSS file is imported below the Bootstrap CSS file for specificity and to override Bootstrap classes.


  • Author

    Ayodele Samuel Adebayo

    Ayodele Samuel Adebayo is a seasoned Technical Writer, and Frontend Dev, his articles have been featured on Hashnode Web3, CopyCat, and ImageKit, he's also a CSE at Hashnode. His articles provide valuable insights and practical tips for developers and enthusiasts.

Frequently Asked Questions

To use React Bootstrap with React, you can follow these steps:

  1. Create a new React application or navigate to an existing React project.

  2. Install React Bootstrap package using a package manager like npm or yarn.

  3. Import the required components from React Bootstrap and the CSS styles from Bootstrap in your React components.

  4. Use the imported React Bootstrap components in your React components. You can use them just like any other React component.

  5. You can now run your React application and see the React Bootstrap components in action.

To use Bootstrap in a ReactJS app, you can follow these steps:

  • Install Bootstrap: You need to install Bootstrap as a dependency in your project. You can do this using npm or yarn.

  • Import Bootstrap CSS: In your React component, you need to import the Bootstrap CSS file. There are a couple of ways to do this, depending on your project setup.

  • Use Bootstrap components: With Bootstrap installed and CSS imported, you can start using Bootstrap components in your React components. You can use the pre-built Bootstrap components directly in your JSX code.

Here are a few key differences between React Bootstrap and Bootstrap:

  • Component-based structure: React Bootstrap provides components that follow React's component-based structure. These components can be easily composed and reused within a React application, enabling you to build complex user interfaces.

  • Integration with React ecosystem: React Bootstrap integrates with the React ecosystem seamlessly. It leverages React's virtual DOM and component lifecycle to efficiently manage the rendering and updates of components.

  • Prop-based configuration: React Bootstrap components accept props to customize their behavior and appearance. This allows you to easily configure and control the components using React's props system.

  • No direct dependency on jQuery: Bootstrap relies on jQuery for some of its JavaScript functionality, such as dropdowns and modals. React Bootstrap, on the other hand, avoids direct dependencies on jQuery and provides its own implementation of these features using React and JavaScript.

  • React-specific features: React Bootstrap may introduce additional features or enhancements that are specific to React, such as handling state using React's state management, integrating with React Router, or using React's event handling system.

View more FAQs


What's up with Turing? Get the latest news about us here.


Know more about remote work.
Checkout our blog here.


Have any questions?
We'd love to hear from you.

Hire remote developers

Tell us the skills you need and we'll find the best developer for you in days, not weeks.

Hire Developers