How To Create an Alert Message Box using CSS?

Last Updated : 09 Oct, 2024

An alert message box using CSS is a styled container that displays important messages or notifications to users. It is often used for warnings, errors, or success messages, and typically includes styles like background colors, borders, and icons to attract attention.

Approach

Basic Structure: Use divs with classes to create different types of alert message boxes.
Styling Alerts: Define .alert class for common styles like padding, border-radius, and font size.
Custom Classes: Use classes like .success, .error, and .warning for specific background, border, and text colors.
Display Messages: Each alert box displays a message tailored to its type (e.g., success, warning, error).
Responsive Design: Using relative units and scalable font sizes ensures alerts adapt to different screens.

Example: Here we are following the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Alert Message Boxes</title>
    <style>
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
        }

        .success {
            color: #155724;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .warning {
            color: #856404;
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
        }

        .error {
            color: #721c24;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
        }

        .info {
            color: #0c5460;
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
        }

        .primary {
            color: #004085;
            background-color: #cce5ff;
            border: 1px solid #b8daff;
        }

        .secondary {
            color: #383d41;
            background-color: #e2e3e5;
            border: 1px solid #d6d8db;
        }

        .dark {
            color: #fff;
            background-color: #343a40;
            border: 1px solid #6c757d;
        }
    </style>
</head>

<body>

    <div class="alert success">
        Success: Your changes have been saved.
    </div>

    <div class="alert warning">
        Warning: This action cannot be undone.
    </div>

    <div class="alert error">
        Error: Please enter a valid email address.
    </div>

    <div class="alert info">
        Info: Your account has been updated.
    </div>

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

    <div class="alert secondary">
        Secondary: This is a secondary alert.
    </div>

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

</body>

</html>

Output:

How to use Categories & Tags in WordPress?

bishalmanhoze

Improve

Article Tags :

How To Create an Alert Message Box using CSS?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?