Modals

LeptonX uses Bootstrap Modal's component's latest version.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Modal Components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Preview

HTML

<div class="bg-light rounded p-1">
  <div class="modal" tabindex="-1" style="position: static; display: block">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Preview

HTML

<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch demo modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">Woohoo, you're reading this text in a modal!</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Preview

HTML

<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#staticBackdrop"
>
  Launch static backdrop modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        I will not close if you click outside me. Don't even try to press escape
        key.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Preview

HTML

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalLong"
>
  Launch demo modal
</button>
<div
  class="modal fade"
  id="exampleModalLong"
  tabindex="-1"
  aria-labelledby="exampleModalLongTitle"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body" style="min-height: 1500px">
        <p>
          This is some placeholder content to show the scrolling behavior for
          modals. Instead of repeating the text the modal, we use an inline
          style set a minimum height, thereby extending the length of the
          overall modal and demonstrating the overflow scrolling. When content
          becomes longer than the height of the viewport, scrolling will move
          the modal as needed.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Preview

HTML

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalScrollable"
>
  Launch demo modal
</button>
<div
  class="modal fade"
  id="exampleModalScrollable"
  tabindex="-1"
  aria-labelledby="exampleModalScrollableTitle"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">
          Modal title
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          This is some placeholder content to show the scrolling behavior for
          modals. We use repeated line breaks to demonstrate how content can
          exceed minimum inner height, thereby showing inner scrolling. When
          content becomes longer than the prefedined max-height of modal,
          content will be cropped and scrollable within the modal.
        </p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <p>This content should appear at the bottom after you scroll.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Preview

HTML

<div class="d-flex flex-column flex-xxl-row gap-2">
  <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModalCenter"
  >
    Vertically centered modal
  </button>
  <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModalCenteredScrollable"
  >
    Vertically centered scrollable modal
  </button>
</div>
<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
  aria-labelledby="exampleModalCenterTitle"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>This is a vertically centered modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div
  class="modal fade"
  id="exampleModalCenteredScrollable"
  tabindex="-1"
  aria-labelledby="exampleModalCenteredScrollableTitle"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">
          Modal title
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          This is some placeholder content to show a vertically centered modal.
          We've added some extra copy here to show how vertically centering the
          modal works when combined with scrollable modals. We also use some
          repeated line breaks to quickly extend the height of the content,
          thereby triggering the scrolling. When content becomes longer than the
          prefedined max-height of modal, content will be cropped and scrollable
          within the modal.
        </p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <p>Just like that.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Preview

HTML

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalPopovers"
>
  Launch demo modal
</button>
<div
  class="modal fade"
  id="exampleModalPopovers"
  tabindex="-1"
  aria-labelledby="exampleModalPopoversLabel"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <h5>Popover in a modal</h5>
        <p>
          This
          <a
            href="#"
            role="button"
            class="btn btn-secondary popover-test"
            title=""
            data-bs-content="Popover body content is set in this attribute."
            data-bs-container="#exampleModalPopovers"
            data-bs-original-title="Popover title"
            >button</a
          >
          triggers a popover on click.
        </p>
        <hr />
        <h5>Tooltips in a modal</h5>
        <p>
          <a
            href="#"
            class="tooltip-test"
            title=""
            data-bs-container="#exampleModalPopovers"
            data-bs-original-title="Tooltip"
            >This link</a
          >
          and
          <a
            href="#"
            class="tooltip-test"
            title=""
            data-bs-container="#exampleModalPopovers"
            data-bs-original-title="Tooltip"
            >that link</a
          >
          have tooltips on hover.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

Preview

HTML

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#gridSystemModal"
>
  Launch demo modal
</button>
<div
  class="modal fade"
  id="gridSystemModal"
  tabindex="-1"
  aria-labelledby="gridModalLabel"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 border border-primary bg-light mb-3 p-3">
              .col-md-4
            </div>
            <div
              class="col-md-4 ms-auto border border-primary bg-light mb-3 p-3"
            >
              .col-md-4 .ms-auto
            </div>
          </div>
          <div class="row">
            <div
              class="col-md-3 ms-auto border border-primary bg-light mb-3 p-3"
            >
              .col-md-3 .ms-auto
            </div>
            <div
              class="col-md-2 ms-auto border border-primary bg-light mb-3 p-3"
            >
              .col-md-2 .ms-auto
            </div>
          </div>
          <div class="row">
            <div
              class="col-md-6 ms-auto border border-primary bg-light mb-3 p-3"
            >
              .col-md-6 .ms-auto
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9 border border-primary bg-light mb-3">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-8 col-sm-6 border border-primary bg-light p-3">
                  Level 2: .col-8 .col-sm-6
                </div>
                <div class="col-4 col-sm-6 border border-primary bg-light p-3">
                  Level 2: .col-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>