Effortlessly manage notifications with elegant, self-dismissing toasts featuring orbit animations and progress bars, layered for a premium interactiveness.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-grid-overlay" aria-hidden="true"></div>
6 <div class="gs-card">
7 <div class="gs-card-inner d-flex flex-column align-items-start">
8 <div class="toast bg-light toast-show position-relative">
9 <div class="toast-header">
10 <div class="me-2">
11 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
12 <circle></circle>
13 <line></line>
14 <line></line>
15 </svg>
16 </div>
17 <strong class="me-auto">New Notification</strong>
18 <small class="text-muted">Just now</small>
19 </div>
20 <div class="toast-body">
21 You have unread messages from Jane Doe, check them now!
22 </div>
23 <div class="progress">
24 <div class="progress-bar" role="progressbar" style="width:100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
25 </div>
26 </div>
27 </div>
28 </div>
29</section>
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.
Bootstrap 5 Notification UI Design snippets with navbar
Bootstrap 5 Notification UI Design snippets with navbar — a free Bootstrap 5 alert snippet.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
47
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.