diff --git a/js/tabler.js b/js/tabler.js
index 79ebc0a967838894ca2ebf91f0831325d6a8216b..e86be4b6bc05253f8a88ce9f004d41e6db074c69 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -58,6 +58,7 @@ $(document).ready(function() {
 
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
+  $('[data-toggle="toast"]').toast();
 
   /*
   Imask plugin
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index 1e5598f6b8791bfff46bc3ba241c0f7cc069e2ce..faf9efda27457fdb977f32a2921288d0aabb2150 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-
-
 ### Default markup
 
 {% example %}
 {% include ui/toast.html %}
 {% endexample %}
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
+
+{% example html class=bg-gray %}
+{% include ui/toast.html %}
+{% endexample %}
+
+### Stacking toasts
+
+If you want to stack toasts just put them in the same container.
+
+{% example %}
+{% include ui/toast.html person-id=3 %}
+{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_includes/ui/toast.html b/pages/_includes/ui/toast.html
index fd0227a9c714569b42ead438557acbea57ce2093..ded90207e4b7aecf26179d0b5236906cde238dae 100644
--- a/pages/_includes/ui/toast.html
+++ b/pages/_includes/ui/toast.html
@@ -1,6 +1,6 @@
 {% assign person-id = include.person-id | default: 2 %}
 {% assign person = site.data.people[person-id] %}
-<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
    <div class="toast-header">
       {% include ui/avatar.html person=person class="mr-2" size="sm" %}
       <strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
       </button>
    </div>
    <div class="toast-body">
-      Hello, world! This is a toast message.
+      {{ include.text | default: 'Hello, world! This is a toast message.' }}
    </div>
 </div>
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index d4325087f1b0a9f9cfd56a6340165fbe947e794a..185e53d3c8a1bd21868fd9521fd8e7e941f91351 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end
diff --git a/scss/ui/_toasts.scss b/scss/ui/_toasts.scss
index 80e5271a71786aa7da50b70f55a9dcb8fc4ccd60..cf264fd4e6d4f5a96396bbdaf490a7bc5aed560a 100644
--- a/scss/ui/_toasts.scss
+++ b/scss/ui/_toasts.scss
@@ -1,3 +1,6 @@
 .toast-header {
   user-select: none;
 }
+.toast button[data-dismiss="toast"]{
+  outline: none;
+}