Scrollable and centered modals in Bootsrap - Mini Project: Build & Apply

Scrollable and Centered Modals with Bootstrap

📖 Scenario: You are building a website that needs to show important messages in pop-up windows called modals. Sometimes the message is long, so the modal should scroll inside if needed. Also, the modal should appear centered on the screen for better user focus.

🎯 Goal: Create a Bootstrap modal that is both scrollable and vertically centered on the page. The modal should have a header, a body with enough text to require scrolling, and a footer with a close button.

📋 What You'll Learn

Use Bootstrap 5 modal structure

Make the modal vertically centered using Bootstrap classes

Make the modal body scrollable if content is long

Include a header with a title

Include a footer with a close button

Ensure the modal can be opened with a button on the page

💡 Why This Matters

🌍 Real World

Modals are common on websites for alerts, forms, and messages. Making them scrollable and centered improves user experience especially on small screens or with long content.

💼 Career

Web developers often use Bootstrap modals to create user-friendly dialogs. Knowing how to configure modals for scrolling and centering is a practical skill for front-end development.

1

Create the basic Bootstrap modal HTML structure

Write the HTML code to create a Bootstrap modal with id="exampleModal". Include the modal dialog, modal content, modal header with a title Modal Title, modal body with a short paragraph This is the modal body., and modal footer with a button that closes the modal with data-bs-dismiss="modal" and text Close. Also add a button on the page with data-bs-toggle="modal" and data-bs-target="#exampleModal" that says Open Modal.

Bootsrap

Need a hint?

Use the Bootstrap modal example structure. Make sure the button has data-bs-toggle="modal" and data-bs-target="#exampleModal" attributes.

2

Add a configuration to center the modal vertically

Modify the modal dialog <div class="modal-dialog"> by adding the Bootstrap class modal-dialog-centered to make the modal appear vertically centered on the screen.

Bootsrap

Open Modal


  
    
    
      
        Modal Title
        
      
      
        This is the modal body.
      
      
        Close
      
    
  

Need a hint?

Add the class modal-dialog-centered to the modal-dialog div to center the modal vertically.

3

Make the modal body scrollable with long content

Replace the modal body content inside <div class="modal-body"> with multiple paragraphs of text so that the modal body becomes scrollable. Use exactly three paragraphs with the text: Paragraph 1: Lorem ipsum dolor sit amet., Paragraph 2: Consectetur adipiscing elit., and Paragraph 3: Sed do eiusmod tempor incididunt..

Bootsrap

Open Modal


  
    
      
        Modal Title
        
      
      
        
      
      
        Close
      
    
  

Need a hint?

Add three separate <p> tags inside the modal body with the exact text given to create scrollable content.

4

Make the modal scrollable by adding the scrollable class

Add the Bootstrap class modal-dialog-scrollable to the modal dialog <div class="modal-dialog modal-dialog-centered"> so the modal body becomes scrollable when content is long.

Bootsrap

Open Modal


  
    
    
      
        Modal Title
        
      
      
        Paragraph 1: Lorem ipsum dolor sit amet.
        Paragraph 2: Consectetur adipiscing elit.
        Paragraph 3: Sed do eiusmod tempor incididunt.
      
      
        Close
      
    
  

Need a hint?

Add the class modal-dialog-scrollable alongside modal-dialog-centered in the modal dialog div.