Scrollable Bootstrap Modal When Large Text

By Posted on

Scrollable Bootstrap Modal with Images and Videos

In some cases, we need to display a large amount of content in Modal Bootstrap which will change the size of the modal itself. In this article, we will learn how to create a scrollable Bootstrap modal if it has a lot of text and images, and embedded YouTube videos.

Scrollable Bootstrap Modal with Images and Videos
Scrollable Bootstrap Modal

Setting Up the Modal

Let’s start by setting up the basic structure of the Bootstrap modal. Bootstrap modals are straightforward to implement, but adding additional functionality such as scrolling and media content requires a bit of extra setup. Below is a step-by-step guide.

Here’s the foundational HTML code for creating a Bootstrap modal: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

 <!-- Button trigger modal -->
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalExample">
     Launch demo modal
 </button>

 <!-- Modal -->
 <div class="modal fade" id="modalExample" tabindex="-1" aria-labelledby="modalExampleLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-xl">
         <div class="modal-content">
             <div class="modal-header" style="background:#ffdc70">
                 <h5 class="modal-title" id="modalExampleLabel">Lorem Ipsum Modal</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div id="editor-container">
                     <!-- Add a lot of Lorem Ipsum text to test scrolling -->
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     
                     <!-- Adding Images -->
                     <img src="https://cdn.pixabay.com/photo/2024/03/02/19/29/magnolia-8609276_1280.jpg" class="img-fluid mb-3 " alt="Sample Image 1">
                     <img src="https://cdn.pixabay.com/photo/2022/08/18/09/14/sea-7394353_1280.jpg" class="img-fluid mb-3 text-center" alt="Sample Image 2">

                     <!-- Adding Videos from YouTube -->
                     <div class="embed-responsive embed-responsive-16by9 mb-3">
                         <iframe width="560" height="315" src="https://www.youtube.com/embed/nrnmshom0mY?si=Zpgp3UF1PCJvS5Hb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                     </div>

                     <!-- More Lorem Ipsum text -->
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </div>
             </div>
         </div>
     </div>
 </div>

</body>
</html>

Add style

This is the most important thing in this tutorial, how we create scrollable bootstrap modal. Since we will put the content inside the modal body, here is the code for its style. 

 <style>
    .modal-body {
        overflow-y: auto;
        max-height: 60vh; /* Set max height for the modal body */
    }
  </style>

The Results

From the combination of the code above, a scrollable bootstrap modal like this will be produced (press the button): Bootstrap 5 Example

Explanation of the Code

  • Button Trigger: The button with data-bs-toggle="modal" and data-bs-target="#modalExample" attributes opens the modal when clicked.
  • Modal Structure: The modal includes a header, body, and footer (although we haven’t included a footer here). The modal’s body is scrollable if the content exceeds the viewport height.
  • Scrollable Content: The CSS .modal-body class is configured with overflow-y: auto and max-height: 60vh to ensure that when content overflows, a scrollbar appears, keeping the modal body within a reasonable height.
  • Images: Two images from Pixabay are included to demonstrate how images can be added. They are responsive and will adjust according to the modal’s width.
  • YouTube Videos: An embedded YouTube video is added using the <iframe> element. The embed-responsive class ensures the video maintains a 16:9 aspect ratio and is responsive to screen sizes.

This example demonstrates how to create a functional and visually appealing Bootstrap modal with scrollable content. By including images and videos, you can enhance the interactivity of your modals, making them more engaging for users. Bootstrap’s modal component, combined with custom CSS for scrolling and responsive media, provides a powerful tool for creating dynamic web interfaces.