-
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
Alerts
Bootstrap Alerts are a critical component for displaying important feedback messages to users in a web interface. They are designed to capture user attention for a variety of purposes, such as success messages, warnings, or informational notes. This module dives deep into the different classes and practical applications of Bootstrap Alerts.
Objectives
– Gain an in-depth understanding of Bootstrap Alert classes.
– Learn to effectively implement and customize alerts for various purposes.
Overview of Alert Classes
Bootstrap provides several predefined classes for alerts, each corresponding to a different type of message. These classes allow for a range of visual styles that can be matched to the message’s context.
- .alert-primary: Used for general informational messages.
- .alert-secondary: Suitable for messages that aren’t urgent but still need attention.
- .alert-success: Indicates a successful or positive action.
- .alert-danger: Alerts users to a dangerous or potentially negative action.
- .alert-warning: Indicates a warning that might need attention.
- .alert-info: Used for informational messages.
- .alert-light: For messages that need a subtle appearance.
- .alert-dark: For messages with a strong, prominent appearance.
Example Code:
Customizing Alerts
While the default styles are useful, customization can help alerts blend better with your site’s design. You can use custom CSS to modify the appearance of alerts.
Detailed Customization Example:
Interactive Alerts with JavaScript
Enhance alerts with JavaScript for dynamic interaction, like automatic dismissal or triggering based on user actions.
JavaScript Interaction Example:
// Auto-dismiss an alert after 5 seconds
window.setTimeout(function() {
$(“.alert”).fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
