VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-modal-scrolling-long-content/

⇱ Bootstrap 5 Modal Scrolling long content - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Modal Scrolling long content

Last Updated : 6 Aug, 2024

Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable. Modals can either be scrolled independently of the page or we can scroll the modal body. We will learn about them using examples

Syntax:

<div class="modal-dialog modal-dialog-scrollable">
...
</div>

Bootstrap 5 Modal Scrolling long content Class:

  • modal-dialog-scrollable: This class is used for making a scrolling modal content

Example 1: In this example, we will learn how we create a modal such that it scrolls independently of the page.

Output:

Example 2: In this example, we will create a scrollable modal that allows scrolling the modal body by adding class modal-dialog-scrollable 

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#scrolling-long-content

Comment

Explore