diff --git a/js/src/toast.js b/js/src/toast.js
index 9cbfb1f8c78d..cb6de974b5cc 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -132,6 +132,12 @@ const Toast = (($) => {
 
     dispose() {
       clearTimeout(this._timeout)
+      this._timeout = null
+
+      if (this._element.classList.contains(ClassName.SHOW)) {
+        this._element.classList.remove(ClassName.SHOW)
+      }
+
       $.removeData(this._element, DATA_KEY)
       this._element = null
       this._config  = null
diff --git a/js/tests/unit/toast.js b/js/tests/unit/toast.js
index 7c4ba35fd010..873661c76f63 100644
--- a/js/tests/unit/toast.js
+++ b/js/tests/unit/toast.js
@@ -153,6 +153,37 @@ $(function () {
     assert.ok(typeof $toast.data('bs.toast') === 'undefined')
   })
 
+  QUnit.test('should allow to destroy toast and hide it before that', function (assert) {
+    assert.expect(4)
+    var done = assert.async()
+
+    var toastHtml =
+      '<div class="toast" data-delay="0" data-autohide="false">' +
+        '<div class="toast-body">' +
+          'a simple toast' +
+        '</div>' +
+      '</div>'
+
+    var $toast = $(toastHtml)
+      .bootstrapToast()
+      .appendTo($('#qunit-fixture'))
+
+    $toast.one('shown.bs.toast', function () {
+      setTimeout(function () {
+        assert.ok($toast.hasClass('show'))
+        assert.ok(typeof $toast.data('bs.toast') !== 'undefined')
+
+        $toast.bootstrapToast('dispose')
+
+        assert.ok(typeof $toast.data('bs.toast') === 'undefined')
+        assert.ok($toast.hasClass('show') === false)
+
+        done()
+      }, 1)
+    })
+      .bootstrapToast('show')
+  })
+
   QUnit.test('should allow to pass delay object in html', function (assert) {
     assert.expect(1)
     var done = assert.async()