Home/Blog/Programming/React Bootstrap tutorial
Home/Blog/Programming/React Bootstrap tutorial

React Bootstrap tutorial

12 min read
May 15, 2025
content
What is React Bootstrap?
Why use React Bootstrap?
Properties of React Bootstrap
Insertion to virtual DOM
Bootstrap stylesheet allows for consistency
Accessibility out of box
Cleaner code
Real-world use cases of React Bootstrap
1. How can startups use React Bootstrap for rapid prototyping?
2. Why do enterprises choose React Bootstrap for scalable dashboards?
3. How does React Bootstrap improve UX for e-commerce websites?
Practice with React Bootstrap
Set up your environment
Install React Bootstrap
Import components
React Bootstrap components
1. Buttons
2. Navigation bar
3. Layout with grid system
Advanced components and customization
Forms and modals
Customizing Bootstrap styles
Putting it all together: A sample app
React Bootstrap best practices and tips
Wrapping up and next steps
Continue reading about React and CSS

Become a Software Engineer in Months, Not Years

From your first line of code, to your first day on the job — Educative has you covered. Join 2M+ developers learning in-demand programming skills.

Key takeaways

  • React Bootstrap integrates Bootstrap’s styling with React, allowing developers to use prebuilt, responsive components without direct DOM manipulation.

  • Unlike traditional Bootstrap, React Bootstrap provides React-based implementations of Bootstrap components, removing the dependency on jQuery and Popper.js.

  • By leveraging Bootstrap’s stylesheet, React Bootstrap ensures built-in support for responsive layouts and accessibility.

  • React Bootstrap allows selective component imports, which leads to cleaner, more efficient code than including the entire Bootstrap library.

  • Developers can use Sass for custom styling while utilizing features like modals, accordions, and grids to rapidly build prototypes.

Building modern web apps requires balancing speed, responsiveness, and maintainability.

Bootstrap helps with UI consistency, but traditional Bootstrap doesn’t play well with React’s virtual DOM.

Enter React-Bootstrap, a library that lets you use Bootstrap components as native React components without jQuery.

In this blog, we’ll explore how to integrate React Bootstrap and build a fully responsive webpage step-by-step.

Let’s dive in!

What is React Bootstrap?#

Bootstrap is the most widely used CSS framework for building responsive layouts. Traditionally, Bootstrap relied on jQuery and direct DOM manipulation, which isn’t ideal for React’s virtual DOM. React Bootstrap solves this by providing Bootstrap components as React components, allowing seamless integration with React applications—without requiring jQuery or Popper.js.

Bootstrap 4 depends on jQuery, but jQuery is not ideal for React, as it uses direct DOM manipulation while React uses a virtual DOM. React Bootstrap essentially replaces the Bootstrap JavaScript, so each component has been rebuilt to integrate beautifully with React. This gets rid of the need for jQuery.

Some of the components that React Bootstrap offers are:

  • Alerts
  • Navbar
  • Dropdowns
  • Buttons
  • Tables
  • Pagination
  • Overlays

Why use React Bootstrap?#

React Bootstrap is optimized for React, eliminating unnecessary dependencies like jQuery. By leveraging React components instead of direct DOM manipulation, it provides a seamless, ‘native’ React experience with Bootstrap’s styling power. Let’s look at some of the main reasons why you should use React Bootstrap for your apps.

Properties of React Bootstrap#

Let’s have a look at the properties of React Bootstrap:

Insertion to virtual DOM#

React Bootstrap was introduced to allow Bootstrap components to be inserted to the Virtual DOM. These components are actual React components, so there is no need to use jQuery or Popper.js to manipulate the DOM.

Bootstrap stylesheet allows for consistency#

React Bootstrap still relies on the Bootstrap stylesheet, which ensures consistent styling. This means all built-in Bootstrap themes, colors, and utilities continue to work seamlessly with React Bootstrap components.

Accessibility out of box#

Accessibility is super important when it comes to creating your webpage. Crafting accessible components is even easier with React Bootstrap over vanilla Bootstrap.

Cleaner code#

React Bootstrap uses React style components that include all the lengthy class information that Bootstrap would traditionally use. All of this is done under the hood and results in cleaner, more readable code.

Real-world use cases of React Bootstrap#

