Bootstrap Toast Does Not Show Up


Answer :

You need to put the valid option. i:e show, hide or a callback function. See - https://getbootstrap.com/docs/4.2/components/toasts/.

$('.toast').toast('show');
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">   <div class="toast-header">     <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="...">     <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>

If you do not want to close the toast automatically, add data-autohide="false".

$('.toast').toast('show')
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false">   <div class="toast-header">     <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">                     <rect fill="#007aff" width="100%" height="100%" /></svg>     <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>


Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?