mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-24 16:52:19 +01:00
1328 lines
113 KiB
HTML
1328 lines
113 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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="Hugo 0.79.0">
|
|
|
|
<meta name="docsearch:language" content="en">
|
|
<meta name="docsearch:version" content="5.0">
|
|
|
|
<title>Modal · Bootstrap v5.0</title>
|
|
|
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
|
|
|
|
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
|
|
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
|
<meta name="theme-color" content="#7952b3">
|
|
|
|
<!-- 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/docs/5.0/assets/brand/bootstrap-social.png">
|
|
|
|
<!-- Facebook -->
|
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.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="article">
|
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="1000">
|
|
<meta property="og:image:height" content="500">
|
|
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div class="skippy overflow-hidden">
|
|
<div class="container-xl">
|
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
|
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="d-md-none text-white-50">
|
|
|
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" 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"/></svg>
|
|
<small class="d-md-none ms-2">GitHub</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" 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"/></svg>
|
|
<small class="d-md-none ms-2">Twitter</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" 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"/></svg>
|
|
<small class="d-md-none ms-2">Slack</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
|
<small class="d-md-none ms-2">Open Collective</small>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
|
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
|
<div class="container-xxl d-flex align-items-md-center">
|
|
<form class="bd-search position-relative me-auto">
|
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
|
</form>
|
|
|
|
<div class="dropdown ms-3">
|
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.x</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-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" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
|
<title>Expand</title>
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
|
<title>Collapse</title>
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
|
</svg>
|
|
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="container-xxl my-md-4 bd-layout">
|
|
<aside class="bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
|
Getting started
|
|
</button>
|
|
<div class="collapse" id="getting-started-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
|
Customize
|
|
</button>
|
|
<div class="collapse" id="customize-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
|
Layout
|
|
</button>
|
|
<div class="collapse" id="layout-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
|
Content
|
|
</button>
|
|
<div class="collapse" id="content-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
|
Forms
|
|
</button>
|
|
<div class="collapse" id="forms-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1 active">
|
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
|
Components
|
|
</button>
|
|
<div class="collapse show" id="components-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded active" aria-current="page">Modal</a></li>
|
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
|
Helpers
|
|
</button>
|
|
<div class="collapse" id="helpers-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
|
Utilities
|
|
</button>
|
|
<div class="collapse" id="utilities-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
|
Extend
|
|
</button>
|
|
<div class="collapse" id="extend-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
|
About
|
|
</button>
|
|
<div class="collapse" id="about-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="my-3 mx-4 border-top"></li>
|
|
<li>
|
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
|
Migration
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</aside>
|
|
|
|
<main class="bd-main order-1">
|
|
<div class="bd-intro ps-lg-4">
|
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/modal.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
|
<h1 class="bd-title" id="content">Modal</h1>
|
|
</div>
|
|
<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?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
|
<nav id="TableOfContents">
|
|
<ul>
|
|
<li><a href="#how-it-works">How it works</a></li>
|
|
<li><a href="#examples">Examples</a>
|
|
<ul>
|
|
<li><a href="#modal-components">Modal components</a></li>
|
|
<li><a href="#live-demo">Live demo</a></li>
|
|
<li><a href="#static-backdrop">Static backdrop</a></li>
|
|
<li><a href="#scrolling-long-content">Scrolling long content</a></li>
|
|
<li><a href="#vertically-centered">Vertically centered</a></li>
|
|
<li><a href="#tooltips-and-popovers">Tooltips and popovers</a></li>
|
|
<li><a href="#using-the-grid">Using the grid</a></li>
|
|
<li><a href="#varying-modal-content">Varying modal content</a></li>
|
|
<li><a href="#change-animation">Change animation</a></li>
|
|
<li><a href="#remove-animation">Remove animation</a></li>
|
|
<li><a href="#dynamic-heights">Dynamic heights</a></li>
|
|
<li><a href="#accessibility">Accessibility</a></li>
|
|
<li><a href="#embedding-youtube-videos">Embedding YouTube videos</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#optional-sizes">Optional sizes</a></li>
|
|
<li><a href="#fullscreen-modal">Fullscreen Modal</a></li>
|
|
<li><a href="#usage">Usage</a>
|
|
<ul>
|
|
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
|
<li><a href="#via-javascript">Via JavaScript</a></li>
|
|
<li><a href="#options">Options</a></li>
|
|
<li><a href="#methods">Methods</a>
|
|
<ul>
|
|
<li><a href="#passing-options">Passing options</a></li>
|
|
<li><a href="#toggle">toggle</a></li>
|
|
<li><a href="#show">show</a></li>
|
|
<li><a href="#hide">hide</a></li>
|
|
<li><a href="#handleupdate">handleUpdate</a></li>
|
|
<li><a href="#dispose">dispose</a></li>
|
|
<li><a href="#getinstance">getInstance</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#events">Events</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div class="bd-content ps-lg-4">
|
|
|
|
|
|
<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><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>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>.modal</code> within another fixed element.</li>
|
|
<li>Once again, due to <code>position: fixed</code>, there are some caveats with using modals on mobile devices. <a href="/docs/5.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>autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li>
|
|
</ul>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModal</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">)</span>
|
|
<span class="kd">var</span> <span class="nx">myInput</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myInput'</span><span class="p">)</span>
|
|
|
|
<span class="nx">myModal</span><span class="p">.</span><span class="nx">addEventListener</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">myInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span>
|
|
<span class="p">})</span>
|
|
</code></pre></div><div class="bd-callout bd-callout-info">
|
|
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/5.0/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.
|
|
</div>
|
|
|
|
<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>position</code> and <code>display</code> have been overridden). Included are the modal header, modal body (required for <code>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">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Modal body text goes here.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><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 class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModalLive">
|
|
Launch demo modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModal"</span><span class="p">></span>
|
|
Launch demo modal
|
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
|
|
<span class="c"><!-- Modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><h3 id="static-backdrop">Static backdrop</h3>
|
|
<p>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>
|
|
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Understood</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
|
|
Launch static backdrop modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#staticBackdrop"</span><span class="p">></span>
|
|
Launch static backdrop modal
|
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
|
|
<span class="c"><!-- Modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdrop"</span> <span class="na">data-bs-backdrop</span><span class="o">=</span><span class="s">"static"</span> <span class="na">data-bs-keyboard</span><span class="o">=</span><span class="s">"false"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Understood<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><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 class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModalLong">
|
|
Launch demo modal
|
|
</button>
|
|
</div>
|
|
<p>You can also create a scrollable modal that allows scroll the modal body by adding <code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.</p>
|
|
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
|
|
Launch demo modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Scrollable modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-scrollable"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><h3 id="vertically-centered">Vertically centered</h3>
|
|
<p>Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModalCenter">
|
|
Vertically centered modal
|
|
</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
|
|
Vertically centered scrollable modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Vertically centered modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="c"><!-- Vertically centered scrollable modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered modal-dialog-scrollable"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><h3 id="tooltips-and-popovers">Tooltips and popovers</h3>
|
|
<p><a href="/docs/5.0/components/tooltips/">Tooltips</a> and <a href="/docs/5.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 class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-content="Popover body content is set in this attribute." data-bs-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-bs-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModalPopovers">
|
|
Launch demo modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Popover in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>This <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary popover-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Popover title"</span> <span class="na">data-bs-content</span><span class="o">=</span><span class="s">"Popover body content is set in this attribute."</span><span class="p">></span>button<span class="p"></</span><span class="nt">a</span><span class="p">></span> triggers a popover on click.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">hr</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Tooltips in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>that link<span class="p"></</span><span class="nt">a</span><span class="p">></span> have tooltips on hover.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><h3 id="using-the-grid">Using the grid</h3>
|
|
<p>Utilize the Bootstrap grid system within a modal by nesting <code>.container-fluid</code> within the <code>.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p>
|
|
<div class="modal fade" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 ms-auto">.col-md-4 .ms-auto</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
|
|
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-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-bs-toggle="modal" data-bs-target="#gridSystemModal">
|
|
Launch demo modal
|
|
</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container-fluid"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4"</span><span class="p">></span>.col-md-4<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4 ms-auto"</span><span class="p">></span>.col-md-4 .ms-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-3 ms-auto"</span><span class="p">></span>.col-md-3 .ms-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-2 ms-auto"</span><span class="p">></span>.col-md-2 .ms-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-6 ms-auto"</span><span class="p">></span>.col-md-6 .ms-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
|
Level 1: .col-sm-9
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-8 col-sm-6"</span><span class="p">></span>
|
|
Level 2: .col-8 .col-sm-6
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-4 col-sm-6"</span><span class="p">></span>
|
|
Level 2: .col-4 .col-sm-6
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><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>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code>data-bs-*</code> attributes</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>relatedTarget</code>.</p>
|
|
<div class="bd-example">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
|
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="recipient-name" class="col-form-label">Recipient:</label>
|
|
<input type="text" class="form-control" id="recipient-name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<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-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Send message</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-bs-whatever</span><span class="o">=</span><span class="s">"@mdo"</span><span class="p">></span>Open modal for @mdo<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-bs-whatever</span><span class="o">=</span><span class="s">"@fat"</span><span class="p">></span>Open modal for @fat<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-bs-whatever</span><span class="o">=</span><span class="s">"@getbootstrap"</span><span class="p">></span>Open modal for @getbootstrap<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>New message<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">form</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"recipient-name"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Recipient:<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"recipient-name"</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"message-text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Message:<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"message-text"</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Send message<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleModal</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'exampleModal'</span><span class="p">)</span>
|
|
<span class="nx">exampleModal</span><span class="p">.</span><span class="nx">addEventListener</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="c1">// Button that triggered the modal
|
|
</span><span class="c1"></span> <span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span>
|
|
<span class="c1">// Extract info from data-bs-* attributes
|
|
</span><span class="c1"></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">getAttribute</span><span class="p">(</span><span class="s1">'data-bs-whatever'</span><span class="p">)</span>
|
|
<span class="c1">// If necessary, you could initiate an AJAX request here
|
|
</span><span class="c1"></span> <span class="c1">// and then do the updating in a callback.
|
|
</span><span class="c1"></span> <span class="c1">//
|
|
</span><span class="c1"></span> <span class="c1">// Update the modal's content.
|
|
</span><span class="c1"></span> <span class="kd">var</span> <span class="nx">modalTitle</span> <span class="o">=</span> <span class="nx">exampleModal</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.modal-title'</span><span class="p">)</span>
|
|
<span class="kd">var</span> <span class="nx">modalBodyInput</span> <span class="o">=</span> <span class="nx">exampleModal</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.modal-body input'</span><span class="p">)</span>
|
|
|
|
<span class="nx">modalTitle</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span>
|
|
<span class="nx">modalBodyInput</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">recipient</span>
|
|
<span class="p">})</span>
|
|
</code></pre></div><h3 id="change-animation">Change animation</h3>
|
|
<p>The <code>$modal-fade-transform</code> variable determines the transform state of <code>.modal-dialog</code> before the modal fade-in animation, the <code>$modal-show-transform</code> variable determines the transform of <code>.modal-dialog</code> at the end of the modal fade-in animation.</p>
|
|
<p>If you want for example a zoom-in animation, you can set <code>$modal-fade-transform: scale(.8)</code>.</p>
|
|
<h3 id="remove-animation">Remove animation</h3>
|
|
<p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><h3 id="dynamic-heights">Dynamic heights</h3>
|
|
<p>If the height of a modal changes while it is open, you should call <code>myModal.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>aria-labelledby="..."</code>, referencing the modal title, to <code>.modal</code>. Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>. Note that you don’t need to add <code>role="dialog"</code> since we already add it via JavaScript.</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 three optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Size</th>
|
|
<th>Class</th>
|
|
<th>Modal max-width</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Small</td>
|
|
<td><code>.modal-sm</code></td>
|
|
<td><code>300px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Default</td>
|
|
<td class="text-muted">None</td>
|
|
<td><code>500px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Large</td>
|
|
<td><code>.modal-lg</code></td>
|
|
<td><code>800px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Extra large</td>
|
|
<td><code>.modal-xl</code></td>
|
|
<td><code>1140px</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Our default modal without modifier class constitutes the “medium” size modal.</p>
|
|
<div class="bd-example">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXl">Extra large modal</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">Large modal</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSm">Small modal</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-xl"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-lg"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-sm"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="fullscreen-modal">Fullscreen Modal</h2>
|
|
<p>Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a <code>.modal-dialog</code>.</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Class</th>
|
|
<th>Availability</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>.modal-fullscreen</code></td>
|
|
<td>Always</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.modal-fullscreen-sm-down</code></td>
|
|
<td>Below <code>576px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.modal-fullscreen-md-down</code></td>
|
|
<td>Below <code>768px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.modal-fullscreen-lg-down</code></td>
|
|
<td>Below <code>992px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.modal-fullscreen-xl-down</code></td>
|
|
<td>Below <code>1200px</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.modal-fullscreen-xxl-down</code></td>
|
|
<td>Below <code>1400px</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="bd-example">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
|
|
</div>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Full screen modal --></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-fullscreen-sm-down"</span><span class="p">></span>
|
|
...
|
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div><div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-sm-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-md-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-lg-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-xl-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-xxl-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</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>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.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>data-bs-toggle="modal"</code> on a controller element, like a button, along with a <code>data-bs-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#myModal"</span><span class="p">></span>Launch modal<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
|
</code></pre></div><h3 id="via-javascript">Via JavaScript</h3>
|
|
<p>Create a modal with a single line of JavaScript:</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">),</span> <span class="nx">options</span><span class="p">)</span>
|
|
</code></pre></div><h3 id="options">Options</h3>
|
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-backdrop=""</code>.</p>
|
|
<table class="table">
|
|
<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><code>backdrop</code></td>
|
|
<td>boolean or the string <code>'static'</code></td>
|
|
<td><code>true</code></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><code>keyboard</code></td>
|
|
<td>boolean</td>
|
|
<td><code>true</code></td>
|
|
<td>Closes the modal when escape key is pressed</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>focus</code></td>
|
|
<td>boolean</td>
|
|
<td><code>true</code></td>
|
|
<td>Puts the focus on 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/5.0/getting-started/javascript/#asynchronous-functions-and-transitions">See our JavaScript documentation for more information</a>.</p>
|
|
|
|
</div>
|
|
|
|
<h4 id="passing-options">Passing options</h4>
|
|
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">),</span> <span class="p">{</span>
|
|
<span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span>
|
|
<span class="p">})</span>
|
|
</code></pre></div><h4 id="toggle">toggle</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>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">toggle</span><span class="p">()</span>
|
|
</code></pre></div><h4 id="show">show</h4>
|
|
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
|
|
</code></pre></div><h4 id="hide">hide</h4>
|
|
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">hide</span><span class="p">()</span>
|
|
</code></pre></div><h4 id="handleupdate">handleUpdate</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>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">handleUpdate</span><span class="p">()</span>
|
|
</code></pre></div><h4 id="dispose">dispose</h4>
|
|
<p>Destroys an element’s modal. (Removes stored data on the DOM element)</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">dispose</span><span class="p">()</span>
|
|
</code></pre></div><h4 id="getinstance">getInstance</h4>
|
|
<p><em>Static</em> method which allows you to get the modal instance associated with a DOM element</p>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModalEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">)</span>
|
|
<span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap modal instance
|
|
</span></code></pre></div><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><div class="modal"></code>).</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 150px;">Event type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>show.bs.modal</code></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><code>shown.bs.modal</code></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><code>hide.bs.modal</code></td>
|
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>hidden.bs.modal</code></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>
|
|
<tr>
|
|
<td><code>hidePrevented.bs.modal</code></td>
|
|
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-bs-keyboard</code> set to <code>false</code>.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModalEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">)</span>
|
|
<span class="nx">myModalEl</span><span class="p">.</span><span class="nx">addEventListener</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">event</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="c1">// do something...
|
|
</span><span class="c1"></span><span class="p">})</span>
|
|
</code></pre></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
|
<div class="container">
|
|
<ul class="bd-footer-links ps-0 mb-3">
|
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
|
</ul>
|
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
|
<p class="mb-0">Currently v5.0.0-beta1. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
|
|
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|