Steps to create React Application and installing Bootstrap

Step 1: Create a React application using the following command:

npx create-react-app multi-select

Step 2: After creating your project folder(i.e. multi-select), move to it by using the following command:

cd multi-select

Step 3: Install react-bootstrap in your working directory i.e. multi-select by executing the below command in the VScode terminal:

npm install react-bootstrap
npm install bootstrap

Step4: Add Bootstrap CSS to the index.js file:

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

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

In this article, we will add Spinner while rendering a component with the help of react-bootstrap. In the react web application, we can enhance the user experience by adding a Spinner styling component from the react-bootstrap library.

The two ways to add a spinner while rendering are discussed below: