-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Toast
Bootstrap Toasts provide a lightweight, flexible component for displaying brief, non-intrusive notifications to the user. They are similar to native mobile toasts and can be used to show information or feedback about an action, typically at the top or bottom of the screen.
Implementing a Basic Toast
<div class=”toast” role=”alert” aria-live=”assertive” aria-atomic=”true”>
<div class=”toast-header”>
<strong class=”mr-auto”>Toast Title</strong>
<small>11 mins ago</small>
<button type=”button” class=”ml-2 mb-1 close” data-dismiss=”toast” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”toast-body”>
Hello, world! This is a toast message.
</div>
</div>
<script>
$(‘.toast’).toast(‘show’);
</script>
Explanation:
– The `.toast` class indicates the main toast container.
– `.toast-header` and `.toast-body` are used to structure the content of the toast.
– The toast is initially hidden and is made visible programmatically with jQuery: `$(‘.toast’).toast(‘show’)`.
Customizing Toasts
Example: Autohide and Delay Options
<div class=”toast” role=”alert” aria-live=”assertive” aria-atomic=”true” data-autohide=”false”>
<div class=”toast-header”>
<strong class=”mr-auto”>Another Toast</strong>
<small>Just now</small>
<button type=”button” class=”ml-2 mb-1 close” data-dismiss=”toast” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”toast-body”>
This toast won’t autohide. Close it manually.
</div>
</div>
<script>
$(‘.toast’).toast({ delay: 2000 }).toast(‘show’); // Show for 2 seconds
</script>
Explanation:
– The `data-autohide=”false”` attribute disables the automatic hiding of the toast, requiring the user to close it manually.
– The `delay` option in the jQuery toast method sets the duration the toast will remain visible.
Advanced Toast Placement
Example: Toasts Container for Custom Positioning
<div aria-live=”polite” aria-atomic=”true” style=”position: relative; min-height: 200px;”>
<!– Toasts Container –>
<div style=”position: absolute; top: 0; right: 0;”>
<!– Toasts go here –>
</div>
</div>
Explanation:
– A container div is used to define the area where toasts will appear.
– The inner div with `position: absolute;` is positioned according to the container’s relative position, allowing custom placement of toasts on the screen.
YouTube Reference :
