diff options
Diffstat (limited to 'docs/4.6/components/toasts/index.html')
| -rw-r--r-- | docs/4.6/components/toasts/index.html | 361 |
1 files changed, 181 insertions, 180 deletions
diff --git a/docs/4.6/components/toasts/index.html b/docs/4.6/components/toasts/index.html index 9d1a9328d4..96f0ebdc84 100644 --- a/docs/4.6/components/toasts/index.html +++ b/docs/4.6/components/toasts/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -<meta name="generator" content="Hugo 0.88.1"> +<meta name="generator" content="Hugo 0.101.0"> <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="4.6"> @@ -17,7 +17,7 @@ <!-- Bootstrap core CSS --> -<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- Documentation extras --> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> @@ -105,10 +105,10 @@ <ul class="navbar-nav ml-md-auto"> <li class="nav-item dropdown"> - <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false"> - v4.6 - </a> - <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span> + </button> + <div class="dropdown-menu dropdown-menu-md-right"> <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a> @@ -285,7 +285,7 @@ </div> - + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> <nav id="TableOfContents"> <ul> @@ -318,7 +318,7 @@ </ul> </nav> </nav> - + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> @@ -360,21 +360,21 @@ The animation effect of this component is dependent on the <code>prefers-reduced Hello, world! This is a toast message. </div> </div> -</div><div class="highlight"><pre tabindex="0" 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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <h3 id="live">Live</h3> -<p>Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p> +<p>Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p> <div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;"> <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"> <div class="toast-header"> @@ -394,25 +394,25 @@ The animation effect of this component is dependent on the <code>prefers-reduced <div class="bd-example"> <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> </div> -<div class="highlight"><pre tabindex="0" 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">id</span><span class="o">=</span><span class="s">"liveToastBtn"</span><span class="p">></span>Show live toast<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">"position-fixed bottom-0 right-0 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 5; right: 0; bottom: 0;"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToast"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast hide"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"2000"</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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="translucent">Translucent</h3> -<p>Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the <code>backdrop-filter</code> CSS property, we’ll also attempt to blur the elements under a toast.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><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">id</span><span class="o">=</span><span class="s">"liveToastBtn"</span><span class="p">></span>Show live toast<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-fixed bottom-0 right-0 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 5; right: 0; bottom: 0;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToast"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast hide"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"2000"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="translucent">Translucent</h3> +<p>Toasts are slightly translucent to blend in with what’s below them.</p> <div class="bd-example bg-dark"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> @@ -428,19 +428,19 @@ The animation effect of this component is dependent on the <code>prefers-reduced Hello, world! This is a toast message. </div> </div> -</div><div class="highlight"><pre tabindex="0" 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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <h3 id="stacking">Stacking</h3> <p>When you have multiple toasts, we default to vertically stacking them in a readable manner.</p> <div class="bd-example bg-light"> @@ -473,33 +473,33 @@ The animation effect of this component is dependent on the <code>prefers-reduced Heads up, toasts will stack automatically </div> </div> -</div><div class="highlight"><pre tabindex="0" 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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>just now<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - See? Just like this. - <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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>2 seconds ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Heads up, toasts will stack automatically - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>just now<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> See? Just like this. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>2 seconds ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Heads up, toasts will stack automatically +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <h2 id="placement">Placement</h2> <p>Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the <code>.toast</code>.</p> <div class="bd-example bg-dark"> @@ -519,21 +519,21 @@ The animation effect of this component is dependent on the <code>prefers-reduced </div> </div> </div> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</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">"toast"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <p>For systems that generate more notifications, consider using a wrapping element so they can easily stack.</p> <div class="bd-example bg-dark"> <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> @@ -572,40 +572,40 @@ The animation effect of this component is dependent on the <code>prefers-reduced </div> </div> </div> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span> - <span class="c"><!-- Position it --></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="p">></span> - - <span class="c"><!-- Then put toasts within --></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>just now<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - See? Just like this. - <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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>2 seconds ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Heads up, toasts will stack automatically - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="c"><!-- Position it --></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"> <span class="c"><!-- Then put toasts within --></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>just now<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> See? Just like this. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>2 seconds ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Heads up, toasts will stack automatically +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <p>You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.</p> <div class="bd-example bg-dark"> <!-- Flexbox container for aligning the toasts --> @@ -627,33 +627,33 @@ The animation effect of this component is dependent on the <code>prefers-reduced </div> </div> </div> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Flexbox container for aligning the toasts --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span> - - <span class="c"><!-- Then put toasts within --></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Flexbox container for aligning the toasts --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"> <span class="c"><!-- Then put toasts within --></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> <h2 id="accessibility">Accessibility</h2> -<p>Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code> region</a>. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include <code>aria-atomic="true"</code> to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the <a href="/docs/4.6/components/alerts/">alert component</a> instead of toast.</p> +<p>Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code> region</a>. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include <code>aria-atomic="true"</code> to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the <a href="/docs/4.6/components/alerts/">alert component</a> instead of toast.</p> <p>Note that the live region needs to be present in the markup <em>before</em> the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.</p> <p>You also need to adapt the <code>role</code> and <code>aria-live</code> level depending on the content. If it’s an important message like an error, use <code>role="alert" aria-live="assertive"</code>, otherwise use <code>role="status" aria-live="polite"</code> attributes.</p> -<p>As the content you’re displaying changes, be sure to update the <a href="#options"><code>delay</code> timeout</a> to ensure people have enough time to read the toast.</p> -<div class="highlight"><pre tabindex="0" 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">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>When using <code>autohide: false</code>, you must add a close button to allow users to dismiss the toast.</p> +<p>As the content you’re displaying changes, be sure to update the <a href="#options"><code>delay</code> timeout</a> so that users have enough time to read the toast.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</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> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>When using <code>autohide: false</code>, you must add a close button to allow users to dismiss the toast.</p> <div class="bd-example bg-light"> <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> <div class="toast-header"> @@ -669,24 +669,25 @@ The animation effect of this component is dependent on the <code>prefers-reduced Hello, world! This is a toast message. </div> </div> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">data-autohide</span><span class="o">=</span><span class="s">"false"</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">"toast-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></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">"toast-body"</span><span class="p">></span> - Hello, world! This is a toast message. - <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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">data-autohide</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span><span class="p">></span>11 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"ml-2 mb-1 close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Hello, world! This is a toast message. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> +<p>While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long <a href="#options"><code>delay</code> timeout</a>, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with <code>autohide: false</code>.</p> <h2 id="javascript-behavior">JavaScript behavior</h2> <h3 id="usage">Usage</h3> <p>Initialize toasts via JavaScript:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span> -</code></pre></div><h3 id="options">Options</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span> +</span></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-</code>, as in <code>data-animation=""</code>.</p> <table class="table table-bordered table-striped"> <thead> @@ -733,14 +734,14 @@ The animation effect of this component is dependent on the <code>prefers-reduced <h4 id="toastshow"><code>.toast('show')</code></h4> <p>Reveals an element’s toast. <strong>Returns to the caller before the toast has actually been shown</strong> (i.e. before the <code>shown.bs.toast</code> event occurs). You have to manually call this method, instead your toast won’t show.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -</code></pre></div><h4 id="toasthide"><code>.toast('hide')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="toasthide"><code>.toast('hide')</code></h4> <p>Hides an element’s toast. <strong>Returns to the caller before the toast has actually been hidden</strong> (i.e. before the <code>hidden.bs.toast</code> event occurs). You have to manually call this method if you made <code>autohide</code> to <code>false</code>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> -</code></pre></div><h4 id="toastdispose"><code>.toast('dispose')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="toastdispose"><code>.toast('dispose')</code></h4> <p>Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span> -</code></pre></div><h3 id="events">Events</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span> +</span></span></code></pre></div><h3 id="events">Events</h3> <table class="table table-bordered table-striped"> <thead> <tr> @@ -767,10 +768,10 @@ You have to manually call this method, instead your toast won’t show.</p> </tr> </tbody> </table> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myToast'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.toast'</span><span class="p">,</span> <span class="kd">function</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 class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myToast'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.toast'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// do something... +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> +</span></span></code></pre></div> </main> </div> </div> @@ -778,7 +779,7 @@ You have to manually call this method, instead your toast won’t show.</p> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> -<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |