How to Set up a React Bootstrap App

React-Bootstrap is a component-based library that provides native Bootstrap components as pure React components. Instead of utilizing JavaScript source and plugins from the CDN, it converts all JavaScript to React and bundles all components together. It's compatible with all kinds of Bootstrap themes to give a consistent appearance and maintain homogeneity in your app. In this guide, you'll learn how to easily integrate React Bootstrap in any React app by setting up a React Bootstrap app in just a few minutes.

Navigate to the directory where you want to store your project locally and create a new project using create-react-app by running the following command:

To consume react-bootstrap modules, install two packages: react-bootstrap and Bootstrap, by running the following command:

The first package will install all the react-bootstrap core components and place them inside your React's node modules folder. From there, you can easily import any component you want to use.

The Bootstrap package contains all the Bootstrap styles to style your components and other things, such as layouts, utilities, typography, etc.

Remove the logo, App.css, and all their imports from App.js. Clean out the starter template inside the App component. Your App.js should look like this:

Note: Sometimes removing App.css might land you an error. In such cases, instead of deleting the App.css, keep it empty, or if you have already deleted it, create a blank CSS file under the same name in the root directory.

Inside the root directory, run :

This will spin up a local development server (usually on port 3000) and you can see all your changes live in the browser.

To use Bootstrap styles in your component, you must import them on the top.

This lets you use all your regular Bootstrap classes for layout, utilities, typography, colors, etc. and is the CDN equivalent of adding the following line inside your index.html file :

Reasons react-bootstrap doesn't include default bootstrap styles with their components:

The best and most efficient way to include Bootstrap styles is by always using a CDN. This is because a CDN loads much faster than your app due to caching in browsers, so it avoids a lagging user experience. Use the first method only when you want to use Bootstrap styles in a few specific components only.

You can also include Bootstrap's source SASS files in your main SASS file and import it inside your component. Just include the following line inside a .scss file:

and the following inside your component (ex App.js file) :

Let's look at a quick and simple example that shows how to import the desired components and render them on the DOM.

To use the Button component, simply import it from react-bootstrap in either of these ways :

Then render this component inside App.js:

You can easily customize any Bootstrap theme that you want to use in your app or rewrite the Bootstrap classes and variables accordingly.

Create a custom SASS file and include the following block of code :

Then import Bootstrap to set these changes :

And import it into any component like a regular SASS file:

Setting up a React Bootstrap app is fairly simple and doesn't require any complex installations. React Bootstrap's official docs are precise, leaving no room for doubt or confusion. Using a component-based UI library like React Bootstrap reduces your development time so you can focus more on implementing complex event-driven features in your app.