4 Ways to Install Bootstrap in React to Create a More Detailed App

React is among the most popular JavaScript frameworks and libraries for building single-page applications and user interfaces. Its flexibility in building user interfaces using its reusable components, speed of development, and supportive community are reasons for its popularity. 

However, React must be combined with Cascading Style Sheets (CSS) to make its apps more visually appealing and presentable. Writing CSS from scratch can be time-consuming. 

Developers may spend a lot of time working on styling instead of the key functionalities of a React app. The good news is that tools and frameworks like Bootstrap make adding CSS to your React app easier. 

What is Bootstrap?

Bootstrap is an open-source CSS framework for front-end development. Bootstrap allows developers to create responsive and mobile-first websites through its comprehensive set of JavaScript and CSS-based design tools and templates. 

Bootstrap was created by Twitter and is also maintained by a team of engineers from the same company. Its source code is maintained on GitHub, and community members can contribute and send bug reports and suggestions. Bootstrap 5.3.0-alpha1 is the most recent version as of the time of writing. 

Why use Bootstrap with React?

• Saves time: Bootstrap takes care of formatting, giving you more time to focus on functionality. You thus don’t have to worry about issues such as the appearance of your forms or buttons but about areas such as whether the submit button sends data to your backend or API. 
• Ease of use: Once you have added Bootstrap to your React app, just take the pre-designed UI components and add them to your app. 
• Consistent design: Most apps grow in size over time. Ensuring a consistent design of your website is important if you want to attract loyal users. Bootstrap has a consistent style that will give your pages a uniform look. 
• Tons of templates to choose from: Bootstrap has hundreds of templates ranging from navbars, buttons, forms, and carousels to dropdowns, to mention a few, to choose from. 
• Ease of customization: Even though Bootstrap has design templates, you can always customize font size, color, and other features to suit your needs. 
• Community support: Bootstrap has extensive documentation to get you started. However, you can still bank on the big community, always adding new features and maintaining this CSS framework.  
• Responsive design: Once you have added Bootstrap to your React app, you are assured that your web app will be responsive on all screen sizes. 

How to install Bootstrap in React

A React app does not come with Bootstrap installed by default. But before we explore how to add/ install Bootstrap in React, we need to check a few things;

Prerequisites 

1. Check that Node.js is installed: This cross-platform JavaScript runtime environment allows developers to run JavaScript outside a web browser. 

Use this command to check if node.js is installed on your PC:

node -v

If node.js is installed, you will have an output similar to this on your terminal.

If it is not installed, you can check the download instructions from https://nodejs.org/en/. 

2. Check that React is installed: You will use React to create functionality while Bootstrap takes the formatting. 

Use this command to check if React is installed on your PC:

npm list react

If React is installed globally on your machine, you will have something like this on your terminal.

3. Create your react app: You can create React app manually, but it requires much work. For our demonstration purposes, we shall use the create-react-app command. Follow these steps to create your react app:

•       Install react-create-app on your machine. Using this command 

npm install -g create-react-app

•      Create your React app using this command 

npx create-react-app my-app

You can replace my-app with any name of your choice. For our case, we named our app react-b. 

Once installed, you will have something similar on your terminal:

Run these commands to get started 

• cd react-b (use the name of your app chosen in the previous step)
• npm start (this command starts your React app)

We can now go to the next steps and add/ install Bootstrap to our React app:

NPM Install Bootstrap Method

Node.js comes with npm (node package manager) installed by default. 

You can check the version of your npm through this command:

npm -v

If npm is installed, you will get an out such as 9.2.0 

You can now install bootstrap using this command:

npm install bootstrap

Once done, go to  ./src/index.js file. Add this line at the top.

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

Using Yarn Package Manager

Unlike npm, yarn isn’t installed by default when you install node.js. 

Install yard using this command;

npm install -g yarn

This command will install yarn globally, so you no longer have to install the package every time you create a React app. 

Run this command to add bootstrap to React:

yarn add bootstrap

Once done, go to  ./src/index.js file. Add this line at the top.

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

You should always import Bootstrap at the top of your app’s entry file before other CSS files. This makes it easy to alter your Bootstrap entries if you need to change the default values of the templates as you create your React app. 

CDN Method

Using a Content Delivery Network (CDN) link, you can add Bootstrap to React. By adding this CDN link, you include the Bootstrap library to your React app without downloading and hosting the files in your project folder. Follow these steps. 

• On your root folder navigate to the .public/index.html file
• On the <head> tag, add this <link> tag

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

• You need to add JavaScript dependencies to your app. Go to the body of your index.html file and add this tag just before the closing <body/> tag:

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Bootstrap is finally installed on your React app. 

Using React Bootstrap Package

The approaches we have covered so far were originally designed for HTML files. To understand this better, consider this drop-down code from Bootstrap: 

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">Action</a></li>

    <li><a class="dropdown-item" href="#">Another action</a></li>

    <li><a class="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

What is wrong with the code? Bootstrap, by default, uses class to classify its divisions (DIVs). However, React uses JSX, which uses camelCase syntax. You thus have to replace the class with className manually. 

To make that code work on React, we must replace every “class” with “className”. The final code will be:

<div className="dropdown">

  <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul className="dropdown-menu">

    <li><a className="dropdown-item" href="#">Action</a></li>

    <li><a className="dropdown-item" href="#">Another action</a></li>

    <li><a className="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

Luckily, we have two more approaches, react-bootstrap, and reactstrap, where manual intervention is not needed. 

React-bootstrap

React-bootstrap has true React components built from scratch. The library is compatible with Bootstrap core. 

Follow these steps to get started with React-bootstrap:

• Install React-bootstrap with this command:

npm install react-bootstrap bootstrap

• Navigate to src/index.js or App.js file and add this line before other CSS files 

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

React-bootstrap allows you to import a specific component instead of the entire library. For instance, if you need to import a button on one of your components, you can import it as follows;

import { Button } from 'react-bootstrap';

Reactstrap

This is a React component library for Bootstrap. Reactstrap relies on the Bootstrap CSS framework for its styles and theme. This library imports the right Bootstrap classes to your React app, allowing you to have consistent app styling. You also don’t need to add Bootstrap’s JavaScript files to trigger functionality. 

Follow these steps to add Reactstrap to your React app:

• Install Reactstrap through this command:

npm install reactstrap react react-dom

• Import Bootstrap using these commands:

npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'; (add this line to your app.js)

You can also use the CDN link option to include Bootstrap in your app. After the first step, go to the root directory and navigate to .public/index.html file and add this line to the <head> tag

<link

    rel="stylesheet"

    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"

  />

Reactstrap allows you to import a specific component instead of the entire library. For instance, if you need to import a button on one of your components, you can import as;

import { Button } from 'reactstrap';

Conclusion 

Above are some approaches you can use to install Bootstrap to your React app to style your web apps. The choice of installation approach is a matter of preference, as the end goal is the same.

Combining React with Bootstrap saves you from the pain of having to keep track of all CSS styles as your app grows. Styling your app becomes easy and efficient as you get more time to focus on the functionality. 

You may explore some reasons to choose React Native for mobile app development.