مدال و اعلانات توضیحات عنوان صفحه در اینجا می رود...

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان مدال</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- modal-xl -->
<button type="button" class="btn btn-primary mr-2" data-toggle="modal" data-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-primary mr-2" data-toggle="modal" data-target="#modalLg">Large modal</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-primary mr-2" data-toggle="modal" data-target="#modalSm">Small modal</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-primary mr-2" data-toggle="modal" data-target="#modalCoverExample">Modal Cover</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 mr-2"></i>
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 دقیقه قبل</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span>×</span>
    </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>