<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Jekyll v3.7.0"> <title>Modal · Bootstrap</title> <!-- Bootstrap core CSS --> <link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Documentation extras --> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> <link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet"> <!-- Favicons --> <link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> <link rel="icon" href="/favicon.ico"> <meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"> <meta name="theme-color" content="#563d7c"> <!-- Twitter --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:title" content="Modal"> <meta name="twitter:description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png"> <!-- Facebook --> <meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/modal/"> <meta property="og:title" content="Modal"> <meta property="og:description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta property="og:type" content="website"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-146052-10', 'getbootstrap.com'); ga('send', 'pageview'); </script> </head> <body> <a id="skippy" class="sr-only sr-only-focusable" href="#content"> <div class="container"> <span class="skiplink-text">Skip to main content</span> </div> </a> <a href="https://getbootstrap.com" class="d-block px-3 py-2 text-center text-bold text-white old-bv">There's a newer version of Bootstrap 4!</a> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a> <div class="navbar-nav-scroll"> <ul class="navbar-nav bd-navbar-nav flex-row"> <li class="nav-item"> <a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> </li> <li class="nav-item"> <a class="nav-link active" href="/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> </li> <li class="nav-item"> <a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> </li> <li class="nav-item"> <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> </li> <li class="nav-item"> <a class="nav-link" href="https://jobs.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a> </li> <li class="nav-item"> <a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> </li> <li class="nav-item"> <a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> </li> </ul> </div> <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v4.0 </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> <a class="dropdown-item" href="/docs/4.1/">Latest (v4.1.x)</a> <a class="dropdown-item active" href="/docs/4.0/">v4.0.0</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a> <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a> <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> </div> </li> <li class="nav-item"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a> </li> <li class="nav-item"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a> </li> <li class="nav-item"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a> </li> </ul> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a> </header> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <form class="bd-search d-flex align-items-center"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button> </form> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/"> Getting started </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/getting-started/introduction/"> Introduction </a></li><li> <a href="/docs/4.0/getting-started/download/"> Download </a></li><li> <a href="/docs/4.0/getting-started/contents/"> Contents </a></li><li> <a href="/docs/4.0/getting-started/browsers-devices/"> Browsers & devices </a></li><li> <a href="/docs/4.0/getting-started/javascript/"> JavaScript </a></li><li> <a href="/docs/4.0/getting-started/theming/"> Theming </a></li><li> <a href="/docs/4.0/getting-started/build-tools/"> Build tools </a></li><li> <a href="/docs/4.0/getting-started/webpack/"> Webpack </a></li><li> <a href="/docs/4.0/getting-started/accessibility/"> Accessibility </a></li></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/"> Layout </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/layout/overview/"> Overview </a></li><li> <a href="/docs/4.0/layout/grid/"> Grid </a></li><li> <a href="/docs/4.0/layout/media-object/"> Media object </a></li><li> <a href="/docs/4.0/layout/utilities-for-layout/"> Utilities for layout </a></li></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/"> Content </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/content/reboot/"> Reboot </a></li><li> <a href="/docs/4.0/content/typography/"> Typography </a></li><li> <a href="/docs/4.0/content/code/"> Code </a></li><li> <a href="/docs/4.0/content/images/"> Images </a></li><li> <a href="/docs/4.0/content/tables/"> Tables </a></li><li> <a href="/docs/4.0/content/figures/"> Figures </a></li></ul> </div><div class="bd-toc-item active"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/"> Components </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/components/alerts/"> Alerts </a></li><li> <a href="/docs/4.0/components/badge/"> Badge </a></li><li> <a href="/docs/4.0/components/breadcrumb/"> Breadcrumb </a></li><li> <a href="/docs/4.0/components/buttons/"> Buttons </a></li><li> <a href="/docs/4.0/components/button-group/"> Button group </a></li><li> <a href="/docs/4.0/components/card/"> Card </a></li><li> <a href="/docs/4.0/components/carousel/"> Carousel </a></li><li> <a href="/docs/4.0/components/collapse/"> Collapse </a></li><li> <a href="/docs/4.0/components/dropdowns/"> Dropdowns </a></li><li> <a href="/docs/4.0/components/forms/"> Forms </a></li><li> <a href="/docs/4.0/components/input-group/"> Input group </a></li><li> <a href="/docs/4.0/components/jumbotron/"> Jumbotron </a></li><li> <a href="/docs/4.0/components/list-group/"> List group </a></li><li class="active bd-sidenav-active"> <a href="/docs/4.0/components/modal/"> Modal </a></li><li> <a href="/docs/4.0/components/navs/"> Navs </a></li><li> <a href="/docs/4.0/components/navbar/"> Navbar </a></li><li> <a href="/docs/4.0/components/pagination/"> Pagination </a></li><li> <a href="/docs/4.0/components/popovers/"> Popovers </a></li><li> <a href="/docs/4.0/components/progress/"> Progress </a></li><li> <a href="/docs/4.0/components/scrollspy/"> Scrollspy </a></li><li> <a href="/docs/4.0/components/tooltips/"> Tooltips </a></li></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> Utilities </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/utilities/borders/"> Borders </a></li><li> <a href="/docs/4.0/utilities/clearfix/"> Clearfix </a></li><li> <a href="/docs/4.0/utilities/close-icon/"> Close icon </a></li><li> <a href="/docs/4.0/utilities/colors/"> Colors </a></li><li> <a href="/docs/4.0/utilities/display/"> Display </a></li><li> <a href="/docs/4.0/utilities/embed/"> Embed </a></li><li> <a href="/docs/4.0/utilities/flex/"> Flex </a></li><li> <a href="/docs/4.0/utilities/float/"> Float </a></li><li> <a href="/docs/4.0/utilities/image-replacement/"> Image replacement </a></li><li> <a href="/docs/4.0/utilities/position/"> Position </a></li><li> <a href="/docs/4.0/utilities/screenreaders/"> Screenreaders </a></li><li> <a href="/docs/4.0/utilities/sizing/"> Sizing </a></li><li> <a href="/docs/4.0/utilities/spacing/"> Spacing </a></li><li> <a href="/docs/4.0/utilities/text/"> Text </a></li><li> <a href="/docs/4.0/utilities/vertical-align/"> Vertical align </a></li><li> <a href="/docs/4.0/utilities/visibility/"> Visibility </a></li></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/extend/approach/"> Extend </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/extend/approach/"> Approach </a></li><li> <a href="/docs/4.0/extend/icons/"> Icons </a></li></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/migration/"> Migration </a> <ul class="nav bd-sidenav"></ul> </div><div class="bd-toc-item"> <a class="bd-toc-link" href="/docs/4.0/about/overview/"> About </a> <ul class="nav bd-sidenav"><li> <a href="/docs/4.0/about/overview/"> Overview </a></li><li> <a href="/docs/4.0/about/brand/"> Brand </a></li><li> <a href="/docs/4.0/about/license/"> License </a></li><li> <a href="/docs/4.0/about/translations/"> Translations </a></li></ul> </div></nav> </div> <div class="d-none d-xl-block col-xl-2 bd-toc"> <ul class="section-nav"> <li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li> <li class="toc-entry toc-h2"><a href="#examples">Examples</a> <ul> <li class="toc-entry toc-h3"><a href="#modal-components">Modal components</a></li> <li class="toc-entry toc-h3"><a href="#live-demo">Live demo</a></li> <li class="toc-entry toc-h3"><a href="#scrolling-long-content">Scrolling long content</a></li> <li class="toc-entry toc-h3"><a href="#vertically-centered">Vertically centered</a></li> <li class="toc-entry toc-h3"><a href="#tooltips-and-popovers">Tooltips and popovers</a></li> <li class="toc-entry toc-h3"><a href="#using-the-grid">Using the grid</a></li> <li class="toc-entry toc-h3"><a href="#varying-modal-content">Varying modal content</a></li> <li class="toc-entry toc-h3"><a href="#remove-animation">Remove animation</a></li> <li class="toc-entry toc-h3"><a href="#dynamic-heights">Dynamic heights</a></li> <li class="toc-entry toc-h3"><a href="#accessibility">Accessibility</a></li> <li class="toc-entry toc-h3"><a href="#embedding-youtube-videos">Embedding YouTube videos</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#optional-sizes">Optional sizes</a> <ul> <li class="toc-entry toc-h4"><a href="#large-modal">Large modal</a></li> <li class="toc-entry toc-h4"><a href="#small-modal">Small modal</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#usage">Usage</a> <ul> <li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li> <li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li> <li class="toc-entry toc-h3"><a href="#options">Options</a></li> <li class="toc-entry toc-h3"><a href="#methods">Methods</a> <ul> <li class="toc-entry toc-h4"><a href="#asynchronous-methods-and-transitions">Asynchronous methods and transitions</a></li> <li class="toc-entry toc-h4"><a href="#modaloptions">.modal(options)</a></li> <li class="toc-entry toc-h4"><a href="#modaltoggle">.modal('toggle')</a></li> <li class="toc-entry toc-h4"><a href="#modalshow">.modal('show')</a></li> <li class="toc-entry toc-h4"><a href="#modalhide">.modal('hide')</a></li> <li class="toc-entry toc-h4"><a href="#modalhandleupdate">.modal('handleUpdate')</a></li> <li class="toc-entry toc-h4"><a href="#modaldispose">.modal('dispose')</a></li> </ul> </li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li> </ul> </li> </ul> </div> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <h1 class="bd-title" id="content">Modal</h1> <p class="bd-lead">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <h2 id="how-it-works">How it works</h2> <p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p> <ul> <li>Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <code class="highlighter-rouge"><body></code> so that modal content scrolls instead.</li> <li>Clicking on the modal “backdrop” will automatically close the modal.</li> <li>Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.</li> <li>Modals use <code class="highlighter-rouge">position: fixed</code>, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a <code class="highlighter-rouge">.modal</code> within another fixed element.</li> <li>Once again, due to <code class="highlighter-rouge">position: fixed</code>, there are some caveats with using modals on mobile devices. <a href="/docs/4.0/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile">See our browser support docs</a> for details.</li> <li>Due to how HTML5 defines its semantics, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus">the <code class="highlighter-rouge">autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li> </ul> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'focus'</span><span class="p">)</span> <span class="p">})</span></code></pre></figure> <p>Keep reading for demos and usage guidelines.</p> <h2 id="examples">Examples</h2> <h3 id="modal-components">Modal components</h3> <p>Below is a <em>static</em> modal example (meaning its <code class="highlighter-rouge">position</code> and <code class="highlighter-rouge">display</code> have been overridden). Included are the modal header, modal body (required for <code class="highlighter-rouge">padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</p> <div class="bd-example bd-example-modal"> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h5></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> <span class="nt"><p></span>Modal body text goes here.<span class="nt"></p></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <h3 id="live-demo">Live demo</h3> <p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p> <div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Woohoo, you're reading this text in a modal!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive"> Launch demo modal </button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span><span class="nt">></span> Launch demo modal <span class="nt"></button></span> <span class="c"><!-- Modal --></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">></span>Modal title<span class="nt"></h5></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> ... <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <h3 id="scrolling-long-content">Scrolling long content</h3> <p>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</p> <div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Launch demo modal </button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModalLong"</span><span class="nt">></span> Launch demo modal <span class="nt"></button></span> <span class="c"><!-- Modal --></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModalLong"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLongTitle"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLongTitle"</span><span class="nt">></span>Modal title<span class="nt"></h5></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> ... <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <h3 id="vertically-centered">Vertically centered</h3> <p>Add <code class="highlighter-rouge">.modal-dialog-centered</code> to <code class="highlighter-rouge">.modal-dialog</code> to vertically center the modal.</p> <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModalCenter"</span><span class="nt">></span> Launch demo modal <span class="nt"></button></span> <span class="c"><!-- Modal --></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModalCenter"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalCenterTitle"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-dialog-centered"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLongTitle"</span><span class="nt">></span>Modal title<span class="nt"></h5></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> ... <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <h3 id="tooltips-and-popovers">Tooltips and popovers</h3> <p><a href="/docs/4.0/components/tooltips/">Tooltips</a> and <a href="/docs/4.0/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p> <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in a modal</h5> <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> <hr /> <h5>Tooltips in a modal</h5> <p><a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers"> Launch demo modal </button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> <span class="nt"><h5></span>Popover in a modal<span class="nt"></h5></span> <span class="nt"><p></span>This <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary popover-test"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"Popover body content is set in this attribute."</span><span class="nt">></span>button<span class="nt"></a></span> triggers a popover on click.<span class="nt"></p></span> <span class="nt"><hr></span> <span class="nt"><h5></span>Tooltips in a modal<span class="nt"></h5></span> <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tooltip-test"</span> <span class="na">title=</span><span class="s">"Tooltip"</span><span class="nt">></span>This link<span class="nt"></a></span> and <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tooltip-test"</span> <span class="na">title=</span><span class="s">"Tooltip"</span><span class="nt">></span>that link<span class="nt"></a></span> have tooltips on hover.<span class="nt"></p></span> <span class="nt"></div></span></code></pre></figure> <h3 id="using-the-grid">Using the grid</h3> <p>Utilize the Bootstrap grid system within a modal by nesting <code class="highlighter-rouge">.container-fluid</code> within the <code class="highlighter-rouge">.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p> <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="container-fluid bd-example-row"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal"> Launch demo modal </button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 ml-auto"</span><span class="nt">></span>.col-md-4 .ml-auto<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 ml-auto"</span><span class="nt">></span>.col-md-3 .ml-auto<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-2 ml-auto"</span><span class="nt">></span>.col-md-2 .ml-auto<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 ml-auto"</span><span class="nt">></span>.col-md-6 .ml-auto<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span> Level 1: .col-sm-9 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-8 col-sm-6"</span><span class="nt">></span> Level 2: .col-8 .col-sm-6 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4 col-sm-6"</span><span class="nt">></span> Level 2: .col-4 .col-sm-6 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <h3 id="varying-modal-content">Varying modal content</h3> <p>Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code class="highlighter-rouge">event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code class="highlighter-rouge">data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p> <p>Below is a live demo followed by example HTML and JavaScript. For more information, <a href="#events">read the modal events docs</a> for details on <code class="highlighter-rouge">relatedTarget</code>.</p> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <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"> <h5 class="modal-title" id="exampleModalLabel">New message</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="col-form-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name" /> </div> <div class="form-group"> <label for="message-text" class="col-form-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@mdo"</span><span class="nt">></span>Open modal for @mdo<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@fat"</span><span class="nt">></span>Open modal for @fat<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@getbootstrap"</span><span class="nt">></span>Open modal for @getbootstrap<span class="nt"></button></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">></span>New message<span class="nt"></h5></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> <span class="nt"><form></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"recipient-name"</span> <span class="na">class=</span><span class="s">"col-form-label"</span><span class="nt">></span>Recipient:<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"recipient-name"</span><span class="nt">></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"message-text"</span> <span class="na">class=</span><span class="s">"col-form-label"</span><span class="nt">></span>Message:<span class="nt"></label></span> <span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"message-text"</span><span class="nt">></textarea></span> <span class="nt"></div></span> <span class="nt"></form></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Send message<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></div> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#exampleModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span><span class="p">)</span> <span class="c1">// Button that triggered the modal</span> <span class="kd">var</span> <span class="nx">recipient</span> <span class="o">=</span> <span class="nx">button</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'whatever'</span><span class="p">)</span> <span class="c1">// Extract info from data-* attributes</span> <span class="c1">// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).</span> <span class="c1">// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.</span> <span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-title'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span><span class="p">)</span> <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-body input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">recipient</span><span class="p">)</span> <span class="p">})</span></code></pre></figure> <h3 id="remove-animation">Remove animation</h3> <p>For modals that simply appear rather than fade in to view, remove the <code class="highlighter-rouge">.fade</code> class from your modal markup.</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"..."</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> ... <span class="nt"></div></span></code></pre></figure> <h3 id="dynamic-heights">Dynamic heights</h3> <p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p> <h3 id="accessibility">Accessibility</h3> <p>Be sure to add <code class="highlighter-rouge">role="dialog"</code> and <code class="highlighter-rouge">aria-labelledby="..."</code>, referencing the modal title, to <code class="highlighter-rouge">.modal</code>, and <code class="highlighter-rouge">role="document"</code> to the <code class="highlighter-rouge">.modal-dialog</code> itself. Additionally, you may give a description of your modal dialog with <code class="highlighter-rouge">aria-describedby</code> on <code class="highlighter-rouge">.modal</code>.</p> <h3 id="embedding-youtube-videos">Embedding YouTube videos</h3> <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p> <h2 id="optional-sizes">Optional sizes</h2> <p>Modals have two optional sizes, available via modifier classes to be placed on a <code class="highlighter-rouge">.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p> <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Large modal --></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-lg"</span><span class="nt">></span>Large modal<span class="nt"></button></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade bd-example-modal-lg"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myLargeModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> ... <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="c"><!-- Small modal --></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-sm"</span><span class="nt">></span>Small modal<span class="nt"></button></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade bd-example-modal-sm"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"mySmallModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-sm"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> ... <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> </div> </div> </div> <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> </div> </div> </div> <h2 id="usage">Usage</h2> <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code class="highlighter-rouge">.modal-open</code> to the <code class="highlighter-rouge"><body></code> to override default scrolling behavior and generates a <code class="highlighter-rouge">.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p> <h3 id="via-data-attributes">Via data attributes</h3> <p>Activate a modal without writing JavaScript. Set <code class="highlighter-rouge">data-toggle="modal"</code> on a controller element, like a button, along with a <code class="highlighter-rouge">data-target="#foo"</code> or <code class="highlighter-rouge">href="#foo"</code> to target a specific modal to toggle.</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>Launch modal<span class="nt"></button></span></code></pre></figure> <h3 id="via-javascript">Via JavaScript</h3> <p>Call a modal with id <code class="highlighter-rouge">myModal</code> with a single line of JavaScript:</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></figure> <h3 id="options">Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p> <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> <th style="width: 50px;">Type</th> <th style="width: 50px;">Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>backdrop</td> <td>boolean or the string <code>'static'</code></td> <td>true</td> <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> </tr> <tr> <td>keyboard</td> <td>boolean</td> <td>true</td> <td>Closes the modal when escape key is pressed</td> </tr> <tr> <td>focus</td> <td>boolean</td> <td>true</td> <td>Puts the focus on the modal when initialized.</td> </tr> <tr> <td>show</td> <td>boolean</td> <td>true</td> <td>Shows the modal when initialized.</td> </tr> </tbody> </table> <h3 id="methods">Methods</h3> <div class="bd-callout bd-callout-danger"> <h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4> <p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p> <p><a href="/docs/4.0/getting-started/javascript/">See our JavaScript documentation for more information.</a></p> </div> <h4 id="modaloptions"><code class="highlighter-rouge">.modal(options)</code></h4> <p>Activates your content as a modal. Accepts an optional options <code class="highlighter-rouge">object</code>.</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span></code></pre></figure> <h4 id="modaltoggle"><code class="highlighter-rouge">.modal('toggle')</code></h4> <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.modal</code> or <code class="highlighter-rouge">hidden.bs.modal</code> event occurs).</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></figure> <h4 id="modalshow"><code class="highlighter-rouge">.modal('show')</code></h4> <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.modal</code> event occurs).</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure> <h4 id="modalhide"><code class="highlighter-rouge">.modal('hide')</code></h4> <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.modal</code> event occurs).</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></figure> <h4 id="modalhandleupdate"><code class="highlighter-rouge">.modal('handleUpdate')</code></h4> <p>Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).</p> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre></figure> <h4 id="modaldispose"><code class="highlighter-rouge">.modal('dispose')</code></h4> <p>Destroys an element’s modal.</p> <h3 id="events">Events</h3> <p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge"><div class="modal"></code>).</p> <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>show.bs.modal</td> <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr> <tr> <td>shown.bs.modal</td> <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr> <tr> <td>hide.bs.modal</td> <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> </tr> <tr> <td>hidden.bs.modal</td> <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> </tr> </tbody> </table> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// do something...</span> <span class="p">})</span></code></pre></figure> </main> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="/docs/4.0/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/docs/4.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.0/assets/js/docs.min.js"></script> </body> </html>