{"flag":true,"single":true,"pageTitle":"Toast alert in bootstrap 5","post":{"id":256,"user_id":"1","slug":"toast-alert-in-bootstrap-5-phwu","title":"Toast alert in bootstrap 5","body":"<p><strong>You need to load bootstrap 5, and jquery first<\/strong><\/p>\r\n<p><strong>HTML:<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;!--------------- Toaster for alerts---------------&gt;\r\n        &lt;div class=\"toast-container position-fixed top-0 start-50 p-3\"&gt;\r\n          &lt;div class=\"toast align-items-center text-bg-primary \" id=\"liveToast\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"1000\"&gt;\r\n              &lt;div class=\"d-flex\"&gt;\r\n                &lt;div class=\"toast-body\" id=\"tost_body_text_sr787\"&gt;\r\n                  \r\n                &lt;\/div&gt;\r\n                &lt;button type=\"button\" class=\"btn-close me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"&gt;&lt;\/button&gt;\r\n              &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;<\/code><\/pre>\r\n<p>JS:<\/p>\r\n<pre class=\"language-markup\"><code>function showAlert(text){\r\n    $(\"#tost_body_text_sr787\").text(text);\r\n    const toast = new bootstrap.Toast(document.getElementById(\"liveToast\"))\r\n    toast.show()\r\n    \r\n}<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>USAGE:<\/p>\r\n<pre class=\"language-markup\"><code>showAlert(\"Hello, world! This is a toast message.22\");<\/code><\/pre>","category_id":"6","is_private":"0","created_at":"2024-09-26T10:38:12.000000Z","updated_at":"2024-09-26T10:38:12.000000Z","category":{"id":6,"user_id":"1","name":"Bootstrap","slug":"bootstrap-lyjs","parent_id":null,"created_at":"2023-03-16T22:42:39.000000Z","updated_at":"2023-03-16T22:42:39.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"You need to load bootstrap 5, and jquery first HTML: &lt;!--------------- Toaster for alerts---------------&gt;         &lt;div class=\"toast - Toast alert in bootstrap 5 (Updated: September 26, 2024) - Read more about Toast alert in bootstrap 5 at my programming site [SITE]","categories":[]}