Scrollable modal
A scrollable modal keeps its header and footer fixed while only the body scrolls.
In this page:
Syntax
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">...</div>
</div>Scrollable modal
Add .modal-dialog-scrollable to the dialog so long content scrolls inside the body. Without it, the whole modal scrolls with the page. Use it for terms of service and long forms.
Note:
Combine modal-dialog-scrollable with modal-dialog-centered when appropriate.
Example: Scrollable modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#long">Scrollable modal</button>
<div class="modal fade" id="long" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Terms</h5></div>
<div class="modal-body"><p>Very long text... </p><p style="height:600px">Tall content that scrolls inside the body.</p><p>The end.</p></div>
<div class="modal-footer"><button class="btn btn-primary" data-bs-dismiss="modal">Accept</button></div>
</div>
</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting the class so the page scrolls
- Very tall content without scroll
- Nested scroll areas
Chapter Summary
- modal-dialog-scrollable
- Header and footer stay fixed
- Only the body scrolls
- Good for long text
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: