Bootstrap With React: How to Setup and Use It

Setting up a React project

In this section, we're going to set up a new React application with the create-react-app command. The create-react-app command is the easiest way to set up a native React project and is also easy to maintain.

Run the command below to bootstrap a new React app.

npx create-react-app my-app

or use yarn

yarn create react-app my-app

Where my-app is the name of our application and a folder will be created with this name on your PC.

After a successful installation, navigate into the my-app directory in your terminal with the cd command below:

cd my-app

Start your app server with any of the commands below:

npm run start

or using yarn

yarn run start

Your server will run on port "http://localhost:3000" or any available port with the screen below:

Installing Bootstrap in a React app

Run the command below to install Bootstrap and its dependencies in your React application.

npm install bootstrap

or use yarn

yarn add bootstrap

This installation will allow us to use Bootstrap CSS classes and JavaScript functions in our React application.

Adding Bootstrap files in a React App

After a successful installation of the Bootstrap package, the next step is to import the Bootstrap minified CSS and JavaScript bundle files in the /src/index.js file as shown below.

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

To confirm that Bootstrap is correctly installed in your React app, replace your app.js file with the following snippet.

import "./App.css";
function App() {
return (
<div className='App'>
<header className='App-header'>
<div class='alert alert-primary' role='alert'>
<p style={{ display: "none" }} className='d-block'>
Bootstrap is now successfully installed 😃
</p>
<p className='d-none'>
Bootstrap is not installed if you can see this 😢
</p>
</div>
</header>
</div>
);
}
export default App;

If Bootstrap is successfully installed, you should see the following screen:

If Bootstrap is not successfully installed or you comment out the Bootstrap CSS and JS files in index.js, you should see the following screen:

Bootstrap components

Bootstrap offers collections of pre-built HTML, CSS, and JavaScript components to help developers create responsive, mobile-first web applications quickly and easily.

Some of the components provided by Bootstrap are discussed below:

Accordion

A Bootstrap accordion is a user interface component that displays collapsible content sections. It typically consists of a series of headers each associated with a content section that can be expanded or collapsed by clicking on the header as shown below:

PS: For the accordion collapsible to function properly, the Bootstrap JavaScript plugin is necessary.

Navbar

A navbar (short for navigation bar) is a user interface component that provides users with a menu of navigation links. It is usually located at the top of a web page and is used to guide users through various sections of a website or web application as shown below:

Modals

Bootstrap modal is a user interface component that is used to display content on top of the current page or application, in a separate layer or dialog box. Modals are commonly used for displaying lightboxes, user notifications, or custom content.

An example of a Bootstrap modal is shown below:

Pagination

It is a technique that is commonly used in websites and web applications to display lists of items such as search results, product listings, or news articles.

It is used in dividing large amounts of content into smaller, more manageable page links referred to as pagination. Here is an example of pagination.

Placeholders

Bootstrap placeholder refers to a temporary visual element or message that is displayed while content is being loaded.

It is commonly used to provide feedback to users that something is happening or loading and to prevent the page or application from appearing unresponsive or blank. Below is an example of a placeholder in Bootstrap.

Progress bar

The Bootstrap progress bar is a graphical user interface component that shows how far a task or operation has progressed. It is commonly used to indicate how much of a task has been completed and how much work remains.

A progress bar can also be labeled in Bootstrap as shown below:

Basic Bootstrap layout in React

Bootstrap layout refers to the breakpoint, containers, columns, and grid-based layout system provided by the Bootstrap framework that enables developers to create responsive web pages that adapt to different screen sizes.

Bootstrap grid system

The Bootstrap Grid system utilizes the flexbox grid technology to construct a mobile-first 12-column system.

Bootstrap utility classes

Bootstrap utility classes serve the purpose of displaying, hiding, arranging, and providing gaps between elements.

The Bootstrap utility classes are grouped into the following:

• Display property utilities
• Toggle visibility utilities
• Margin and padding or spacing utilities
• Flexbox utilities

Bootstrap breakpoints

As per the documentation of Bootstrap, breakpoints are configurable widths that define the behavior of the responsive layout across various device or viewport sizes in the Bootstrap framework.

The main core concepts of Bootstrap breakpoints include:

• Breakpoints are the building blocks of responsive design
• Use media queries to architect your CSS by breakpoint.
• Mobile-first, responsive design is the goal.

The predefined min-width media query breakpoints in Bootstrap are as follows:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
The following are the pre-defined max-width media query breakpoints in Bootstrap:
// sm applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// md applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// lg applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// xl applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// xxl applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Wrapping up

In conclusion, Bootstrap is a powerful and popular CSS framework that can be easily integrated into a React application to enhance its design and functionality. With the help of pre-built Bootstrap components and a responsive grid system, developers can save more time and effort in the development process.

By following the steps outlined in this article, developers can easily set up and use Bootstrap CSS and JavaScript in their React applications and take advantage of its many benefits.

Troubleshooting common issues

This section covers the common issues when setting up or using Bootstrap with React and how to solve them

• If Bootstrap is not working after installation, ensure you've added the correct Bootstrap CSS and JS files in the src/index.js file.
• Ensure you've added valid Bootstrap classes such as text-primary or bg-primary in your JSX element.
• Ensure your custom CSS file is imported below the Bootstrap CSS file for specificity and to override Bootstrap classes.