React Bootstrap is more than just a styling framework—it’s a powerful tool that accelerates development while ensuring consistency and accessibility. Here are three practical scenarios where React Bootstrap shines:

1. How can startups use React Bootstrap for rapid prototyping?#

Scenario: Imagine you’re a front-end developer at a startup, and your team has just landed a pitch meeting with investors. You need a functional dashboard prototype ready within a week to showcase your product’s potential.

Solution: Instead of spending hours styling from scratch, you leverage React Bootstrap’s prebuilt components like Navbar, Cards, and Buttons to quickly structure a professional UI. The grid system helps you organize content efficiently, ensuring a fully responsive layout. By reusing components, you can iterate faster, focus on functionality, and impress stakeholders with a polished prototype.

2. Why do enterprises choose React Bootstrap for scalable dashboards?#

Scenario: You’re part of a large enterprise development team working on an internal dashboard for managing employee performance and analytics. The design needs to be consistent across multiple teams, meet accessibility standards, and be easy to maintain.

Solution: React Bootstrap provides a unified design language with built-in theming and responsive utilities, ensuring a consistent look and feel across the application. The accessible components (such as forms with proper ARIA attributes) reduce the need for manual accessibility fixes. Plus, React Bootstrap’s flexibility allows you to extend styles while keeping maintenance simple, making it the perfect fit for scalable enterprise applications.

3. How does React Bootstrap improve UX for e-commerce websites?#

Scenario: You’re a front-end developer working for an e-commerce company, and your team is tasked with revamping the product listing and checkout pages. The challenge? You need a mobile-first, highly responsive design that works seamlessly across devices while ensuring a smooth shopping experience.

Solution: With React Bootstrap’s flexible grid system, you can dynamically adjust product cards for different screen sizes, ensuring a seamless browsing experience on desktops, tablets, and mobile devices. Components like Carousels help showcase featured products, while modals enhance the checkout experience by providing smooth, non-intrusive pop-ups for cart previews. By leveraging React Bootstrap’s form controls, you can build intuitive checkout flows with validation, improving user engagement and conversion rates.

By leveraging React Bootstrap, teams can save development time, ensure UI consistency, and create accessible, responsive designs without reinventing the wheel.

Practice with React Bootstrap#

If you are unfamiliar with creating a React application, please go through our course. It will help you understand React from scratch and get up-to-date knowledge before progressing here:

Cover
React Deep Dive: From Beginner to Advanced

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, and teach you as many best practices as possible. Furthermore, this course digs deeper into the most popular, latest, and straight forward ways to use React.

16hrs 40mins
Beginner
4 Challenges
23 Quizzes

The following are the steps when working with React Bootstrap:

Set up your environment#

Before diving into React Bootstrap, ensure you have Node.js and npm (or Yarn) installed on your machine. Then, set up a new React project using Create React App:

npx create-react-app react-bootstrap-tutorial

Once your project is ready, navigate to the React project using the following command:

cd react-bootstrap-tutorial

Install React Bootstrap#

Run the following command to install React Bootstrap and Bootstrap itself:

npm install react-bootstrap bootstrap

After installation, import Bootstrap’s CSS file in your src/index.js or src/App.js:

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

This import ensures that your components are styled correctly with Bootstrap’s default theme.

Import components#

According to React Bootstrap, you should refrain from importing the entire react-bootstrap library when you are importing a component. When declaring a component, instead of only importing what you actually need:

Single import from React Bootstrap

//this only imports what we need
import Alert from 'react-bootstrap/Alert';
//this imports the whole library and uses object destructuring to grab the Button object
import { Alert } from 'react-bootstrap';
Importing a single component

However, if you need multiple components from the react-bootstrap library, object destructuring is preferred to keep your code DRY.

Multiple imports from React Bootstrap

// Preferred: Import multiple components in a single statement for cleaner and more efficient code
import { Alert, Form, Button, Card } from 'react-bootstrap';
// Avoid: Importing each component separately increases redundancy and makes the code less readable
import Alert from 'react-bootstrap/Alert';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
Importing multiple components

The first way allows you to keep from repeating yourself by listing the import statements over and over again, and only changing the component name.

React Bootstrap components#

