Modal sizes and positioning in Bootsrap - Mini Project: Build & Apply

Bootstrap Modal Sizes and Positioning

📖 Scenario: You are building a simple webpage that uses Bootstrap modals to show messages. You want to create modals of different sizes and position them in the center of the screen.

🎯 Goal: Create a Bootstrap modal with a small size and center it on the screen.

📋 What You'll Learn

Use Bootstrap 5 modal structure

Create a modal with the class modal-sm for small size

Center the modal vertically and horizontally

Include a button to open the modal

💡 Why This Matters

🌍 Real World

Modals are common in websites for showing dialogs, alerts, or forms without leaving the current page.

💼 Career

Knowing how to customize modal sizes and positioning is useful for front-end developers working with Bootstrap to create user-friendly interfaces.

1

Create the basic Bootstrap modal structure

Write the HTML code to create a Bootstrap modal with id="myModal". Include the modal dialog and modal content elements with the correct classes: modal, modal-dialog, and modal-content. Do not add size or positioning classes yet.

Bootsrap

Need a hint?

Remember to use the modal, modal-dialog, and modal-content classes in the correct nested order.

2

Add a button to open the modal

Add a button with type="button", class btn btn-primary, and attributes data-bs-toggle="modal" and data-bs-target="#myModal". The button text should be Open Modal.

Bootsrap

  
    
      
        Modal title
        
      
      
        This is a basic modal.
      
      
        Close
      
    
  

Need a hint?

The button needs data-bs-toggle="modal" and data-bs-target="#myModal" to open the modal.

3

Make the modal small sized

Add the class modal-sm to the modal-dialog div to make the modal small sized.

Bootsrap

  
    
    
    
      
        Modal title
        
      
      
        This is a basic modal.
      
      
        Close
      
    
  


Open Modal

Need a hint?

Add modal-sm next to modal-dialog to make the modal small.

4

Center the modal vertically and horizontally

Add the class modal-dialog-centered to the modal-dialog div along with modal-sm to center the modal vertically and horizontally on the screen.

Bootsrap

  
    
    
    
      
        Modal title
        
      
      
        This is a basic modal.
      
      
        Close
      
    
  


Open Modal

Need a hint?

Combine modal-sm and modal-dialog-centered classes in the modal-dialog div.