<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init data-mdb-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-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        <div data-mdb-sortable-init class="sortable-list">

          <div class="sortable-item">Item 1</div>

          <div class="sortable-item">Item 2</div>

          <div class="sortable-item">Item 3</div>

          <div class="sortable-item">Item 4</div>

          <div class="sortable-item">Item 5</div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>

      </div>

    </div>

  </div>

</div>

​

.sortable-item {

  padding: 20px 10px;

  border-bottom: solid 1px var(--mdb-secondary-border-subtle);

  color: var(--mdb-body-color);

  background: var(--mdb-secondary-bg-subtle);

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  user-select: none;

}

​