Alerts

Provide contextual feedback messages for typical user actions. An example with a close button has been provided.

View the official docs here

Examples

Alert with dismiss

Astro file 
---
import { Alert } from 'astro-bootstrap';
---

<Alert variant="danger" dismissable>Alert Text</Alert>

Alert with heading

Astro file 
---
import { Alert } from 'astro-bootstrap';
---

<Alert variant="success">
  <Alert.Heading>Well done!</Alert.Heading>
  <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>
</Alert>
Astro file 
---
import { Alert } from 'astro-bootstrap';
---

<Alert variant="primary" dismissable>
  A simple primary alert with <Alert.Link href="http://google.com">an example link</Alert.Link>. Give it a click if you like.
</Alert>

No components

Astro file 
---
// Template only
---

<div class="alert alert-danger alert-dismissible mb-0" role="alert">
  <div>Hard coded alert message</div>
  <button
    type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close"></button>
</div>
<script>
  import 'bootstrap/js/dist/alert';
</script>

Api

Alert

 
import { Alert } from 'astro-bootstrap'
NameTypeDefaultDescription
variant required string Bootstrap color variant
class string Append class
dissmissable boolean Creates a dismiss button

Alert.Heading