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

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
      
    
  

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
      
    
  

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
      
    
  

Hint

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

Practice

1. What does the Bootstrap class modal-dialog-scrollable do in a modal?

easy

A. Disables modal animations

B. Makes the modal content scrollable inside the popup

C. Changes the modal background color

D. Centers the modal vertically on the screen

Solution

1. Step 1: Understand the class purpose

   The class modal-dialog-scrollable is designed to allow the modal content area to scroll if the content is too long.

2. Step 2: Compare with other classes

   Unlike modal-dialog-centered which centers the modal, this class specifically controls scrolling inside the modal.

3. Final Answer:

   Makes the modal content scrollable inside the popup -> Option B

4. Quick Check:

   modal-dialog-scrollable = scrollable content [OK]

Hint: Scrollable modals use modal-dialog-scrollable class [OK]

Common Mistakes:

• Confusing scrollable with centered behavior
• Thinking it changes modal size
• Assuming it affects modal background

2. Which is the correct way to add both scrollable and vertically centered behavior to a Bootstrap modal dialog?

easy

A. <div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'>

B. <div class='modal-dialog scrollable-centered'>

C. <div class='modal-dialog scrollable centered'>

D. <div class='modal-dialog scrollable centered-modal'>

Solution

1. Step 1: Identify correct Bootstrap classes

   Bootstrap uses modal-dialog-scrollable and modal-dialog-centered as separate classes to add scroll and vertical centering.

2. Step 2: Check syntax for multiple classes

   Multiple classes are added separated by spaces inside the class attribute, so both classes must be included exactly as documented.

3. Final Answer:

   <div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'> -> Option A

4. Quick Check:

   Use both classes separated by space [OK]

Hint: Use both classes separated by spaces inside class attribute [OK]

Common Mistakes:

• Using incorrect class names like 'scrollable' or 'centered'
• Combining classes into one word
• Missing one of the required classes

3. Given this modal HTML snippet, what will be the visual effect?

<div class='modal-dialog modal-dialog-scrollable modal-dialog-centered'>
  <div class='modal-content'>
    <div class='modal-body'>
      <p>Very long content here...</p>
    </div>
  </div>
</div>

medium

A. Modal is centered but content does not scroll

B. Modal content scrolls but modal is aligned to top

C. Modal content scrolls inside and modal is vertically centered on screen

D. Modal neither scrolls nor centers vertically

Solution

1. Step 1: Analyze classes used

   The modal uses both modal-dialog-scrollable and modal-dialog-centered classes.

2. Step 2: Understand combined effect

   These classes together make the modal vertically centered and allow the modal body content to scroll if it is long.

3. Final Answer:

   Modal content scrolls inside and modal is vertically centered on screen -> Option C

4. Quick Check:

   Both scrollable and centered classes active = scroll + center [OK]

Hint: Both classes together scroll content and center modal [OK]

Common Mistakes:

• Assuming scroll disables centering
• Thinking content scrolls outside modal
• Confusing modal-body scrolling with page scrolling

4. You added modal-dialog-scrollable but the modal content is not scrolling. What is the likely mistake?

medium

A. You forgot to add modal-dialog-centered

B. You must add scrollable class instead

C. You need to add overflow-auto to modal-content

D. You placed modal-dialog-scrollable on the wrong element

Solution

1. Step 1: Check where the class is applied

   The modal-dialog-scrollable class must be on the modal-dialog element, not on modal-content or others.

2. Step 2: Understand Bootstrap structure

   If placed incorrectly, the scroll behavior won't activate because Bootstrap styles target the dialog container.

3. Final Answer:

   You placed modal-dialog-scrollable on the wrong element -> Option D

4. Quick Check:

   modal-dialog-scrollable must be on modal-dialog [OK]

Hint: Apply scrollable class only on modal-dialog div [OK]

Common Mistakes:

• Adding scrollable to modal-content instead
• Confusing scrollable with centered class
• Forgetting to add modal-dialog class

5. You want a modal that is vertically centered, scrollable, and also has a fixed header and footer that stay visible while the body scrolls. Which Bootstrap structure and classes should you use?

hard

A. Use modal-dialog modal-dialog-scrollable modal-dialog-centered with modal-header, modal-body, and modal-footer inside modal-content

B. Use modal-dialog modal-dialog-centered only and add custom CSS for scrolling

C. Use modal-dialog-scrollable on modal-content and add fixed position to header/footer

D. Use modal-dialog modal-dialog-scrollable but omit modal-header and modal-footer

Solution

1. Step 1: Identify required classes for scroll and center

   Use both modal-dialog-scrollable and modal-dialog-centered on the modal-dialog element.

2. Step 2: Structure modal content properly

   Inside modal-content, include modal-header and modal-footer which remain fixed, while modal-body scrolls.

3. Step 3: Confirm Bootstrap default behavior

   Bootstrap automatically keeps header and footer visible when using scrollable modals with this structure.

4. Final Answer:

   Use modal-dialog modal-dialog-scrollable modal-dialog-centered with modal-header, modal-body, and modal-footer inside modal-content -> Option A

5. Quick Check:

   Combine scrollable + centered + header/footer structure [OK]

Hint: Use both classes on modal-dialog and include header/footer inside modal-content [OK]

Common Mistakes:

• Adding scrollable to modal-content instead of modal-dialog
• Omitting modal-header or modal-footer
• Trying to fix header/footer with custom CSS unnecessarily