What is Scrollable and centered modals in Bootsrap?

Scrollable and centered modals in Bootsrap - Syntax, Examples & Explanation

Introduction

Modals help show important info on top of the page. Making them scrollable and centered keeps content easy to read and looks neat on any screen.

When you have a lot of content in a popup and want users to scroll inside it.

When you want the popup to appear in the middle of the screen for better focus.

When you want a clean, user-friendly popup that works well on small or large screens.

Syntax

Bootsrap

<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-content">
      <!-- modal header, body, footer here -->
    </div>
  </div>
</div>

modal-dialog-scrollable makes the modal body scrollable if content is long.

modal-dialog-centered centers the modal vertically on the screen.

Examples

This modal is centered but will not scroll if content is long.

Bootsrap

<div class="modal-dialog modal-dialog-centered">
  <!-- centered modal without scroll -->
</div>

This modal allows scrolling but stays at the top of the screen.

Bootsrap

<div class="modal-dialog modal-dialog-scrollable">
  <!-- scrollable modal but not centered -->
</div>

This modal is both scrollable and vertically centered for best user experience.

Bootsrap

<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
  <!-- scrollable and centered modal -->
</div>

Sample Program

This example shows a button that opens a modal. The modal is centered vertically and scrollable if the content is too long. This keeps the popup neat and easy to read on any screen size.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable and Centered Modal Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Button to open modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Open Scrollable Centered Modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Scrollable Centered Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>This modal is centered vertically and allows scrolling inside if content is long.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>More content to make modal scrollable...</p>
          <p>More content to make modal scrollable...</p>
          <p>More content to make modal scrollable...</p>
          <p>More content to make modal scrollable...</p>
          <p>More content to make modal scrollable...</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Always include aria-labelledby and aria-hidden for accessibility.

Use Bootstrap's JavaScript bundle to enable modal functionality.

Scrollable modals help keep the page behind visible and usable.

Summary

Use modal-dialog-scrollable to make modal content scroll inside the popup.

Use modal-dialog-centered to center the modal vertically on the screen.

Combining both classes creates a neat, user-friendly popup for long content.