<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

<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>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<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>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Info" width="20" height="20">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </svg>
  <div>An example alert with an icon</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Success" width="20" height="20">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </svg>
  <div>An example success alert with an icon</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Warning" width="20" height="20">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>An example warning alert with an icon</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Warning" width="20" height="20">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>An example danger alert with an icon</div>
</div>

<div class="alert alert-primary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-solid-primary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-success alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-info alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-warning alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-danger alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-dark alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-light alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-primary rounded-0 alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary rounded-0 alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success rounded-0 alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info rounded-0 alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning rounded-0 alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger rounded-0 alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark rounded-0 alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light rounded-0 alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-primary alert-rounded alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-rounded alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-rounded alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-rounded alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-rounded alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-rounded alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-rounded alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-rounded alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-primary alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-alt alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-alt alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-solid-primary alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-secondary alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-success alert-alt alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-info alert-alt alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-warning alert-alt alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-danger alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-dark alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-light alert-alt alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-solid-primary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm light badge-primary ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm light badge-secondary ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-success alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm light badge-success ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-info alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email. <span class="badge badge-sm light badge-info ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-warning alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check. <span class="badge badge-sm light badge-warning ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-danger alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm light badge-danger ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-dark alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm light badge-dark ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-light alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm light badge-light ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>


<div class="alert alert-primary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm badge text-bg-primary ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm text-bg-secondary ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show">
	<strong>Success!</strong> Message has been sent. <span class="badge badge-sm text-bg-success ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show">
	<strong>Info!</strong> You have got 5 new email. <span class="badge badge-sm text-bg-info ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
	<strong>Warning!</strong> Something went wrong. Please check. <span class="badge badge-sm text-bg-warning ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm text-bg-danger ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm text-bg-dark ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show">
	<strong>Error!</strong> Message Sending failed. <span class="badge badge-sm text-bg-light ms-1">upgrade</span>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-primary alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-primary btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-secondary btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-success alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-success btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-info alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-info btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-warning alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-warning btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-danger alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-danger btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-dark alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-dark btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>
<div class="alert alert-light alert-dismissible fade show">
	<p class="mb-1"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
	<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
	<div class="clearfix">
		<button class="btn btn-light btn-sm" type="button">Confirm</button>
		<button class="btn btn-link text-muted btn-sm" type="button" data-bs-dismiss="alert" aria-label="Close">Cancel</button>
	</div>
</div>

<div class="alert alert-outline-primary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-secondary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-info alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Info! You have got 5 new email.
</div>
<div class="alert alert-outline-warning alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-outline-danger alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-dark alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-light alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

<div class="alert alert-primary alert-icon bg-facebook pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-brands fa-facebook-f"></i>
	</div>
	<div class="alert-body my-1">
		<strong class="d-block mb-1">Facebook</strong>
		<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-primary alert-icon bg-twitter pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-brands fa-x-twitter"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-1">Twitter</strong>
		<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-primary alert-icon bg-pinterest pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-brands fa-pinterest"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-1">Pinterest</strong>
		<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-primary alert-icon bg-linkedin pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-brands fa-linkedin-in"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-1">Linkedin</strong>
		<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>

<div class="alert alert-primary alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-solid-primary alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-success alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-info alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-warning alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-danger alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-dark alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-solid-light alert-dismissible fade show">
	<strong class="d-block mb-1">Notifications</strong>
	<p class="mb-0 opacity-75">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, galley of type and scrambled it to make a type.</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-primary alert-icon pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-regular fa-envelope"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-0">Welcome to your account, Dear user!</strong>
		<p class="mb-0">Please confirm your email address: <a href="javascript:void(0);" class="alert-link">email@example.com.</a></p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-warning alert-icon pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-regular fa-circle-question"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-0">Pending!</strong>
		<p class="mb-0">You message sending failed.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-success alert-icon pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-regular fa-circle-check"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-0">Congratulations!</strong>
		<p class="mb-0">You have successfully created a account.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>
<div class="alert alert-danger alert-icon pe-4 alert-dismissible fade show">
	<div class="alert-media">
		<i class="fa-solid fa-triangle-exclamation"></i>
	</div>
	<div class="alert-social-body my-1">
		<strong class="d-block mb-0">Loading failed!</strong>
		<p class="mb-0">Again upload your server.</p>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
</div>