GAUTAM RAI's Blog

Unlocking the Power of Bootstrap in React: A Step-by-Step Guide to Seamlessly Integrate Prebuilt Components

Unlocking the Power of Bootstrap in React: A Step-by-Step Guide to Seamlessly Integrate Prebuilt Components

GAUTAM RAI's photo
GAUTAM RAI
·

2 min read

Table of contents

Introduction:-

Are you looking to harness the power of Bootstrap, the renowned prebuilt components library, within your React projects? If you've ever wondered how to seamlessly integrate Bootstrap into your React codebase, then look no further. In this comprehensive blog, we will walk you through the process of effectively utilizing Bootstrap in your React applications. Whether you're aiming to create stunning navbars, eye-catching headers, or other captivating components, this step-by-step guide will equip you with the knowledge and skills you need to leverage the full potential of Bootstrap within the React framework. Let's Dive In!

Installation:-

We will be Installing ReactStrap which is a React component library for Bootstrap.

(Note:- Reactstrap is currently compatible with Bootstrap 5.1. and requires React version 16.8 or higher.)

Install ReactStrap:-

 npm install reactstrap react react-dom

Install Bootstrap:-

There are two ways to install Bootstrap in your application.

  1. Import BootStrap Into your application:
npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';
  1. We can add BootStrap by using its CDN link in your HTML file:
<head>
 <link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
 />
</head>

Import Components:-

After Installing ReactStrap into your application. The next step is to import components into your file to use it. Importing Reactstrap components is as easy as typing a hello world program.

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return <Button color="danger">Danger!</Button>;
};

About:-

Unlike BootStrap in HTML. Reactstrap exports all the correct Bootstrap classes automatically, and don't need to use or include Bootstrap's JavaScript files or add data attributes to trigger functionality. Instead, components are defined in React-friendly components with appropriate props for you to control.

<!-- HTML -->
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
    </div>
  </div>
</div>

Instead of this, you can directly add the code given below:

// React
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
...
<Modal isOpen={open} toggle={() => setOpen(false)}>
  <ModalHeader>
    Modal title
  </ModalHeader>
  <ModalBody>
    Modal body text goes here.
  </ModalBody>
</Modal>

CssModules:-

You can use cssModule it to change the underlying component's default CSS class.

For example, the Button renders with a default class .btn. You can use

<Button color="primary" cssModule={{ btn: 'hyperspeed-btn' }}>
  primary
</Button>

so that Button renders with .hyperspeed-btn instead of .btn.

You can use setGlobalCssModule the function to set custom classes globally.

import { Util } from 'reactstrap';

Util.setGlobalCssModule({
  btn: 'hyperspeed-btn',
});

Sources:-

  1. ReactStrap Official Website:- https://reactstrap.github.io/?path=/docs/home-installation--page

    GitHub:- https://github.com/reactstrap/reactstrap

  2. BootStrap Official Website:- https://getbootstrap.com/

  3. React Official Link:- https://react.dev/

ReactBootstrapDesignwebdev