How to add scroll into react-bootstrap Modal Body?

Last Updated : 23 Jul, 2025

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 :

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 :

Screenshot-2023-10-07-193003
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:

Comment

Explore