Bootstrap Alerts

An alert is a message box that provides feedback or important information to the user.

<div class="alert alert-primary">
This is a primary alert.
</div>

Alerts are commonly used after form submissions, login attempts, payments, registrations, and other actions.

The .alert class provides the basic Bootstrap alert styling. It is normally combined with a contextual alert class.

<div class="alert alert-success">
Operation completed successfully.
</div>

The second class determines the color and meaning of the alert.

The .alert-primary class creates a primary-colored alert.

<div class="alert alert-primary">
This is a primary message.
</div>

Primary alerts can be used for general information.

The .alert-success class is used for successful operations.

<div class="alert alert-success">
Your registration was successful!
</div>

Success alerts are useful after operations such as saving, registering, updating, or completing a task.

The .alert-danger class is used for errors or dangerous situations.

<div class="alert alert-danger">
Something went wrong!
</div>

It can be used for failed operations, invalid data, or important errors.

The .alert-warning class displays a warning message.

<div class="alert alert-warning">
Please check your information.
</div>

Warning alerts are useful when users need to pay attention before continuing.

The .alert-info class displays an informational message.

<div class="alert alert-info">
Your class will start at 9:00 AM.
</div>

The .alert-light class creates a light alert.

<div class="alert alert-light">
This is a light alert.
</div>

A border can make a light alert easier to distinguish from a light page background.

The .alert-dark class creates a dark alert.

<div class="alert alert-dark">
This is a dark alert.
</div>

Bootstrap provides several contextual alert classes.

<div class="alert alert-primary">Primary</div>
<div class="alert alert-secondary">Secondary</div>
<div class="alert alert-success">Success</div>
<div class="alert alert-danger">Danger</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-info">Info</div>
<div class="alert alert-light">Light</div>
<div class="alert alert-dark">Dark</div>

You can add a heading inside an alert using a heading element and the .alert-heading class.

<div class="alert alert-success">

    <h4 class="alert-heading">
    Well done!
    </h4>

    Your account has been created successfully.

</div>

An alert can contain multiple paragraphs of information.

<div class="alert alert-info">

    <h4 class="alert-heading">
    Important Information
    </h4>

    <p>
    Your course will start next Monday.
    </p>

    <p class="mb-0">
    Please arrive ten minutes early.
    </p>

</div>

Links can be placed inside alerts. Bootstrap provides the .alert-link class for styling links to match the alert.

<div class="alert alert-primary">

Please read our
<a href="#" class="alert-link">
documentation
</a>.

</div>

Success alerts are commonly displayed after a successful operation.

<div class="alert alert-success">
Student added successfully!
</div>

This is especially useful in admin panels and management systems.

Danger alerts can be used when an operation fails.

<div class="alert alert-danger">
Unable to save the student record.
</div>

Warning alerts tell users that they should pay attention.

<div class="alert alert-warning">
Your fee payment is due soon.
</div>

Information alerts can provide general instructions or updates.

<div class="alert alert-info">
The website will be updated tonight.
</div>

Bootstrap allows users to close an alert by using the .alert-dismissible class together with a close button.

<div class="alert alert-warning alert-dismissible fade show"
role="alert">

    Please update your profile.

    <button type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close">
    </button>

</div>

The .alert-dismissible class adds extra padding to an alert to make space for the close button.

<div class="alert alert-danger alert-dismissible">

    Error occurred!

    <button type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close">
    </button>

</div>

For the close button to dismiss the alert using Bootstrap's JavaScript behavior, use data-bs-dismiss="alert".

The .fade and .show classes can be used with dismissible alerts to provide a transition effect.

<div class="alert alert-success alert-dismissible fade show"
role="alert">

    Saved successfully!

    <button type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close">
    </button>

</div>

You can add an icon or symbol to an alert to make its purpose easier to recognize.

<div class="alert alert-success">
✓ Payment completed successfully!
</div>

<div class="alert alert-danger">
✕ Payment failed.
</div>

Icons should support the message rather than replacing meaningful text.

Alerts can display general form validation messages.

<div class="alert alert-danger">
Please fill in all required fields.
</div>

For individual fields, Bootstrap also provides form validation styles that can be used alongside appropriate messages.

Login systems commonly use alerts to display authentication feedback.

<div class="alert alert-success">
Login successful!
</div>

<div class="alert alert-danger">
Invalid username or password.
</div>

Payment systems can use different alerts to communicate payment status.

<div class="alert alert-success">
Payment completed successfully.
</div>

<div class="alert alert-warning">
Payment is pending.
</div>

<div class="alert alert-danger">
Payment failed.
</div>

Alerts are very useful in admin dashboards for displaying system messages.

<div class="alert alert-success">
Student added successfully.
</div>

<div class="alert alert-warning">
5 students have pending fees.
</div>

<div class="alert alert-danger">
Database connection failed.
</div>

Alerts should be designed so that their information is understandable and accessible.

• Use clear and meaningful messages.
• Do not rely only on color to communicate meaning.
• Use sufficient color contrast.
• Use role="alert" when appropriate for important dynamic messages.
• Provide useful text for screen-reader users.
• Do not make important information disappear too quickly.

Some common mistakes include:

• Using alerts for every small piece of information.
• Writing very long alert messages.
• Using color without meaningful text.
• Forgetting the .alert class.
• Using the wrong alert type for the message.
• Making important alerts too difficult to notice.

An alert should be short, clear, and relevant to the user's current action.

Common Bootstrap alert classes:

.alert
.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark
.alert-heading
.alert-link
.alert-dismissible

These classes can be combined according to the type of message you want to display.

Here is a practical example of alerts in a student management system.

<div class="alert alert-success">
Student added successfully!
</div>

<div class="alert alert-warning">
Student has pending fees.
</div>

<div class="alert alert-danger">
Unable to delete student.
</div>

<div class="alert alert-info">
Student attendance was updated.
</div>

The following example combines headings, links, messages, and a dismissible alert.

<div class="container mt-4">

    <div class="alert alert-success">

        <h4 class="alert-heading">
        Success!
        </h4>

        <p>
        Your registration has been completed successfully.
        </p>

        <hr>

        <p class="mb-0">
        You can now
        <a href="#" class="alert-link">
        login to your account
        </a>.
        </p>

    </div>


    <div class="alert alert-warning alert-dismissible fade show"
    role="alert">

        Your profile is incomplete.

        <button type="button"
        class="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close">
        </button>

    </div>

</div>