Open In App

Bootstrap 5 Modal Vertically Centered

Last Updated : 15 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead. Using bootstrap modal classes we can make the modal body align vertically centered.

Bootstrap 5 Modal Vertically Centered Classes:

  • modal-dialog-centered: To make modal vertically centered

Syntax:

<div class="modal-dialog modal-dialog-centered">
  ...
</div>

Example 1: In this example, we will learn about Modal Vertically Centered

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
            integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 
            integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Modal Vertically centered</h2>
        <button type="button"
                class="btn btn-success"
                data-toggle="modal"
                data-target="#GFG">
            Launch Vertically Centered modal
        </button>
  
        <div class="modal fade" id="GFG">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            I am modal vertically centered
                        </h5>
  
                    </div>
                    <div class="modal-body">
                        GeeksforGeeks
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                             height="100px"
                             width="300px">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn"
                                data-dismiss="modal">
                            Close
                        </button>
                        <button type="button" class="btn">
                            Save changes
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>
 






                        










Output


 


Example 2: In this example, we will learn about Vertically centered scrollable modal




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <!-- Bootstrap CDN -->


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 


            rel="stylesheet"


            integrity= 


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 


            crossorigin="anonymous"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 


            integrity= 


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 


            crossorigin="anonymous"> 


    </script> 


    <script src= 


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 


            integrity= 


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 


            crossorigin="anonymous"> 


    </script> 


</head> 


  


<body> 


  <div class="container"> 


    <h1 class="text-success"> 


      GeeksforGeeks 


    </h1> 


    <h2>Bootstrap 5 Modal Vertically centered</h2> 


    <button type="button" 


            class="btn btn-success" 


            data-toggle="modal" 


            data-target="#GFG"> 


      Launch Vertically Centered modal 


    </button> 


  


    <div class="modal fade" id="GFG"> 


      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> 


        <div class="modal-content"> 


          <div class="modal-header"> 


            <h5 class="modal-title"> 


              I am modal vertically centered 


            </h5> 


  


          </div> 


          <div class="modal-body"> 


            GeeksforGeeks 


            <div class="card"> 


              <img src= 


  "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 


                   class="card-img-top"> 


              <div class="card-body"> 


                  <h5 class="card-title">Java</h5> 


                  <p class="card-text"> 


                    Java is Object Oriented. However, it is not 


                    considered as pure object-oriented as it  


                    provides support for primitive data types 


                    (like int, char, etc) 


                  </p> 


              </div> 


          </div> 


          <div class="card"> 


            <img src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 


                 class="card-img-top"> 


            <div class="card-body"> 


                <h5 class="card-title">Java</h5> 


                <p class="card-text"> 


                    Java is Object Oriented. However, it is not 


                    considered as pure object-oriented as it  


                    provides support for primitive data types 


                    (like int, char, etc) 


                </p> 


            </div> 


        </div> 


        <div class="card"> 


          <img src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 


               class="card-img-top"> 


          <div class="card-body"> 


              <h5 class="card-title">Java</h5> 


              <p class="card-text"> 


                Java is Object Oriented. However, it is not 


                considered as pure object-oriented as it  


                provides support for primitive data types 


                (like int, char, etc) 


              </p> 


          </div> 


      </div> 


      <div class="card"> 


        <img src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 


             class="card-img-top"> 


        <div class="card-body"> 


            <h5 class="card-title">Java</h5> 


            <p class="card-text"> 


                Java is Object Oriented. However, it is not 


                considered as pure object-oriented as it  


                provides support for primitive data types 


                (like int, char, etc)  


            </p> 


        </div> 


    </div> 


          </div> 


          <div class="modal-footer"> 


            <button type="button" 


                    class="btn" 


                    data-dismiss="modal"> 


              Close 


            </button> 


            <button type="button" class="btn"> 


              Save changes 


            </button> 


          </div> 


        </div> 


      </div> 


    </div> 


  </div> 


</body> 


</html>



















                        







                        










Output


 


Reference: https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Modal Scrolling long content
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Modal Tooltips and Popovers
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to align image vertically in a division that spans vertically on the whole webpage using  CSS ?
            

        
    
        
            

                How to disable click outside modal to close modal in bootstrap ?
            

        
    
        
            

                How to get card vertically centered between search bar and bottom of the viewport?
            

        
    
        
            

                How to align an image and text vertically on the same line in React Bootstrap?
            

        
    
        
            

                How to get a react bootstrap card to center vertically?
            

        
    
        
            

                How to make columns stack vertically on smaller screens in React Bootstrap?
            

        
    
        
            

                How to Get Centered Content in Bootstrap ?
            

        
    
        
            

                How to configure modal width in Bootstrap?
            

        
    
        
            

                Modal JavaScript plugin (bootstrap) with example
            

        
    
        
            

                How to hide Bootstrap modal with JavaScript?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        akshitsaxena2                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox