Press "Enter" to skip to content

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.

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


See Demo And Download

Official Website(xcartmods): Click Here

This superior jQuery/javascript plugin is developed by xcartmods. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.