React Bootstrap tutorial

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!

Some of the components that React Bootstrap offers are:

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:

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:

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

Install React Bootstrap#

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

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

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

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

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:

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.

2. Navigation bar#

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

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:

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.

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:

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:

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.

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.