Saturday, December 10, 2016

Bootstrap 3 Modal Vertically Center

 Works with Bootstrap v3 - v3.3.7

Create a Modal:
 <!-- Trigger the modal with a button -->  
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
     <!-- Modal -->  
     <div id="myModal" class="modal fade" role="dialog">  
       <div class="modal-dialog">  
         <!-- Modal content-->  
         <div class="modal-content">  
           <div class="modal-header">  
             <button type="button" class="close" data-dismiss="modal">&times;</button>  
             <h4 class="modal-title">Modal Header</h4>  
           </div>  
           <div class="modal-body">  
             <p>Some text in the modal.</p>  
           </div>  
           <div class="modal-footer">  
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
           </div>  
         </div>  
       </div>  
     </div>  
Use this CSS:

 <style>  
       .modal {  
         text-align: center;  
         padding: 0!important;  
       }  
       .modal:before {  
         content: '';  
         display: inline-block;  
         height: 100%;  
         vertical-align: middle;  
         margin-right: -4px;  
       }  
       .modal-dialog {  
         display: inline-block;  
         text-align: left;  
         vertical-align: middle;  
       }  
     </style>  

Screenshot:

No comments:

Post a Comment