Bootstrap Alerts

14 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Eye-Catching Alerts

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Alert classes to create colorful, dismissible messages. Alerts are perfect for notifications, warnings, or success messages, and we’ll add images to make them pop.

What You’ll Learn

Creating basic alerts
Using different alert colors
Adding dismissible alerts
Combining alerts with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Alerts

Bootstrap Alerts use classes like alert, alert-success, and alert-dismissible to style messages. They’re great for drawing attention to important info and can include buttons or images.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Alert

Start with a simple success alert. Use this code:

<div class="container">
    <div class="alert alert-success">
        <strong>Success!</strong> Your action was completed.
    </div>
</div>

Explanation:

container: Centers and constrains content.
alert: Applies base alert styling (padding, border).
alert-success: Uses a green background for positive feedback.
strong: Emphasizes the alert’s key message.

This creates a clean, green notification.

Step 3: Use Different Alert Colors

Bootstrap offers multiple alert colors for various contexts. Try this:

<div class="container">
    <div class="alert alert-warning mb-3">
        <strong>Warning!</strong> Check your settings before proceeding.
    </div>
    <div class="alert alert-danger">
        <strong>Error!</strong> Something went wrong. Try again.
    </div>
</div>

Explanation:

alert-warning: Yellow background for cautions.
alert-danger: Red background for errors.
mb-3: Adds margin-bottom to separate alerts.

These colorful alerts highlight different message types.

Step 4: Add a Dismissible Alert

Make an alert closable with a dismiss button. Use this:

<div class="container">
    <div class="alert alert-info alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>Info:</strong> New updates are available!
    </div>
</div>

Explanation:

alert-info: Blue background for informational messages.
alert-dismissible: Prepares the alert for closing.
btn-close: Adds a close button (assumes Bootstrap JS handles dismissal).

Clicking the “X” hides the alert.

Step 5: Combine Alerts with an Image

Enhance an alert with a dummy image for visual impact. Try this:

<div class="container">
    <div class="alert alert-success">
        <div class="row">
            <div class="col-10">
                <strong>Great Job!</strong> Your profile is now live.
                <a href="#" class="alert-link">View it here</a>.
            </div>
            <div class="col-2">
                <img src="https://placehold.co/100x100/28a745/ffffff" class="img-fluid rounded-circle" alt="Green placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

row and col-10, col-2: Splits alert into text (10 units) and image (2 units).
alert-link: Styles the link to match the alert’s color.
Uses a 100×100 green circular image for a lively touch.

The image makes the alert more engaging.

Final Code

Here’s a combined example with varied alerts:

<div class="container">
    <div class="alert alert-primary mb-3">
        <strong>Hello!</strong> Welcome to our platform.
    </div>
    <div class="alert alert-warning alert-dismissible mb-3">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>Heads Up!</strong> Update your info soon.
    </div>
    <div class="alert alert-success">
        <div class="row">
            <div class="col-9">
                <strong>Success!</strong> Your order is confirmed.
                <a href="#" class="alert-link">Track it now</a>.
            </div>
            <div class="col-3">
                <img src="https://placehold.co/120x120/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
            </div>
        </div>
    </div>
</div>

Output

Your webpage should show:

A blue primary alert with a welcome message.
A yellow dismissible warning alert with a close button.
A green success alert with a red image (120×120) and a styled link.
All alerts are responsive, stacking neatly on mobile, with colorful images for better visual appeal.

Next Steps

Visit the Bootstrap Alerts Docs for more options.
Try alert-dark or alert-light for new styles.
Add alerts inside Bootstrap cards for richer layouts.

Conclusion

You’ve mastered Bootstrap Alerts! With classes like alert-success and alert-dismissible, plus vibrant images, you’ve created dynamic notifications. Keep experimenting to enhance your webpages.