مودال و اطلاعیه توضیح هدر در این قسمت قرار دارد...

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان مودال</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>متن بدنه مودال اینجاست.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-outline-theme">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- modal-xl -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalXl">مودال خیلی بزرگ</button>

<div class="modal fade" id="modalXl">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- modal-lg -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalLg">مودال بزرگ</button>

<div class="modal fade" id="modalLg">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- modal-sm -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalSm">مودال کوچک</button>

<div class="modal fade" id="modalSm">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalCoverExample">کاور مودال</button>

<div class="modal modal-cover fade" id="modalCoverExample">
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<div class="toast" data-autohide="false">
  <div class="toast-header">
    <i class="far fa-bell text-muted me-2"></i>
    <strong class="me-auto">Bootstrap</strong>
    <small>11 دقیقه قبل </small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    سلام دنیا!این یک پیام توست است.
  </div>
</div>

<script>
  $('.toast').toast('show');
</script>

<div class="toasts-container">
  <div class="toast fade hide" data-autohide="false" id="toast-1">
    ...
  </div>
  <div class="toast fade hide" data-autohide="false" id="toast-1">
    ...
  </div>
</div>