هشدارها

<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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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-warning alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-warning py-2 m-0 bg-primary border-0 rounded-0 alert-dismissible fade show text-center overflow-hidden" role="alert">
	<p class="text-white m-0">Traveling internationally? Get update information on COVID-19 travel guidance and restrictions<a href="#" class="btn btn-xs btn-dark ms-2 mb-0">Learn more!</a></p>
	<!-- Close button -->
	<button type="button" class="btn-close btn-close-white opacity-9 p-3" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-danger d-flex align-items-center rounded-3 mb-0" role="alert">
  <h4 class="mb-0 alert-heading"><i class="bi bi-exclamation-octagon-fill me-2"></i> </h4>
  <div class="ms-3">
    <h6 class="mb-0 alert-heading">Hurry! 51% off the tours are already fully booked</h6>
    <p class="mb-0">Many trips to various areas have been ordered, don't let you miss it</p>
  </div>
</div>

<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
  <!-- Title -->
  <div class="d-sm-flex align-items-center mb-3">
    <img src="assets/images/element/12.svg" class="w-40px me-3 mb-2 mb-sm-0" alt=""> 
    <h5 class="alert-heading mb-0">$50,000 Covid Cover & More</h5>
  </div>
  
  <!-- Content -->
  <p class="mb-2">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>

  <!-- Button and price -->
  <div class="d-sm-flex align-items-center">
    <a href="#" class="btn btn-sm btn-success mb-2 mb-sm-0 me-3"><i class="fa-regular fa-plus me-2"></i>Add</a>
    <h6 class="mb-0 text-dark">$69 per person</h6>
  </div>

  <!-- Close button -->
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>