# Alerts

### Default Alert

{% tabs %}
{% tab title="Default Alert" %}
![](/files/-LodPgjCPwFZdOYzoPog)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
</div>

<!-- 
Above is an example of primary alert. You can use the
BootStrap classes .alert-secondary, .alert-success,
.alert-danger, .alert-warning, .alert-info, .alert-light
and .alert-dark to generate the type of default alert
you want.
-->
```

{% endtab %}
{% endtabs %}

### Alert With Link

{% tabs %}
{% tab title="Alert with Link" %}
![](/files/-LodnjdB1QQjYSEW1ozc)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="javascript:void(0)" class="alert-link">an
    example link</a>. Give it a click if you like.
</div>
```

{% endtab %}
{% endtabs %}

### Additional Content Alert

{% tabs %}
{% tab title="Additional Content Alerts" %}
![](/files/-Lodo3fwLtPsEOfyGMtC)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">Well done!</h4>
	<p>
		Aww yeah, you successfully read this important
	    alert message. This example text is going to run
	    a bit longer so that you can see how spacing
	    within an alert works with this kind of content.
	</p>
	<hr>
	<p class="mb-0">
		Whenever you need to, be sure to use margin utilities to keep
		things nice and	tidy.
	</p>
</div>
```

{% endtab %}
{% endtabs %}

### Dismissing Alert

{% tabs %}
{% tab title="Dismissing Alerts" %}
![](/files/-LodpdNvp9dttVOENGKn)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields
	below.
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/alerts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.