• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Alerts

← Previous Next →

What are Bootstrap 4 Alerts?

Bootstrap 4 Alerts are components used to display feedback messages, notifications, or warnings to users. Alerts are visually distinct sections that grab attention and clearly communicate information. They are commonly used for success messages, error notifications, warnings, or informational tips.

Bootstrap 4 provides predefined classes, making it easy to create alerts without writing custom CSS. Alerts are responsive and can adapt to different screen sizes, ensuring a consistent experience on both desktop and mobile devices.

Basic Alert Structure

The simplest alert uses the .alert class along with contextual classes:

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

<div class="alert alert-success" role="alert">
  Success! Your action has been completed.
</div>

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

<div class="alert alert-warning" role="alert">
  Warning! Please check your input.
</div>

<div class="alert alert-info" role="alert">
  Info! Here’s some important information.
</div>

  • .alert is the base class for all alerts.

  • .alert-primary, .alert-success, .alert-danger, .alert-warning, .alert-info provide contextual meaning.

  • role="alert" ensures screen readers announce the message, improving accessibility.

  • Alerts are block-level elements that span the full width of their container by default.

Dismissible Alerts

Bootstrap 4 allows alerts to be dismissible, enabling users to close them:

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Your changes have been saved successfully!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

  • .alert-dismissible makes the alert closable.

  • .fade and .show provide smooth animation when the alert appears and disappears.

  • <button> with .close lets users dismiss the alert.

  • data-dismiss="alert" triggers the Bootstrap JavaScript function to hide the alert.

Alerts with Links

Links inside alerts guide users to additional information:

<div class="alert alert-info" role="alert">
  For more details, visit our <a href="#" class="alert-link">documentation page</a>.
</div>

  • .alert-link styles links to match the alert’s context.

  • Ideal for help pages, tutorials, or related actions.

Alerts with Additional Formatting

Enhance alerts with bold text, lists, and multiple paragraphs:

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Attention!</h4>
  <p>Please review the following points:</p>
  <ul>
    <li>Check your input fields.</li>
    <li>Ensure all required data is provided.</li>
    <li>Confirm submission before proceeding.</li>
  </ul>
</div>

  • .alert-heading highlights important headings inside alerts.

  • Lists improve clarity and readability.

  • Multi-paragraph alerts communicate complex messages clearly.

Alerts with Icons

Adding icons improves visual recognition:

<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="fas fa-check-circle mr-2"></i>
  Success! Your profile has been updated.
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert">
  <i class="fas fa-exclamation-triangle mr-2"></i>
  Error! Please fill out all required fields.
</div>

  • .d-flex and .align-items-center align icons and text vertically.

  • Icons help users quickly identify the type of message.

  • Use Font Awesome or Bootstrap Icons for consistent design integration.

Alerts in Cards and Modals

Alerts can be embedded inside other Bootstrap components:

<div class="card mb-4">
  <div class="card-body">
    <div class="alert alert-info" role="alert">
      Note: This card contains important information for users.
    </div>
  </div>
</div>

  • Cards can display contextual alerts related to content.

  • Alerts can also be used inside modals to provide warnings or feedback.

  • Useful for dashboards, forms, or interactive pages.

Stacked Alerts

Multiple alerts can be stacked vertically:

<div class="alert alert-primary" role="alert">Primary alert.</div>
<div class="alert alert-success" role="alert">Success alert.</div>
<div class="alert alert-warning" role="alert">Warning alert.</div>

  • Add spacing using .mb-2 or .mb-3 to separate alerts visually.

  • Stacked alerts are ideal for dashboards or notification panels.

Best Practices for Bootstrap 4 Alerts

  1. Use contextual classes to match message type.

  2. Keep alerts concise and clear.

  3. Use dismissible alerts for temporary notifications.

  4. Include links or buttons when users may need guidance.

  5. Use icons for quick recognition.

  6. Stack multiple alerts with spacing for readability.

  7. Test alerts for responsiveness and accessibility.

  8. Highlight important text using .alert-heading or <strong> tags.

  9. Ensure color contrast meets accessibility standards.

Summary of the Tutorial

This expanded tutorial covered Bootstrap 4 Alerts, including basic alerts, contextual classes, dismissible alerts, links, lists, headings, icons, and embedding alerts in cards or modals. Proper use of alerts ensures clear communication, improved user experience, and visual consistency across your Bootstrap-based website.

Practice Questions

  1. Create a basic primary alert with the message “Welcome to the website!”

  2. Add a dismissible success alert with a close button.

  3. Create an alert with a link inside that points to a documentation page.

  4. Add a danger alert with bold text for critical warnings.

  5. Create a warning alert that includes a list of three important points.

  6. Include an info alert inside a card component.

  7. Add an icon to a success alert using Font Awesome.

  8. Create a stacked layout of three alerts: primary, success, and warning.

  9. Add a dismissible alert with a fade transition effect.

  10. Use .alert-heading in an alert to highlight a main heading within the message.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top