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 :
A Bootstrap Toast is a lightweight, customizable notification pop-up that displays temporary messages or alerts to users.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
You can customize a Toast’s appearance using Bootstrap’s classes or custom CSS to modify colors, layout, and animation.
Yes, we offer Bootstrap Toast tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Yes, Bootstrap Toasts are inherently responsive, but you can enhance their layout with additional Bootstrap utility classes.
Examples include:
- Success or error messages.
- Live updates.
- Persistent notifications.
To implement Toasts, include the Bootstrap library, use the .toast class, and configure the necessary JavaScript to trigger events.
Yes, use Bootstrap’s animation classes like .fade or custom CSS for smooth animations when showing or hiding a Toast.
Bootstrap Toasts can be triggered by JavaScript events such as button clicks, form submissions, or custom scripts.
By default, Bootstrap Toasts include ARIA roles and attributes for accessibility, but you should verify with screen readers for full compliance.
