Convert Bootstrap 5 Modals To Drawers

A CSS extension that converts Bootstrap 5 modals into drawers. Useful for off-canvas navigation, dashboard menus, settings panels, and much more.

How to use it:

1. Add the following CSS snippets to your Bootstrap 5 project.

.right .modal-dialog,
.left .modal-dialog {
  transition: transform .25s ease-out;
  position: fixed;
  margin: auto;
  height: 100%;
}
.modal.right .modal-content,
.modal.left .modal-content {
  overflow-y: auto;
  border-radius: 0;
  border: none;
  height: 100%;
}
.right .modal-dialog {
  transform: translateX(50px);
  right: 0;
}
.left .modal-dialog {
  transform: translateX(-50px);
  left: 0;
}

2. Create a modal drawer that slides out from the left side of the screen when toggled.

<div class="modal left">
  <div class="modal-dialog modal-sm w-100">
    <div class="modal-content">
      Modal Content Here
    </div>
  </div>
</div>

3. Create a modal drawer that slides out from the right side of the screen when toggled.

<div class="modal right">
  <div class="modal-dialog modal-sm w-100">
    <div class="modal-content">
      Modal Content Here
    </div>
  </div>
</div>

4. Set the size of the modal drawer.

<div class="modal left">
  <div class="modal-dialog modal-lg w-100">
    <div class="modal-content">
      Large Modal
    </div>
  </div>
</div>

<div class="modal left">
  <div class="modal-dialog modal-md w-100">
    <div class="modal-content">
      Medium Modal
    </div>
  </div>
</div>