Open In App

Bootstrap 5 Toggle Between Modals

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

Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.

Bootstrap 5 Toggle between modals Attributes:

  • data-bs-target: This attribute is added to the button in the modal which will hold the target modal to be toggled.
  • data-bs-toggle: This attribute is added to the button in the modal which will specify which type of toggling to be done by the button.

Syntax:

<div class="modal" id="exampleModalToggle">
  <div class="modal-dialog">
      ....
  </div>
</div>
<div class="modal" id="exampleModalToggle2">
  <div class="modal-dialog">
    ...
  </div>
</div>

Example 1: The code below demonstrates how we can make a login and reset password modal and toggle between them.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>
  
<body class="m-4">
    <h1 class="mt-3 text-success">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Toggle between modals</h4>
    <div class="modal fade" id="login">
        <div class="modal-dialog
                    modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginLabel">
                        Login
                    </h5>
                    <button type="button" 
                            class="btn-close" 
                            data-bs-dismiss="modal" 
                            aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="exampleInputEmail1" 
                                    class="form-label">
                                Email address
                            </label>
                            <input type="email" class="form-control"
                                   id="exampleInputEmail1"
                                   aria-describedby="emailHelp">
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputPassword1"
                                   class="form-label">
                                Password
                            </label>
                            <input type="password"
                                   class="form-control" 
                                   id="exampleInputPassword1">
                        </div>
                        <button type="submit" class="btn btn-success">
                            Login</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success"
                            data-bs-target="#reset-Pass" 
                            data-bs-toggle="modal" 
                            data-bs-dismiss="modal">
                        Reset Password
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="reset-Pass">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reset-Pass">
                        Reset Password
                    </h5>
                    <button type="button"
                            class="btn-close" 
                            data-bs-dismiss="modal" 
                            aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="exampleInputPassword1" 
                                    class="form-label">
                                Password
                            </label>
                            <input type="password"
                                   class="form-control" 
                                   id="exampleInputPassword1">
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputPassword1"
                                   class="form-label">
                                Confirm Password
                            </label>
                            <input type="password"
                                   class="form-control" 
                                   id="exampleInputPassword1">
                        </div>
                        <button type="submit" class="btn btn-success">
                            Reset
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" 
                            data-bs-target="#login" 
                            data-bs-toggle="modal" 
                            data-bs-dismiss="modal">
                        Back to Login
                    </button>
                </div>
            </div>
        </div>
    </div>
    <a class="btn btn-success m-4" 
       data-bs-toggle="modal"
       href="#login"
       role="button">
        Login
    </a>
</body>
</html>
 






                        










Output:


 


Example 2: The code below demonstrates how we can vertically scroll modals and toggle between them.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html> 


<html lang="en"> 


  


<head> 


    <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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 


          integrity= 


"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 


          crossorigin="anonymous"> 


    </script> 


</head> 


  


<body class="m-4"> 


    <h1 class="mt-3 text-success"> 


        GeeksforGeeks 


    </h1> 


    <h4>Bootstrap 5 Toggle between modals</h4> 


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


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


            modal-dialog-scrollable"> 


            <div class="modal-content"> 


                <div class="modal-header"> 


                    <h5 class="modal-title" id="DSLabel"> 


                        Data Structures 


                    </h5> 


                    <button type="button" class="btn-close" 


                            data-bs-dismiss="modal"> 


                    </button> 


                </div> 


                <div class="modal-body p-5"> 


                    A data structure is a storage that is  


                    used to store and organize data.  


                    It is a way of arranging data on a  


                    computer so that it can be accessed  


                    and updated efficiently. 


                </div> 


                <div class="modal-footer"> 


                    <button class="btn btn-success" 


                            data-bs-target="#algo" 


                            data-bs-toggle="modal" 


                            data-bs-dismiss="modal"> 


                        Open Algo Modal 


                    </button> 


                </div> 


            </div> 


        </div> 


    </div> 


    <div class="modal fade" id="algo" 


         aria-hidden="true" aria-labelledby="DSLabel2" 


         tabindex="-1"> 


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


            modal-dialog-scrollable"> 


            <div class="modal-content"> 


                <div class="modal-header"> 


                    <h5 class="modal-title" id="AlgoLabel"> 


                        Algorithm 


                    </h5> 


                    <button type="button" class="btn-close" 


                               data-bs-dismiss="modal" aria-label="Close"> 


                    </button> 


                </div> 


                <div class="modal-body p-5"> 


                    The word Algorithm means ”  


                    A  set of rules to be followed in  


                    calculations or other problem-solving  


                    operations ” Or ” A procedure for solving 


                    a mathematical problem in a finite  


                    number of steps that frequently 


                    by recursive operations “.  


                </div> 


                <div class="modal-footer"> 


                    <button class="btn btn-success" data-bs-target="#DS" 


                            data-bs-toggle="modal" data-bs-dismiss="modal"> 


                        Back to DS Modal 


                    </button> 


                </div> 


            </div> 


        </div> 


    </div> 


    <a class="btn btn-success m-4" data-bs-toggle="modal" 


        href="#DS" role="button"> 


        Open DS modal 


    </a> 


 </body>  


  


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Varying Modal Content
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Modal Change Animation
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Materialize CSS Modals
            

        
    
        
            

                Spectre Modals
            

        
    
        
            

                Blaze UI Modals
            

        
    
        
            

                How to replace dropdown-toggle icon with another default icon in Bootstrap ?
            

        
    
        
            

                Data-toggle attributes in Twitter Bootstrap
            

        
    
        
            

                How to create a radio button similar to toggle button using Bootstrap ?
            

        
    
        
            

                How to add bootstrap toggle-switch using JavaScript ?
            

        
    
        
            

                How to change the “checked” background color of toggle switch in Bootstrap 4?
            

        
    
        
            

                How to toggle password visibility in forms using Bootstrap-icons ?
            

        
    
        
            

                Bootstrap 5 Popovers toggle() Method
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        priyanshuchatterjee01                                

                            

                            

            
                                

                            

                                                                    

                                        
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