Тост сообщение не открывается

Question

, поэтому у меня возникает проблема всякий раз, когда я нажимаю на кнопку, которая должна открывать тост начальной загрузки, она не работает, и если я указываю show в классе тостов, чтобы показать ее, не нажимая на кнопку, кнопка закрытия не работаетработа и тост не закрываются;вот код:

HTML

<button id="button1" class="btn btn-info">Click me!</button>

<div id="alert" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JAVASCRIPT

$(document).ready(function(){

    $('#button1').click(function() {
        $('#alert').show('fade');
    });
});

Answer 1

Просто измените код JavaScript. изменить эту строку кода $('#alert').show('fade'); на $('.toast').toast('show');

$(document).ready(function(){
  $("#button1").click(function(){
    $('.toast').toast('show');
  });
});

рабочая ссылка jsfiddle Подсказка начальной загрузки