Installing Bootstrap in React

In this post we'll see how to add Bootstrap library to Reactjs.

Bootstrap is one of the most popular feature-packed frontend toolkit for developing responsive, mobile-first application. There are several pre-styled components provided by Bootstrap to be used as it is.

Installing Bootstrap in React application

Assuming you have already created a React project using create-react-app just go to the project folder and run the following command to install Bootstrap.

npm install bootstrap

If you are using yarn then

yarn add bootstrap

Note that using the above command installs the latest Bootstrap version. If you want to install specific version then specify it with @.

npm install bootstrap@4.6.2

Verify the bootstrap installation

You can go to the package.json and there you should see the entry for bootstrap in the dependency section if it is installed.

"dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.1",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "web-vitals": "^2.1.4",
    "ws": "^8.13.0"
  },

Include Bootstrap's CSS and JS

In order to use Bootstrap you also need to import it in the components where it is needed. Rather than doing it in each component separately, it is better to import it in index.js file so that it is available to all the components.

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

Add these two imports in src\index.js to add minified css file and JavaScript bundle (bundle includes Popper for positioning dropdowns, poppers, and tooltips)

You can also include Popper and Bootstrap's JS separately.

import '@popperjs/core/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

After that you can use Bootstrap for styling in your components.

Here is a simple example with changes in App.js

function App() {
  return (
    <div className="container">

      <div className="row">
        <div className="col-xs-12">
          <h1>Using Bootstrap</h1>
          <p>Just to check Bootstrap integration in React app</p>
        </div>
      </div>
      <button className="btn btn-primary">Click Me</button>
     </div> 
  );
}

export default App;

That's all for the topic Installing Bootstrap in React. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

October 9, 2023