How to vertically align Bootstrap v4 modal dialogs

Question

Vertically center modal dialogues in Bootstrap 4.

Note: The requirements below have been added to make it clear I am looking for a prop

Answer 1

There is a much easier way of achieving this without having to write a bunch of CSS overrides or other custom CSS, basically using just the stock bootstrap classes and adding one extra HTML element to control the height.

CSS (Not Needed see below)

.modal > .row{
    flex: 1;
}

HTML (Updated see below)

    
 
        

            

                

                    
Modal title
                    
                        ×
                    
                
                

                    
Modal body text goes here.
                
                

                    Save changes
                    Close
                
            
        
    

Then to use:

---

JS

$("#dialogBox").modal('show');

OR HTML

  Launch demo modal

There is probably a way to achieve the desired result using only the bootstrap .row, .col and flex-XXX classes but I was unable to get that to work.

One last note, you might have to add: to get everything to work depending on the rest of your CSS.

UPDATE

---

There is a way to achieve this using only bootstrap classes, h-100 and w-100:

    
 
        

            

                

                    
Modal title
                    
                        ×
                    
                
                

                    
Modal body text goes here.
                
                

                    Save changes
                    Close