Explain Bootstrap modal plugins

Last Updated : 25 Mar, 2022

In this article, we will know the Bootstrap Modal Plugins, along with understanding their implementation through the examples. The Modal is a child window or a pop-up that is visible over the current page or the parent element. It is generally used to display some other data or content from some other source without leaving the current page. The child window or modal can contain data, interaction, and more. Only one modal window at a time can be supported by Bootstrap.

You can use the data-toggle=”modal” attribute inside a controller element, like a button or anchor along with data-target=”id” or href=”id” to target the particular modal that has to be open on the page.

Bootstrap Modal Class:

Here are the different classes that can be used with the modal plugin:

.container: This class is used to define the container element.
.row: It defines the row for the container.
.col-md-12: It shows the columns that have to be shown inside the container.
.modal: It enables the modal plugin.
.modal-dialog: It defines the dialog box for the modal.
.modal-content: It shows the content of the modal.
.modal-header: The heading of the modal is specified here.
.modal-body: The modal body content can be written here.
.modal-footer: The footer mainly consists of buttons is defined here.

Bootstrap Modal Attributes:

data-bs-dismiss=”modal”: It removes the current modal from the web page.
data-bs-toggle=”modal”: It tells the element that the modal has to appear by clicking on it.
data-bs-target=”myModal”: It specifies the element that which modal has to be removed from the web page by giving it the id of the modal.

Here are some classes for the different modal sizes:

We can use .modal-sm, .modal-lg, and .modal-xl classes to display modal in different sizes windows.

.modal-sm: This class is used to size the modal in the smallest sized window.
.modal-lg: It provides the large-sized modal for big screens.
.modal-xl: This class gives an extra large-sized modal for bigger screens.

NOTE: Modal is by default medium-sized.

Syntax:

<button class="btn btn-primary" data-toggle="modal">
    Show modal
</button>
<div class="modal fade bd-example-modal-lg">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Here are the required plugins that have to insert inside the HTML file:

<!----Bootstrap CSS CDN---->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet" 
      integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
       crossorigin="anonymous">

<!----Bootstrap JavaScript CDN---->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" 
        integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" 
        crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
        integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 
        crossorigin="anonymous">
</script>

Example: The example below illustrates the use of a modal plugin in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous">
    </script>
    <title>Bootstrap Modal Plugin</title>
</head>
 
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h3>Bootstrap Modal Plugin</h3>
        <br>
        <div class="container center">
            <div class="row">
                <div class="col-md-12">
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h2>
                                        Welcome to GeeksforGeeks Learning!
                                    </h2> 
                                </div>
                                <div class="modal-body">
                                     
<p>A computer science portal for geeks.</p>
 
                                     
<p>Do you want to join?</p>
 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary">
                                        No, Thanks
                                    </button>
                                    <button class="btn btn-primary"
                                            data-bs-dismiss="modal">
                                        Yes, Offcourse
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#myModal">
                        Show modal
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: The below example demonstrates the use of the small-sized modal in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous">
    </script>
    <title>Bootstrap Modal Plugin</title>
</head>
 
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h3>Bootstrap Modal Plugin</h3>
        <br>
        <div class="container center">
            <div class="row">
                <div class="col-md-12">
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>
                                        Welcome to GeeksforGeeks Learning!
                                    </h3>
                                </div>
                                <div class="modal-body">
                                     
<p>A computer science portal for geeks.</p>
 
                                     
<p>Do you want to join?</p>
 
                                     
<p>I'm a small size modal</p>
 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary"
                                            data-bs-dismiss="modal">
                                        OK
                                    </button>
                                    <button class="btn btn-primary"
                                            data-bs-dismiss="modal">
                                        Yes, Offcourse
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#myModal">
                        Show modal
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>