Search by Queries/Bugs/Errors

Bootstrap toast notification example code

Bootstrap toasts are used to show lightweight and customizable alert notifications. Here is the example code to display toast notifications. You can display the toast notification message with $('#element').toast('show');.

Answers 1

Bootstrap 4.3.1 toasts example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap toast notification</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
	
    <div class="toast" id="element" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  
    <script>
        $(document).ready(function(){
            $('#element').toast('show');
        })
    </script>
</body>
</html>

You can display the toast notifications using bootstrap version 4.3.1. You can show toast notification with $('#element').toast('show'); on different events like click, document ready, on change and others.

Back to code snippet queries related bootstrap

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress

Bootstrap toast notification example code

Bootstrap 4.3.1 toasts example code