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.
For this article, we assume that you're already familiar with React components.
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.
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
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.
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.