Bootstrap 4 | Modal - GeeksforGeeks

21 Jun, 2019
In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn’t support nested modals as they create bad UI experience for the user. Therefore, only one modal window is supported at a time.
To use Bootstrap 4.0, either download Bootstrap in your project root folder or copy and paste the following link in the head section of the HTML code.
Required paths:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
However, there are many BootStrap components that require several JavaScript plugins in order to function well. Those plugins are jQuery, Popper.js, and a Bootstrap’s personal JavaScript plugin. The following chunk of code must be placed right before the closing body tag inside the script tag.
Required plugins:
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
<!DOCTYPE html><html lang="en">  <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport"  content="width=device-width, initial-scale=1, shrink-to-fit=no">   <!-- Bootstrap CSS --> <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"   crossorigin="anonymous"> <title>bootstrap | Modal</title> <style>    h1,h6 {            margin: 2%;          }    .btn {            margin-left: 2%;          } </style></head>  <body> <center>  <h1 style="color:green;">GeeksforGeeks</h1>         <!-- Button trigger modal -->  <button type="button" class="btn btn-primary" data-toggle="modal"                       data-target="#exampleModal">Launch Modal</button>      <!-- Modal -->  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"                  aria-labelledby="exampleModalLabel" aria-hidden="true">   <div class="modal-dialog" role="document">    <div class="modal-content">     <div class="modal-header">       <h6 class="modal-title" id="exampleModalLabel" style="color:green;">                                                         GeeksforGeeks</h6>                              <!-- The title of the modal -->      <button type="button" class="close" data-dismiss="modal"aria-label="Close">       <span aria-hidden="true">×</span>      </button>     </div>     <div class="modal-body">                           <!-- The content inside the modal box -->     <p>Articles that need little modification/improvement from reviewers      are published first. To quickly get your articles reviewed, please       refer existing articles, their formating style, coding style, and try      to make your close to them. </p>    </div>    <div class="modal-footer">     <button type="button" class="btn btn-secondary"                                              data-dismiss="modal">Close</button>                           <!-- The close button in the bottom of the modal -->     <button type="button" class="btn btn-primary">okay</button>             <!-- The save changes button in the bottom of the modal -->    </div>   </div>  </div> </div>          <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"   crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"   integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"   crossorigin="anonymous"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"   crossorigin="anonymous"> </script> </center></body>  </html>
Output:
Before launching the Modal:
After launching the Modal:
Modals are built with HTML, CSS, and JavaScript. They are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
Clicking the modal “backdrop” will close the modal automatically.
This Modal supports only one modal window at a time.
Modals use position: fixed, which can sometimes be a bit particular about its rendering. If possible, place your modal HTML in a top-level position to avoid potential interference from other elements.
Due to position: fixed, there are few caveats with using modals on mobile devices.
Using the grid:Utilize the Bootstrap grid system within a modal by nesting <b-container fluid> within the modal-body else you can use the normal grid system <b-row> (or <b-form-row>) and <b-col> as you would anywhere else.
Tooltips and popovers:A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over.The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element.Example:<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport"      content="width=device-width, initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"      crossorigin="anonymous">    <title>bootstrap | Modal</title>    <style>        h1,        h6 {            margin: 2%;        }                  .btn {            margin-left: 2%;        }    </style></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <!-- Button trigger modal -->        <button type="button" class="btn btn-primary" data-toggle="modal"                 data-target="#exampleModal">            Launch Modal        </button>        <!-- Modal -->        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"              aria-labelledby="exampleModalLabel" aria-hidden="true">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <h3 class="modal-title" id="exampleModalLabel"                             style="color:green;">                         GeeksforGeeks</h3>                        <!-- The title of the modal -->                        <button type="button" class="close" data-dismiss="modal"                                 aria-label="Close">                            <span aria-hidden="true">×</span>                        </button>                    </div>                    <div class="modal-body">                        <!-- The content inside the modal box -->                        <div class="container">                            <p>This                                <button style="color:green;" data-toggle="popover"                                 title="popover-title" data-content="popover-content">                                    GeeksforGeeks                                </button>triggers a popover on click.</p>                        </div>                          <script>                            $(document).ready(function() {                                $('[data-toggle="popover"]').popover();                            });                        </script>                        <div class="container">                              <p>This <a style="color:green;" data-toggle="tooltip" title="Tooltip">                                GeeksforGeeks                                </a> will show a tooltip on hover.                            </p>                        </div>                          <script>                            $(document).ready(function() {                                $('[data-toggle="tooltip"]').tooltip();                            });                        </script>                    </div>                    <div class="modal-footer">                        <button type="button" class="btn btn-secondary" data-dismiss="modal">                            Close</button>                        <!-- The close button in the bottom of the modal -->                        <button type="button" class="btn btn-primary">okay</button>                        <!-- The save changes button in the bottom of the modal -->                    </div>                </div>            </div>        </div>        <!-- Optional JavaScript -->        <!-- jQuery first, then Popper.js, then Bootstrap JS -->        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"          crossorigin="anonymous">        </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"          crossorigin="anonymous">        </script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"          crossorigin="anonymous">        </script>    </center></body>  </html>Output:
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over.
The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element.
Example:
<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport"      content="width=device-width, initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"      crossorigin="anonymous">    <title>bootstrap | Modal</title>    <style>        h1,        h6 {            margin: 2%;        }                  .btn {            margin-left: 2%;        }    </style></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <!-- Button trigger modal -->        <button type="button" class="btn btn-primary" data-toggle="modal"                 data-target="#exampleModal">            Launch Modal        </button>        <!-- Modal -->        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"              aria-labelledby="exampleModalLabel" aria-hidden="true">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <h3 class="modal-title" id="exampleModalLabel"                             style="color:green;">                         GeeksforGeeks</h3>                        <!-- The title of the modal -->                        <button type="button" class="close" data-dismiss="modal"                                 aria-label="Close">                            <span aria-hidden="true">×</span>                        </button>                    </div>                    <div class="modal-body">                        <!-- The content inside the modal box -->                        <div class="container">                            <p>This                                <button style="color:green;" data-toggle="popover"                                 title="popover-title" data-content="popover-content">                                    GeeksforGeeks                                </button>triggers a popover on click.</p>                        </div>                          <script>                            $(document).ready(function() {                                $('[data-toggle="popover"]').popover();                            });                        </script>                        <div class="container">                              <p>This <a style="color:green;" data-toggle="tooltip" title="Tooltip">                                GeeksforGeeks                                </a> will show a tooltip on hover.                            </p>                        </div>                          <script>                            $(document).ready(function() {                                $('[data-toggle="tooltip"]').tooltip();                            });                        </script>                    </div>                    <div class="modal-footer">                        <button type="button" class="btn btn-secondary" data-dismiss="modal">                            Close</button>                        <!-- The close button in the bottom of the modal -->                        <button type="button" class="btn btn-primary">okay</button>                        <!-- The save changes button in the bottom of the modal -->                    </div>                </div>            </div>        </div>        <!-- Optional JavaScript -->        <!-- jQuery first, then Popper.js, then Bootstrap JS -->        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"          crossorigin="anonymous">        </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"          crossorigin="anonymous">        </script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"          crossorigin="anonymous">        </script>    </center></body>  </html>
Output:
Small Modal:<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-sm">
Large Modal:<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-lg">
Extra Large Modal:<div class="modal-dialog modal-xl">
<div class="modal-dialog modal-xl">
<div class="<div class="modal-dialog modal-dialog-centered">
<div class="modal-dialog modal-dialog-scrollable">
Bootstrap-4
Picked
Web technologies
Bootstrap
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 pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to align button to right side of text box in Bootstrap?
How to change the background color of the active nav-item?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
How to Use Bootstrap with React?