<!-- Default Modal -->
<button type="button" class="btn btn-primary btn-pill" data-toggle="modal" data-target="#exampleModal">
  دمو
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        متن بدنه مودال اینجا قرار می‌گیرد.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>

<!-- Scrolling Long Modal -->
<button type="button" class="btn btn-success btn-pill" data-toggle="modal" data-target="#exampleModalLong">
  دمو
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
        وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>

<!-- Tooltip Modal -->
<button type="button" class="btn btn-warning btn-pill" data-toggle="modal" data-target="#exampleModalTooltip">
  دمو
</button>

<div class="modal fade" id="exampleModalTooltip" tabindex="-1" role="dialog" aria-labelledby="exampleModalTooltip"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle2">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Popover in a modal</h5>
        <p>این
          <a href="#" role="button" class="btn btn-secondary popover-test" data-toggle="popover" title="عنوان پاپ اوور"
            data-content="محتوای بدنه‌ی پاپ‌اوور در این ویژگی تنظیم می‌شود.">دکمه</a> باعث می‌شود که با کلیک، یک پنجره‌ی پاپ‌اوور نمایش داده شود.</p>
        <hr>
        <h5>نکات راهنما در یک پنجره مودال</h5>
        <p>
          <a href="#" class="tooltip-test" data-toggle="tooltip" title="محتوای پاپ‌اوور">این لینک</a> و
          <a href="#" class="tooltip-test" data-toggle="tooltip" title="محتوای پاپ‌اوور">این لینک</a> این لینک و آن لینک با نگه داشتن ماوس روی آنها، راهنماهای ابزار (tooltip) نمایش داده می‌شوند.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>

<!-- Using the Grid Modal -->
<button type="button" class="btn btn-danger btn-pill" data-toggle="modal" data-target="#exampleModalGrid">
  دمو
</button>

<div class="modal fade" id="exampleModalGrid" tabindex="-1" role="dialog" aria-labelledby="exampleModalGrid"
  aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalGridTitle">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4">.col-md-4</div>
              <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
              <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row">
                  <div class="col-8 col-sm-6">
                    Level 2: .col-8 .col-sm-6
                  </div>
                  <div class="col-4 col-sm-6">
                    Level 2: .col-4 .col-sm-6
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>

<!-- Form Modal -->
<button type="button" class="btn btn-info btn-pill" data-toggle="modal" data-target="#exampleModalForm">
  دمو
</button>

<div class="modal fade" id="exampleModalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalFormTitle"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalFormTitle">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">ایمیل</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
              placeholder="ایمیل خود را وارد کنید">
            <small id="emailHelp" class="form-text text-muted">ما هرگز ایمیل شما را با هیچ کس دیگری به اشتراک نمی‌گذاریم.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">رمز عبور</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="رمز عبور">
          </div>
          <div class="form-check pl-0">
          <input type="checkbox" checked="checked" />
            <label class="control control-checkbox">مرا به خاطر بسپار
              <div class="control-indicator"></div>
            </label>
          </div>
          <button type="submit" class="btn btn-primary">ثبت</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>

<!-- Small Modal -->
<button type="button" class="btn bg-primary text-white btn-pill mb-3 mb-md-0" data-toggle="modal" data-target="#exampleModallarge">
  Large Modal
</button>

<div class="modal fade" id="exampleModalsmall" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmallTitle"
  aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalSmallTitle">عنوان مودال</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        متن بدنه مودال اینجا قرار می‌گیرد.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary btn-pill">ثبت تغییرات</button>
      </div>
    </div>
  </div>
</div>