Open In App

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

Last Updated : 05 May, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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>


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=
    </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>


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=
    </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>


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

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Similar Reads

How to disable click outside modal to close modal in bootstrap ?
Bootstrap is a very powerful, extensible, and feature-packed fronted toolkit which is used to build fast and responsive websites. Bootstrap 5 provides us with its powerful Modal component which can be used to create models within the website at an ease. In this article, we are going to see how we can disable the click outside of the bootstrap modal
4 min read
How to add Close Button to Bootstrap Modal ?
To add a close button to a Bootstrap modal, you can include a button element inside the modal header with the appropriate Bootstrap classes. Adding a close button to a Bootstrap modal allows users to easily dismiss the modal window without any additional actions. This enhances the user experience by providing a clear and intuitive way to close the
1 min read
How to open or close react-bootstrap modal pro-grammatically?
A modal is a pop-up or a dialog box that is placed on the current page to display the message that needs to be read. Using the react-bootstrap UI library, we will program the modal using hooks in a functional component. We can use the useState() hooks to open/close a react-bootstrap modal . The useState function is a built in hook that allows us to
2 min read
How to Prevent Bootstrap Modal from Disappearing when Clicking Outside or Pressing Escape Button ?
Preventing Bootstrap Modal from Disappearing when Clicking Outside or Pressing the Escape Button means configuring the modal to remain open even if users click outside the modal or press the escape key. This enhances user experience by ensuring modal content is not accidentally dismissed. There are some approaches: Table of Content Using the "backd
3 min read
Bootstrap 5 | Close button
Bootstrap 5 provides a new component which is a Close button which can be used for dismissing content like modals and alerts. It can be included in the webpage using bootstrap.js or bootstrap.min.js. This component can be combined with models, alerts, and popovers. Disabled close buttons have pointer-events: none; applied to, preventing hover and a
1 min read
Bootstrap 5 Close button Disabled state
Bootstrap 5 Close button Disabled state is used to disable the close button for dismissing content like modals and alerts. The disabled close button changes the opacity and removes the pointer cursor on hovering. Close Button Disabled State used Attribute: disabled: The disabled attribute is used to disable the close button. Syntax: &lt;button type
2 min read
Bootstrap 5 Close Button SASS
Bootstrap 5 Close button SASS can be used to change the default values provided for the close button by customizing scss file of bootstrap 5. SASS variables of Close button:$btn-close-width: This variable provides the width of the close button. By default, it is 1em.$btn-close-height: This variable provides the height of the close button. By defaul
5 min read
Bootstrap 5 Close button White variant
Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and looks distinctive over this dark or black background.
2 min read
React Bootstrap close button disabled state
React-Bootstrap Close Button Disabled state is a disabled button that is unclickable and unusable to prevent user interactions. It is a boolean attribute. We will learn more about it by creating a React app. React-Bootstrap Used Attributes:disabled: This attribute is used to disable the button. It is a boolean value that makes the click false.Synta
2 min read
React-Bootstrap Close Button API
React-Bootstrap close button API is a way to import Close Button provided by React Bootstrap. In this article we are going to explore Close Button API. Close button is used to close a dialog box or pop up in React Bootstrap. Close Button Props:variant: It is used for rendering the button in different colors. By default, It will use a dark color.onC
2 min read