rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add toast code to the snippet

Browse source
This commit is contained in:
Mark Otto 2021-01-13 17:12:44 -08:00
parent 5f6dd9d881
commit 5405da8a8a
1 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
site/content/docs/5.0/components/toasts.md
View file

@ -59,9 +59,27 @@ Click the button the below to show as toast (positioning with our utilities in t
</div>
</div>
{{< example >}}
<div class="bd-example">
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
</div>
{{< highlight html >}}
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
{{< /example >}}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
{{< endhighlight >}}
### Translucent