How to Import Bootstrap CSS in a React Application

1. Import and Use the Bootstrap CSS for create-react-app Setup in React
2. Import and Use the Bootstrap CSS for Custom Webpack Configuration in React

Creating and styling React components from scratch can be a time-consuming process. That’s why so many React developers rely on external libraries like Bootstrap to style their components.

These libraries inspire the styles of UI components, such as buttons and input fields.

Installing Bootstrap doesn’t make its styles automatically available in your application; you still need to import the library.

The exact process for making Bootstrap available in your React application depends on your setup and environment. This article will explore the most common solutions to making the library available in your app.

Import and Use the Bootstrap CSS for create-react-app Setup in React

The create-react-app setup makes importing and using Bootstrap CSS easy. If you’re using this environment, as most beginners React developers do, then you only have to follow simple steps.

First, you must install Bootstrap.

npm install bootstrap

The next step is importing the CSS file. To do that, you must use the import statement.

You must import the Bootstrap CSS file in the index.js file, which is the file that contains the entire component tree. Once you’ve located this file, all you have to do is add the import statement at the top.

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

Once you do, you can use styles and classes from Bootstrap CSS. Remember that in React, class is a reserved word, so we use the className attribute to apply classes to elements.

Import and Use the Bootstrap CSS for Custom Webpack Configuration in React

If you use a custom webpack configuration, you must find the config file and add another object to the loaders array. The actual object is below.

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
 }

You also need to install the Bootstrap library itself.

Once you’ve installed it and edited the webpack configuration, there is only one step left. You must import the Bootstrap CSS and JS files in the index.js file.

Once you locate the file, you should add the following at the top.

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

Once finished, you can use styles and jQuery-based elements in React. However, React does not mesh well with jQuery and other JavaScript tools.

That’s because jQuery and similar libraries change the state outside the boundaries of React framework, which makes it hard for React to keep track of state changes. So steer clear of using jQuery-based elements within React.

Bootstrap Libraries for React

Many web developers love using Bootstrap for its stability and flexibility. However, as we previously mentioned, the CSS library doesn’t mesh well with React.

There are two excellent libraries inspired by Bootstrap but tailored to be compatible with React.

The react-bootstrap library is a revised version of Bootstrap. Instead of traditional jQuery and CSS, it provides custom components, which offer many main library features.

It allows the developer to customize the feel, functionality, and appearance of your React application. The package is lightweight and, more importantly, allows you to import specific modules.

For instance, you can import just the custom Button component if you don’t need anything else.

The reactstrap is another library that aims to provide the features and functionality of Bootstrap within your React applications. You can install it with npm or include it through CDN.

This library doesn’t have its styles but reacts to the style definitions of the main Bootstrap library.

Like react-bootstrap, it allows you to import specific custom components. You can use many props to customize the functionality and appearance of the custom components.

Should You Use Bootstrap With React

Many React developers choose other alternatives, such as Material UI over the Bootstrap-influenced libraries.

Even though react-bootstrap and reactstrap libraries offer lots of opportunities for customization, their components still only accept a limited number of props, which can be restricting for some.

Generally, there’s nothing wrong with using Bootstrap CSS here and there. However, if you will only use tiny bits of Bootstrap CSS, importing the entire library might not be worth it.

It’s better to find another framework or write those custom styles yourself.