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

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.

codepen home bootstrap modal as leftright sidebar, bootstrap modal position bottom right, thymeleaf bootstrap modal example, bootstrap modal popup example using jquery

How to make use of it:

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

<!-- 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 place class to your Bootstrap modal instance and the library will do the remaining.

<!-- 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>

Requires jQuery library and Bootstrap 4 framework. Great for popup notifications, off-canvas navigation, a sticky footer section, sideboard settings panel, floating social sharing tools, and more.

Create Top/Bottom/Side Drawers Using Bootstrap Modal Component, bootstrap drawer codepen, modal sidebar bootstrap 4, modal bootstrap