Levels

Areas

Sections

/

Alerts

Default

PrimarySecondarySuccessDangerWarningInfoDark
UIMAlert(["alert-primary"], "Primary")
UIMAlert(["alert-secondary"], "Secondary")
UIMAlert(["alert-success"], "Success")
UIMAlert(["alert-danger"], "Danger")
UIMAlert(["alert-warning"], "Warning")
UIMAlert(["alert-info"], "Info")
UIMAlert(["alert-dark"], "Dark")
</code></pre><p class="text-muted">Alternative</p><pre><code>
UIMAlert("Primary").color("primary")
UIMAlert("Secondary").color("secondary")
UIMAlert("Success").color("success")
UIMAlert("Danger").color("danger")
UIMAlert("Warning").color("warning")
UIMAlert("Info").color("info")
UIMAlert("Dark").color("dark")
<div class="alert alert-primary" role="alert">Primary</div>
<div class="alert alert-secondary" role="alert">Secondary</div>
<div class="alert alert-success" role="alert">Success</div>
<div class="alert alert-danger" role="alert">Danger</div>
<div class="alert alert-warning" role="alert">Warning</div>
<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-dark" role="alert">Dark</div>

Link Farbe

Zusätzliche Inhalte

Success!

You have accomplished your goal.

You can now continue and start defining a new goal to reach.

Danger!

Something is wrong. Please try again.

Make sure that you enter the correct user name and corresponding password.

Warning!

Be careful when you drive.

Driving is a serious task and should thus be taken seriously.

Info!

Please read the provided information.

The information will help you get a better understanding of the topic.

<div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Success!</h4>
      <p>You have accomplished H5A(["href":"#",  class="alert-link">your goal</a>.</p>
      <p>You can now continue and start defining a new goal to reach.</p>
    </div>
    <div class="alert alert-danger" role="alert">
      <h4 class="alert-heading">Danger!</h4>
      <p>Something is wrong. H5A(["href":"#",  class="alert-link">Please try again.</a></p>
      <p>Make sure that you enter the correct user name and corresponding password.</p>
    </div>
    <div class="alert alert-warning" role="alert">
      <h4 class="alert-heading">Warning!</h4>
      <p>Be careful when you H5A(["href":"#",  class="alert-link">drive.</a></p>
      <p>Driving is a serious task and should thus be taken seriously.</p>
    </div>
    <div class="alert alert-info" role="alert">
      <h4 class="alert-heading">Info!</h4>
      <p>Please read the provided H5A(["href":"#",  class="alert-link">information.</a></p>
      <p>The information will help you get a better understanding of the topic.</p>
</div>
UIMAlert.color("success")(
    H5H4(["alert-heading"], "Success!"),
    H5P("You have accomplished <a href=\"#\" class=\"alert-link\">your goal</a>."),
    H5P("You can now continue and start defining a new goal to reach.")),
  UIMAlert.color("danger")(
    H5H4(["alert-heading"], "Danger!"),
    H5P("Something is wrong. <a href=\"#\" class=\"alert-link\">Please try again.</a>"),
    H5P("Make sure that you enter the correct user name and corresponding password."),
    ),
  UIMAlert.color("warning")(
    H5H4(["alert-heading"], "Warning!"),
    H5P("Be careful when you <a href=\"#\" class=\"alert-link\">drive.</a>"),
    H5P("Driving is a serious task and should thus be taken seriously.")),
  UIMAlert.color("info")(
    H5H4(["alert-heading"], "Info!"),
    H5P("Please read the provided <a href=\"#\" class=\"alert-link\">information.</a>"),
    H5P("The information will help you get a better understanding of the topic.")
)

Entfernbar

Achtung! Dieser Alert verschwindet, wenn der × Button getätigt wird.
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">")
  <strong>Achtung!</strong> Dieser Alert verschwindet, wenn der &times; Button getätigt wird.
</div>
UIMAlert(["alert-success", "alert-dismissible", "fade", "show"], 
  UIMButton(["btn-close"], ["data-bs-dismiss":"alert", "aria-label":"Close"]),
  H5Strong("Achtung!"), H5String(" Dieser Alert verschwindet, wenn der &times; Button getätigt wird.")
)