Bootstrap 4/5 Top Bottom, Side & Full Screen Modals Plugin

Bootstrap 4/5 Top Bottom and Side & Full-Screen Modals are a CSS extension of the BS4 framework that allows you to create the full-screen top, bottom, and/or side drawers and sample dialogs using the original Bootstrap component.

The extension converts Bootstrap 4 conditional into a full-width or full-height modal window that slides out from the top/bottom/left/right side of the screen when switching.

Must Read: Create Bootstrap 5 Modal Box using JavaScript | Dynamic BS5 ModalPopup

Bootstrap Top Bottom, Side & Full Screen Modals Plugin Details

Post Name	bootstrap 4 Side Modals
Author Name	xcartmods
Category	Bootstrap, Modal, Popup Plugins
Official Page	Click Here
Official Website	github.com
Publish Date	March 26, 2021
Last Update	July 3, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Load the required stylesheet bootstrap-side-modals.css within Bootstrap.

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/bootstrap-side-modals.css" />
<!-- JavaScript -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Just add a class to your Bootstrap modal.

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#left_modal">
  Left Side Modal SM
</button>

<!-- Modal Window -->
<div class="modal modal-left fade" id="left_modal" tabindex="-1" role="dialog" aria-labelledby="left_modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal Content Here
      </div>
      <div class="modal-footer modal-footer-fixed">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>