Alerts

Alerts can be used to provide feedback messages to users. Different types of alerts are available for different types of messages.

Bordered Alerts

The class names and syntax for the default buttons are as follows :

Default alert

This is a default alert with some content and a link.

Default alert

This is a default alert with some content and a link.

Default alert

This is a default alert with some content and a link.

Default alert

This is a default alert with some content and a link.

Default alert

This is a default alert with some content and a link.

Default alert

This is a default alert with some content and a link. 
    
<div class="alert alert-default">
    <h4 class="alert-heading">Default alert</h4>
    <p>This is a default alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-primary">
    <h4 class="alert-heading">Primary alert</h4>
    <p>This is a primary alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-secondary">
    <h4 class="alert-heading">Secondary alert</h4>
    <p>This is a secondary alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-success">
    <h4 class="alert-heading">Success alert</h4>
    <p>This is a success alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-warning">
    <h4 class="alert-heading">Warning alert</h4>
    <p>This is a warning alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-secondary">
    <h4 class="alert-heading">Danger alert</h4>
    <p>This is a danger alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

Filled Alerts

The class names for the filled alerts are as follows :

Primary filled alert

This is a default alert with some content and a link

Secondary filled alert

This is a default alert with some content and a link.

Success filled alert

This is a default alert with some content and a link.

Warning filled alert

This is a default alert with some content and a link

Danger filled alert

This is a default alert with some content and a link 
    
<div class="alert alert-primary-filled">
    <h4 class="alert-heading">Primary Filled alert</h4>
    <p>This is a primary alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-secondary-filled">
    <h4 class="alert-heading">Secondary alert</h4>
    <p>This is a secondary alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-success-filled">
    <h4 class="alert-heading">Success alert</h4>
    <p>This is a success alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-warning-filled">
    <h4 class="alert-heading">Warning alert</h4>
    <p>This is a warning alert with some content and <a href="#" class="link
    link-primary"</p>
</div>

<div class="alert alert-danger-filled">
    <h4 class="alert-heading">Danger alert</h4>
    <p>This is a danger alert with some content and <a href="#" class="link
    link-primary"</p>
</div>