BootstrapHow-ToBeginner · 3 min read

How to Create Alert in Bootstrap: Simple Guide

To create an alert in Bootstrap, use a div with the class alert and a contextual class like alert-primary. This shows a styled message box that can include text and optional close buttons.

📐

Syntax

Use a div element with the base class alert plus a color class like alert-success for green or alert-danger for red. Optionally, add role="alert" for accessibility.

div.alert: Base alert style
alert-*: Color and context (primary, success, danger, etc.)
role="alert": Helps screen readers announce the alert

html

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

Output

A blue box with the text: "This is a primary alert—check it out!"

💻

Example

This example shows a simple Bootstrap alert with a close button. The alert is styled in green to indicate success.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Alert Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> Your action was completed.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A green alert box with bold text 'Success!' and a close button on the right that removes the alert when clicked.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap alerts include:

Forgetting to include the alert base class, which breaks styling.
Not adding a contextual class like alert-danger, so the alert looks plain.
Missing the role="alert" attribute, which reduces accessibility.
Not including Bootstrap's JavaScript when using dismissible alerts, so the close button won't work.

html

<!-- Wrong: Missing alert class -->
<div class="alert-success" role="alert">
  This will not be styled correctly.
</div>

<!-- Right: Include both classes -->
<div class="alert alert-success" role="alert">
  This is styled correctly.
</div>

Output

The first box shows plain text with no styling; the second box is green with alert styling.

📊

Quick Reference

Class	Description
alert	Base class for all alerts
alert-primary	Blue alert for primary messages
alert-success	Green alert for success messages
alert-danger	Red alert for error messages
alert-warning	Yellow alert for warnings
alert-info	Light blue alert for informational messages
alert-dismissible	Makes alert closable with a button
btn-close	Close button style for dismissible alerts

✅

Key Takeaways

Always use div with alert and a contextual class like alert-success for proper styling.

Add role="alert" for better accessibility.

Include Bootstrap's JavaScript bundle to enable dismissible alerts with close buttons.

Use alert-dismissible and btn-close classes to create alerts that users can close.

Check that you link Bootstrap CSS and JS files correctly for alerts to work and look right.