Bootstrap 5 Toast notification with sound - Toasty snippet

Alerts Bootstrap 5Free+ CSS+ JS

Free Bootstrap 5 alert snippet — Bootstrap 5 Toast notification with sound - Toasty snippet. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.

2.7k views55 downloads5 years ago

gosnippets.com/preview/bootstrap-5-toast-notification-with-sound---toasty-snippet

Source Code

1<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.css" rel="stylesheet" />
2<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.js"></script>
3<div class="page-content page-container" id="page-content">
4    <div class="padding">
5      <div class="row container d-flex justify-content-center"> 
6        <button type="button" id="successtoast" class="btn btn-success btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification success</button> 
7        <button type="button" id="infotoast" class="btn btn-info btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info</button> 
8        <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning</button> 
9        <button type="button" id="errortoast" class="btn btn-primary btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error</button> 
10      </div>
11    </div>
12</div>

More Alerts snippets

Bootstrap 5 Notification Page Design snippets example

Add a alert to your UI with Bootstrap 5 Notification Page Design snippets example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

AlertsView →

Bootstrap 5 Notification UI Design snippets with navbar

Bootstrap 5 Notification UI Design snippets with navbar — a free Bootstrap 5 alert snippet.

AlertsView →

Custom Toast notification with Progress Bar

Add a alert to your UI with Custom Toast notification with Progress Bar. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.

AlertsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.css" rel="stylesheet" /> 2<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.js"></script> 3<div class="page-content page-container" id="page-content"> 4 <div class="padding"> 5 <div class="row container d-flex justify-content-center"> 6 <button type="button" id="successtoast" class="btn btn-success btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification success</button> 7 <button type="button" id="infotoast" class="btn btn-info btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info</button> 8 <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning</button> 9 <button type="button" id="errortoast" class="btn btn-primary btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error</button> 10 </div> 11 </div> 12</div>