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

16 Jul, 2021
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
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>         <!-- Bootstrap -->        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />        <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">        </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="https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"                     class="img-fluid" />            </div>            <br />            <button class="btn btn-success" data-toggle="modal"                    data-target="#main-modal">                Open Modal            </button>        </div>    </body></html>
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
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>         <!-- Bootstrap -->        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">        </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="https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"                     class="img-fluid" />            </div>            <br />            <button class="btn btn-success"                    data-toggle="modal"                    data-target="#main-modal">                Open Modal            </button>        </div>    </body></html>
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
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>         <!-- Bootstrap -->        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>        <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">        </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="https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"                     class="img-fluid" />            </div>            <br />            <button class="btn btn-success"                    data-toggle="modal"                    data-target="#main-modal">                Open Modal            </button>        </div>    </body></html>
Output: A new close button is available in the modal footer section. 
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-Misc
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?