How to create scrollable modal bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Scrollable Modal in Bootstrap Easily

To create a scrollable modal in Bootstrap, add the modal-dialog-scrollable class to the modal-dialog element. This makes the modal body scrollable when content is long, keeping the header and footer fixed.

📐

Syntax

The key to a scrollable modal in Bootstrap is the modal-dialog-scrollable class. It is added to the div with the modal-dialog class. This class makes only the modal body scrollable, while the header and footer stay visible.

modal: The main container for the modal.
modal-dialog: Wraps the modal content and controls modal size and scroll behavior.
modal-dialog-scrollable: Makes the modal body scrollable.
modal-content: Contains header, body, and footer.
modal-header, modal-body, modal-footer: Sections inside the modal.

html

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Long content here -->
      </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>

💻

Example

This example shows a Bootstrap modal with a scrollable body. The header and footer stay fixed while the body scrolls if content is long. Click the button to open the modal.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scrollable Modal Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
    Open Scrollable Modal
  </button>

  <div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>This modal body has a lot of content to demonstrate scrolling.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
          <p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
          <p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>
          <p>Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
          <p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.</p>
          <p>Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p>
          <p>Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
          <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar.</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>

Output

A webpage with a button labeled 'Open Scrollable Modal'. Clicking it opens a modal with a fixed header and footer. The modal body contains multiple paragraphs and is scrollable vertically.

⚠️

Common Pitfalls

One common mistake is forgetting to add the modal-dialog-scrollable class to the modal-dialog element. Without it, the entire modal scrolls instead of just the body.

Another issue is placing too much content outside the modal-body, which prevents scrolling.

Also, ensure Bootstrap's CSS and JS files are properly included for modal functionality.

html

<!-- Wrong: Missing modal-dialog-scrollable class -->
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">...</div>
    <div class="modal-body">Long content here</div>
    <div class="modal-footer">...</div>
  </div>
</div>

<!-- Right: Added modal-dialog-scrollable class -->
<div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">...</div>
    <div class="modal-body">Long content here</div>
    <div class="modal-footer">...</div>
  </div>
</div>

📊

Quick Reference

Add modal-dialog-scrollable to modal-dialog for scrollable body.
Keep header and footer outside modal-body to keep them fixed.
Include Bootstrap CSS and JS for modal to work.
Use data-bs-toggle="modal" and data-bs-target="#modalId" on buttons to open modals.

✅

Key Takeaways

Use the modal-dialog-scrollable class on modal-dialog to make only the modal body scrollable.

Keep modal-header and modal-footer outside the scrollable body to keep them fixed.

Always include Bootstrap CSS and JS files for modal functionality.

Place long content inside modal-body to enable scrolling.

Use data attributes on buttons to trigger modals easily.