How to use Bootstrap in React applications with reactstrap

In this article we will see how to use the Bootstrap UI framework in React applications using reactstrap. You will learn how to add Bootstrap to a React application, use Bootstrap components, and style your application with Bootstrap themes.

Bootstrap is a popular front-end component library. It helps to build web applications using a set of prebuilt components. It also provides a responsive grid system and theming support.

Bootstrap components are a mix of HTML, CSS, and JavaScript with additional dependencies like jQuery. This makes them hard to use in React applications. The reactstrap library provides a React implementation of Bootstrap components with no dependency on jQuery. With reactstrap, we can easily use Bootstrap components as usual React components.

For this article, we assume that you're already familiar with React components.

If you're just getting started with React, you may want to look at the React Getting Started for a jump-start or check out 30 Days of React for a more structured and detailed course.

Selecting Between reactstrap and React Bootstrap#

There is another popular library that implements Bootstrap components in React, which is React Bootstrap. Both libraries, reactstrap and React Bootstrap, keep good parity with Bootstrap components and provide a similar approach to components. Both libraries would be a valid choice as a way to add Bootstrap components to your React application.

Here are some points that may help you to select between the two:

  • reactstrap depends on react-transition-group for animations and react-popper for positioning of popups. React Bootstrap provides own implementation for animations and positioning. If you're already using react-transition-group and react-popper in your project, using reactstrap will allow to re-use these packages and decrease the size of your application.

  • Review list of components provided by reactstrap and React Bootstrap. While they try to keep parity with Bootstrap there are some differences that might be important for your project.

  • React Bootstrap is a more mature solution and is more popular in terms of GitHub stars and npm downloads.

If you would like to learn more about React Bootstrap library, you may check out the How to Start Using Bootstrap with React article.

Adding reactstrap to Project#

Let's start by adding reactstrap to a project:

Components in reactstrap do not include CSS, they use Bootstrap CSS instead. This is great as it allows us to reuse Bootstrap themes to style React applications.

We need to install Bootstrap too as we're going to use standard Bootstrap CSS file from it:

Now, we can use reactstrap components in our project:

This demo shows three different buttons using the Button component. We start by importing standard Bootstrap CSS. Next, we import Button component from the reactstrap package. Finally, we use Button to render buttons.

Using reactstrap Components#

Here is a step-by-step guide to adding any reactstrap component to a React project.

We can start by looking for a component we want to use among a list of components on the reactstrap site. For every component, there is a description, demo, and API description available. Once we've found the right component, we can import it to a project and use it.

For example, let's add the Toast component:

We import the Toast component from reactstrap. Also, we import ToastHeader and ToastBody components that are used to declare toast's header and body respectively. Additionally, we leverage useState React hook to control the visibility of our toast. The isOpen property of the Toast component defines whether to show it. The toggle property of the ToastHeader component accepts a function that will run when a user tries to close the toast.

Styling reactstrap Components#

Components from reactstrap do not define their own CSS and rely on the Bootstrap CSS. That means that a styling approach for components is the same as for standard Bootstrap components. We can apply an existing custom theme or create our own.

You can find more information on creating a custom theme in theming Bootstrap documentation.

For example, let's define a new custom.scss file with the following content:

In this file, we override default values for Bootstrap background and primary colors. Also, we import the standard Bootstrap CSS file to get all the default styles.

Now, we can use this custom.scss file in our application instead of the standard one:

This example is identical to our first demo with three buttons. However, instead of the standard Bootstrap CSS file, we import our custom.scss file. This affects the background and primary colors.

Conclusion#

Using reactstrap we can quickly add Bootstrap to a React application. We can use ready to use components to quickly build and leverage Bootstrap themes to adjust the style of our React applications.

More resources#