How to Import Bootstrap CSS in a React Application
-
Import and Use the Bootstrap CSS for
create-react-app
Setup in React - 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.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn