Modal

Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.

The Modal is a dialog box/popup window which can be used for light boxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.

Custom Modal

html

         <button
            type="button"
            class="btn btn-dark btn-flat"
            data-toggle="modal"
            data-target="#customModal1"
          >
            Modal
          </button>
          <div
            class="modal fade"
            id="customModal1"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="card-border card">
                <img style="width: 100%" src="../img/modal.jpg" />
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Modal Sizes

html

          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal2"
          >
            Small Modal
          </button>
          <div
            class="modal fade"
            id="customModal2"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-sm">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal3"
          >
            Medium Modal
          </button>
          <div
            class="modal fade"
            id="customModal3"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal4"
          >
            Large Modal
          </button>
          <div
            class="modal fade"
            id="customModal4"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-lg">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal5"
          >
            Fluid Modal
          </button>
          <div
            class="modal fade"
            id="customModal5"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-fluid">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-light btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="blockcode">
        <div class="header">Modal Positions</div>
        <div class="example">
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal11"
          >
            Top Left Modal
          </button>
          <div
            class="modal fade"
            id="customModal11"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-top-left">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal12"
          >
            Top Right Modal
          </button>
          <div
            class="modal fade"
            id="customModal12"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-top-right">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal13"
          >
            Bottom Left Modal
          </button>
          <div
            class="modal fade"
            id="customModal13"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-bottom-left">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-dark btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal14"
          >
            Bottom Right Modal
          </button>
          <div
            class="modal fade"
            id="customModal14"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-bottom-right">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-light btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-light btn-flat"
            data-toggle="modal"
            data-target="#customModal15"
          >
            Center Modal
          </button>
          <div
            class="modal fade"
            id="customModal15"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-center">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">Title</div>
                  <p class="card-text">
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </p>
                  <div class="d-flex">
                    <div class="d-flex justify-content-start" style="flex: 50%">
                      <button class="btn btn-light btn-flat">Label</button>
                    </div>
                    <div class="d-flex justify-content-end" style="flex: 50%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Modal Positions

html

         <button
            type="button"
            class="btn btn-dark btn-flat"
            data-toggle="modal"
            data-target="#customModal10"
          >
            Fullscreen Modal
          </button>
          <div
            class="modal fade"
            id="customModal10"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-fullscreen">
              <div class="card-border card">
                <div class="view">
                  <div class="ratio ratio-16x9">
                    <iframe
                      src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
                      title="YouTube video"
                      allowfullscreen
                    ></iframe>
                  </div>
                  <div class="d-flex p-3">
                    <div class="d-flex justify-content-end" style="flex: 100%">
                      <button
                        class="btn btn-light btn-flat close"
                        type="button"
                        data-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button class="btn btn-dark btn-flat">Done</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Script

   <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../js/bootstrap.bundle.min.js"
      defer
    ></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>