How to add scroll into react-bootstrap Modal Body?

React Bootstrap provides a straightforward way to create modal dialogue the for your web applications. However, sometimes the content within the modal body can be too long to fit within modal’s default height. In such cases, you might add a scrollbar to the modal body to ensure users can scroll through the content. In this article, we will walk you through the steps to achieve this through React Bootstrap Modal

Prerequisites :

• React JS
• React-Bootstrap
• CSS

Steps to create React App and Installing Modules :

Step 1: Create a react app using the following command

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name move to it using the following command

cd foldername

Step 3: After that install react-bootstrap using the following command

npm install react-bootstrap bootstrap

Project Structure :

Project Structure

Example: Now write down the following code in your App.js file. Here App is our default component where we have written our code

Javascript

import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import "bootstrap/dist/css/bootstrap.css";

function App() {
  const [show, setShow] = useState(false);
  return (
    <>
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "100vh" }}
      >
        <Button variant="primary" onClick={() => setShow(true)}>
          Press to See scrollable modal window
        </Button>
      </div>
      <Modal
        show={show}
        onHide={() => setShow(false)}
        scrollable
        style={{ height: "300px" }}
        dialogClassName="modal-30w"
        aria-labelledby="example-custom-modal-styling-title"
      >
        <Modal.Header closeButton>
          <Modal.Title
            id="example-custom-modal-styling-title"
            style={{ color: "green" }}
          >
            Geeks For Geeks
          </Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ textAlign: "justify" }}>
          <p>
            GeeksforGeeks is an online platform that has become a heaven for
            coding enthusiasts and tech aficionados. It's like a digital
            treasure trove of programming knowledge and computer science wisdom.
            Wandering through the corridors of GeeksforGeeks is like embarking
            on a fascinating journey through the vast landscape of algorithms,
            data structures, and programming languages. It's a place where ones
            and zeros come to life, creating intricate symphonies of logic and
            code. You'll find yourself lost in a labyrinth of articles and
            tutorials, each one unraveling the mysteries of a different
            programming concept.
          </p>
        </Modal.Body>
      </Modal>
    </>
  );
}

export default App;

Steps to Run the Application :

Step 1: Run the application using the following command from the root directory of the project.

npm start

Step 2: Open web-browser and type the following Url

http://localhost:3000/

Output:

Scrollable Modal window using react-bootstrap