Alert Types and Styles in Bootstrap

Bootstrap’s alert component provides a way to display important messages to users in a variety of styles and contexts. Alerts are often used for notifications, warnings, and other important messages.

1. Basic Alert

A basic alert is a simple message box that can be styled using Bootstrap’s predefined classes.

Class: .alert

Usage:

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

• .alert: The base class for all alerts.
• role="alert": Provides accessible information for screen readers.

2. Alert Types

Bootstrap provides several predefined alert types, each with its own background color and text color. These types help differentiate the nature of the message.

a. Primary Alert

Displays a blue background.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

• .alert-primary: Applies the primary color (blue) to the alert.

b. Secondary Alert

Displays a grey background.

<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>

• .alert-secondary: Applies the secondary color (grey) to the alert.

c. Success Alert

Displays a green background.

<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>

• .alert-success: Applies the success color (green) to the alert.

d. Danger Alert

Displays a red background.

<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

• .alert-danger: Applies the danger color (red) to the alert.

e. Warning Alert

Displays an orange background.

<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>

• .alert-warning: Applies the warning color (orange) to the alert.

f. Info Alert

Displays a light blue background.

<div class="alert alert-info" role="alert">
  This is an info alert—check it out!
</div>

• .alert-info: Applies the info color (light blue) to the alert.

g. Light Alert

Displays a light grey background.

<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>

• .alert-light: Applies the light color (light grey) to the alert.

h. Dark Alert

Displays a dark grey background.

<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

• .alert-dark: Applies the dark color (dark grey) to the alert.

3. Dismissing Alerts

Alerts can be dismissed by adding a close button, which allows users to remove the alert from view.

Class: .alert-dismissible, .close

Usage:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  This is a warning alert with a close button.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

• .alert-dismissible: Adds padding to the alert and positions the close button correctly.
• .btn-close: Styles the close button.
• data-bs-dismiss="alert": Makes the button functional to dismiss the alert.
• .fade: Adds a fading effect.
• .show: Shows the alert initially (used with .fade).

4. Alert Link Styles

You can style links within alerts using utility classes to match the alert's background color.

Usage:

<div class="alert alert-info" role="alert">
  This is an info alert with a <a href="#" class="alert-link">link</a>.
</div>

• .alert-link: Styles links to match the alert’s color scheme.

5. Custom Alerts

You can create custom alerts by applying additional styling or using Bootstrap’s utility classes.

Example:

<div class="alert alert-custom" style="background-color: #e0f7fa; color: #00796b;" role="alert">
  This is a custom-styled alert.
</div>

• .alert-custom: A custom class for additional styling.
• Inline Styles: Apply custom background and text colors.

Summary of Alert Types and Styles in Bootstrap

• Basic Alert: Use .alert as the base class.
• Alert Types: Predefined alert types include .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, and .alert-dark.
• Dismissing Alerts: Use .alert-dismissible and .btn-close to add a dismiss button.
• Alert Link Styles: Use .alert-link to style links within alerts.
• Custom Alerts: Apply additional styling with custom classes and inline styles.