How to change the position of modal close button in bootstrap?

The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values.

Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will create a very basic modal.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Modal Closing Button</title>
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <meta content="text/html;charset=utf-8" 
              http-equiv="Content-Type" />
        <meta content="utf-8" http-equiv="encoding" />
        
        <!-- Jquery -->
        <script src=
        </script>
  
        <!-- Bootstrap -->
        <link rel="stylesheet" href=
        <script src=
        </script>
  
        <!-- Personalized Includes -->
        <!-- CSS -->
        <style>
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="modal fade" id="main-modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header" id="modal-header">
                        <h4 class="modal-title" id="modal-title">
                          Modal Heading
                        </h4>
                        <button type="button" class="close" 
                                data-dismiss="modal">
                            ×
                        </button>
                    </div>
  
                    <!-- Modal body -->
                    <div class="modal-body" id="modal-body">
                        Modal Body
                    </div>
  
                    <!-- Modal footer -->
                    <div class="modal-footer" id="modal-footer">
                        Modal Footer
                    </div>
                </div>
            </div>
        </div>
        <div class="center btn-div">
            <div>
                <img src=
                     class="img-fluid" />
            </div>
            <br />
            <button class="btn btn-success" data-toggle="modal" 
                    data-target="#main-modal">
                Open Modal
            </button>
        </div>
    </body>
</html>

chevron_right



Output:

Approach: In the above, you can observe a button with class = “close” inside the modal header. This button is used for closing the modal element. data-dismiss property is used to switch the display style of the modal element.

<button type="button" class="close" data-dismiss="modal">
      &times;
</button>
  • &times; gives the cross icon.
  • data-dismiss switches the display property of modal element from “block” to “none”.
  • You can shift this button description from header to any location inside the entire modal division to move the close button, or you can declare your own extra close button.

Below are the implementation methods for the above steps.



Method 1: Move the button description.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Modal Closing Button</title>
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <meta content="text/html;charset=utf-8" 
              http-equiv="Content-Type" />
        <meta content="utf-8" http-equiv="encoding" />
        <!-- Jquery -->
        <script src=
        </script>
  
        <!-- Bootstrap -->
        <link rel="stylesheet" href=
  
        <script src=
        </script>
  
        <!-- Personalized Includes -->
        <!-- CSS -->
        <style>
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="modal fade" id="main-modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header" id="modal-header">
                        <h4 class="modal-title" 
                            id="modal-title">
                          Modal Heading
                        </h4>
  
                        <!--Button shifted from here...-->
                    </div>
  
                    <!-- Modal body -->
                    <div class="modal-body" id="modal-body">
                        Modal Body
  
                        <!--Button shifted to this place...-->
                        <button type="button" class="close"
                                data-dismiss="modal">
                            ×
                        </button>
                    </div>
  
                    <!-- Modal footer -->
                    <div class="modal-footer" id="modal-footer">
                        Modal Footer
                    </div>
                </div>
            </div>
        </div>
        <div class="center btn-div">
            <div>
                <img src=
                     class="img-fluid" />
            </div>
            <br />
            <button class="btn btn-success" 
                    data-toggle="modal" 
                    data-target="#main-modal">
                Open Modal
            </button>
        </div>
    </body>
</html>

chevron_right


Output: The button appears in the body section of the modal element since it is moved to the body section.

Method 2: Define your own close button using the data-dismiss property.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Modal Closing Button</title>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0" />
        <meta content="text/html;charset=utf-8" 
              http-equiv="Content-Type" />
        <meta content="utf-8" 
              http-equiv="encoding" />
        <!-- Jquery -->
        <script src=
        </script>
  
        <!-- Bootstrap -->
        <link rel="stylesheet" href=
        <script src=
        </script>
  
        <!-- Personalized Includes -->
        <!-- CSS -->
        <style>
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="modal fade" id="main-modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header" 
                         id="modal-header">
                        <h4 class="modal-title" 
                            id="modal-title">
                          Modal Heading
                        </h4>
                        <button type="button" 
                                class="close" 
                                data-dismiss="modal">
                            ×
                        </button>
                    </div>
  
                    <!-- Modal body -->
                    <div class="modal-body" id="modal-body">
                        Modal Body
                    </div>
  
                    <!-- Modal footer -->
                    <div class="modal-footer" id="modal-footer">
                        Modal Footer
  
                        <!--New Button declared here...-->
                        <button class="btn btn-danger" data-dismiss="modal">
                            Close Modal
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="center btn-div">
            <div>
                <img src=
                     class="img-fluid" />
            </div>
            <br />
            <button class="btn btn-success" 
                    data-toggle="modal"
                    data-target="#main-modal">
                Open Modal
            </button>
        </div>
    </body>
</html>

chevron_right


Output: A new close button is available in the modal footer section. 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.