React Bootstrap offers a wide variety of components. Let’s walk through some of the most common ones.

1. Buttons#

The Button component is a great starting point. Here’s how you can use it:

import React from 'react';
import { Button } from 'react-bootstrap';
function App() {
return (
<div className="App">
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
</div>
);
}
export default App;
Using buttons from the React Bootstrap

In the above code:

  • Lines 1–2: We import the React library and the Button component from the react-bootstrap library.

  • Lines 4–11: We define the functional component App, which returns JSX that renders a <div> with the class name “App”. Inside this <div>, we include two <Button> components with different variants—one with variant="primary" and the other with variant="secondary"—to display buttons styled according to Bootstrap’s primary and secondary themes.

  • Line 13: We export the App component as the default export so that it can be imported and rendered elsewhere in our application.

Tip: Experiment with different variants like success, warning, danger, etc., to match your design needs.

2. Navigation bar#

A responsive navigation bar can be built easily using the Navbar component:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
function Navigation() {
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">React Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">About</Nav.Link>
<Nav.Link href="#contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default Navigation;
Using the navigation bar from the React Bootstrap

This code snippet creates a dark-themed, responsive navigation bar that collapses on smaller screens.

  • Line 2: We import the Navbar and Nav components from the react-bootstrap library.

  • Lines 4–17: We define a functional component named Navigation that returns the JSX structure for our navigation bar.

    • Lines 5–6: We start the JSX return block with the <Navbar> component, setting its background to dark (bg="dark"), its variant to dark (variant="dark"), and enabling responsive behavior with expand="lg".

    • Line 7: Inside the <Navbar>, the <Navbar.Brand> component is used to display the brand name ("React Bootstrap") and link it to the #home section.

    • Line 8: The <Navbar.Toggle> component adds a button that toggles the visibility of the collapsible content on smaller screens, with the aria-controls attribute referencing the collapsible element’s ID.

    • Lines 9–15: The <Navbar.Collapse> component wraps the collapsible navigation content. Inside it, the <Nav> component (with the class mr-auto to align items) contains three <Nav.Link> components, each linking to different sections: Home, About, and Contact.

  • Line 20: Finally, we export the Navigation component as the default export so it can be imported and used in other parts of the application.

3. Layout with grid system#

React Bootstrap leverages Bootstrap’s powerful grid system, allowing you to design responsive layouts with ease:

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
function GridExample() {
return (
<Container>
<Row>
<Col sm={8} style={{ backgroundColor: '#f8f9fa' }}>Main Content</Col>
<Col sm={4} style={{ backgroundColor: '#e9ecef' }}>Sidebar</Col>
</Row>
</Container>
);
}
export default GridExample;
Using layout with grid system from the React Bootstrap

In the above code:

  • Line 2: We import the Container, Row, and Col components from the react-bootstrap library.

  • Lines 4–13: We define the functional component GridExample that returns JSX to build a responsive grid layout.

    • Line 6: The <Container> component serves as a wrapper that provides proper spacing and centers the content.

    • Line 7: The <Row> component creates a horizontal row to arrange the grid columns.

    • Line 8: The first <Col> component occupies 8 grid columns (using sm={8}) and applies an inline style with a light background color. It is used to display the “Main Content”.

    • Line 9: The second <Col> component occupies 4 grid columns (sm={4}) and applies a different inline background style, designated for the “Sidebar”.

    • Lines 10–11: These lines close the <Row> and <Container> components, respectively.

  • Line 15: We export the GridExample component as the default export, making it available for use in other parts of the application.

Using <Container>, <Row>, and <Col>, you can quickly build layouts that adapt to different screen sizes.

Advanced components and customization#

Let’s discuss some components and customization of React Bootstrap.

Forms and modals#

React Bootstrap makes creating forms and modals straightforward. For instance, a simple modal can be created as follows:

import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
function ExampleModal() {
const [show, setShow] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setShow(true)}>
Launch Modal
</Button>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton>
<Modal.Title>Modal Heading</Modal.Title>
</Modal.Header>
<Modal.Body>This is the modal content.</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setShow(false)}>
Close
</Button>
<Button variant="primary" onClick={() => setShow(false)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default ExampleModal;
Using forms and modals from the React Bootstrap

In the above code:

  • Lines 1–2: We import the React library along with the useState hook, and we also import the Modal and Button components from the react-bootstrap library.

  • Lines 4–29: We define the functional component ExampleModal, which will encapsulate our modal functionality.

    • Line 5: We declare a state variable show using the useState hook with an initial value of false. The show state determines whether the modal is visible, and setShow is used to update this state.

    • Lines 7–10: We return a React fragment that contains the main UI elements. The first <Button> component (with a primary variant) is rendered and, when clicked, calls setShow(true) to display the modal.

    • Line 13: We render the <Modal> component, where the show prop is set to the value of the show state, controlling the modal’s visibility. The onHide prop is provided a function that calls setShow(false), allowing the modal to be closed when the backdrop is clicked or when the close button is used.

    • Lines 14–16: Inside the <Modal>, we render a <Modal.Header> with the closeButton attribute, which displays a button to close the modal. It also contains a <Modal.Title> that displays the modal’s heading.

    • Line 17: The <Modal.Body> contains the main content of the modal, in this case, a simple text string.

    • Lines 18–25: The <Modal.Footer> includes two <Button> components. The first button has a secondary variant and, when clicked, closes the modal by calling setShow(false). The second button has a primary variant and similarly closes the modal on click. It could also be used for actions like saving changes before closing.

  • Line 31: We export the ExampleModal component as the default export, making it available for use in other parts of our application.

Customizing Bootstrap styles#

While React Bootstrap provides great defaults, you might want to customize its appearance. Here are a few strategies:

  • Custom CSS: Override Bootstrap classes in your own stylesheet.

  • Sass variables: If you’re comfortable with Sass, modify Bootstrap’s Sass variables before compiling.

  • Styled components: Integrate with libraries like styled-components to create custom component styles.

Putting it all together: A sample app#

Let’s combine everything we’ve learned into a small sample app that features a navigation bar, a grid layout, and a modal.

The output of the above application is as follows:

Output of the application
Output of the application

React Bootstrap best practices and tips#

  • Component reusability: Break down your UI into smaller components. This not only makes your codebase manageable but also leverages the reusability that React champions.

  • Keep it modular: Isolate custom styles to specific components rather than globally overriding Bootstrap’s classes.

  • Responsive design: Always test your components on different screen sizes. React Bootstrap’s grid system makes this easier, but always verify on real devices when possible.

  • Stay updated: React Bootstrap is actively maintained. Check out its official documentation for updates and best practices.

Wrapping up and next steps#

You’ve just created your first application using React and React Bootstrap! Well done! React Bootstrap is pretty straightforward once you get the hang of it.

There’s still a lot more to learn about both React and Bootstrap. Some of the more advanced concepts in React that you’ll want to master are:

If you want to learn React, you can take our comprehensive React 18-based “Learn React” course on Educative, where you’ll build dynamic, interactive user interfaces from scratch using the latest features, best practices, and real-world examples.

To explore advanced React concepts further, we recommend Educative’s React learning path. This path covers intermediate and advanced topics on React, app development, and deployment. By the end, you’ll be equipped to build interactive, professional-quality applications.

Cover
React for Front-End Developers

Backed by Facebook and used by tech companies large and small, React has quickly become the most popular front-end framework in the tech world. Its developers are constantly in high demand. If you’re already familiar with JavaScript, adding React to your skillset is a wise career investment. This path will equip you with the skills to build outstanding apps using React. Take the leap, and become a complete front-end developer today.

15hrs
Beginner
176 Playgrounds
24 Quizzes

Frequently Asked Questions

How do I use Bootstrap and CSS together in React?

To use Bootstrap and CSS together, include the Bootstrap stylesheet via a CDN link or import it into your project. Combine this with custom CSS files for your unique styles. Make sure your custom CSS is loaded after Bootstrap’s styles so it can override the default styles effectively. You can also use preprocessors like Sass for greater customization and flexibility.

Can we use Bootstrap in React?

Yes, Bootstrap can be used in React. You can either include the Bootstrap CSS and JavaScript files directly via a CDN or install the Bootstrap package using a package manager like npm or yarn.

Additionally, React-Bootstrap, a library built specifically for React, allows you to use Bootstrap components as React components without requiring jQuery or direct DOM manipulation. This approach is more seamless and React-friendly.

How to check if Bootstrap is installed in React?

To check if Bootstrap is installed in your React project, follow these steps:

  • Check the dependencies section of your package.json file for Bootstrap.
  • Verify that the Bootstrap stylesheet is imported in your code (e.g., import 'bootstrap/dist/css/bootstrap.min.css'; in index.js or App.js).
  • Inspect your app in the browser and check if Bootstrap classes are applied to HTML elements.
  • Use developer tools to confirm that Bootstrap styling is active.

How to add Bootstrap 5 to React project?

To add Bootstrap 5 to a React project:

  • Install via npm or yarn: Run npm install bootstrap or yarn add bootstrap.
  • Import Bootstrap CSS: Add import 'bootstrap/dist/css/bootstrap.min.css'; in index.js or App.js.
  • Use a CDN (alternative): Add the Bootstrap CSS link to the <head> section of public/index.html.
  • For JavaScript components (like modals): Install Popper.js (npm install @popperjs/core) and import import 'bootstrap/dist/js/bootstrap.bundle.min.js';.

This setup enables Bootstrap in your React project.

Can I use Bootstrap JavaScript plugins directly in React?

Yes, but Bootstrap’s JavaScript components rely on jQuery and direct DOM manipulation, which conflicts with React’s virtual DOM. Instead, it’s recommended to use React-Bootstrap for React-friendly components. If you need to use Bootstrap’s JavaScript plugins, initialize them within useEffect (for functional components) or componentDidMount (for class components) to manage DOM interactions properly. Alternatively, you can use Bootstrap’s data attributes to trigger behaviors without writing custom JavaScript.

How do I resolve conflicts between custom styles and Bootstrap’s default styles in React?

To resolve conflicts between custom styles and Bootstrap in React, use CSS specificity, CSS modules, or styled-components to scope styles. Inline styles and !important can also override defaults when needed. Alternatively, customize Bootstrap’s SCSS variables or use utility classes to minimize conflicts.

Why aren’t my Bootstrap styles applying correctly in my React components?

If your Bootstrap styles are not applying correctly, consider the following:

  • Ensure Bootstrap is imported correctly: Use a CDN in your HTML file or install it via npm (npm install bootstrap) and import it in your main CSS or JavaScript file (import 'bootstrap/dist/css/bootstrap.min.css').
  • Check for CSS module conflicts: If using CSS modules or styled-components, Bootstrap styles might be overridden.
  • Verify class names and structure: Ensure your components use the correct Bootstrap class names and required parent elements (e.g., .container for grid layouts).
  • Using React-Bootstrap: Make sure you’re importing the correct React-Bootstrap components instead of relying only on class names.
  • Look for specificity conflicts: Custom styles may unintentionally override Bootstrap styles.

How do I integrate Bootstrap into my React project?

You can integrate Bootstrap in several ways:

  • CDN: Add the Bootstrap stylesheet link to index.html in the public folder.
  • npm/yarn: Run npm install bootstrap or yarn add bootstrap, then import CSS in index.js or App.js:
    import 'bootstrap/dist/css/bootstrap.min.css';
    
  • Bootstrap JavaScript: If using Bootstrap’s JavaScript components (like modals or tooltips), import:
    import 'bootstrap/dist/js/bootstrap.bundle.min.js';
    
    However, Bootstrap’s JavaScript relies on jQuery and direct DOM manipulation, which conflicts with React’s virtual DOM. It’s recommended to use React-Bootstrap, which provides React-friendly components.
  • Customization: Install Sass and modify Bootstrap’s SCSS variables before importing them.

How can I customize Bootstrap styles in my React application?

To customize Bootstrap in React, you can override styles using custom CSS, CSS modules, or styled-components. For deeper customization, modify SCSS variables by installing Bootstrap and Sass (npm install bootstrap sass), then import a custom SCSS file with modified variables before including Bootstrap:

$primary: #ff5733; // Change primary color
@import 'bootstrap/scss/bootstrap';

Use this file instead of the default Bootstrap CSS. If using React-Bootstrap, customize styles via props or utility classes. You can also tweak CSS variables (--bs-primary) for runtime changes.


Written By:
Christina Kopecky

Free Resources