Smart Learning Tutorials

Online Tutorials Library

HTML and CSS

How to open a Bootstrap modal from the Left/Right Sidebar

admin

To see a working modal popup demo by clicking the button below. It will slide from right to left from right side of the page.

Learn how to open a bootstrap modal from the left or right sidebar using bootstrap CSS and JavaScript. Animating Bootstrap 5 modal from left or right sidebar.

Demo
Bootstrap 5 Modal Popup
Bootstrap 5 Modal Popup

Want to make Bootstrap modal open it from left or right side as like sidebar? It mean it should be right aligned of the window or left aligned of the window.

Just go to get bootstrap and copy-paste any example of modal popup and just attached one class called left or right to modal class. Just add a position class to your Bootstrap modal instance and the library will do the rest. Since the modal will show up from the right side or left side according to you class.

Below are the example of Bootstrap 5 modal popup from the left or right.

To Create Bootstrap 5 Modal Popup it takes following steps:-

  1. Include the css and js file of bootstrap v5.
  2. Link the modal popup on which text or action point you want to open popup using button or anchor tag.
  3. Copy the enter popup code and paste inside the page bottom just above the js files.

HTML

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal">  Launch demo modal </button>
OR
<a href="#!" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </a>

<!-- Modal -->
  <div class="modal right fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="userPic"><img src="img/union.svg"></div>
          <div class="userName">Ram Chandra</div>
          <div class="userDist">Development Center</div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <button class="btn loginBtn mt-3" type="button" onclick="window.location.href='login.html';">Logout</button>
        </div>
        <div class="modal-body">
          <div class="loginInfo">
            <div>Current Login</div>
            <div>07 July, 2022<span>|</span>10:45 am</div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">

.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
}

.modal.right.fade .modal-dialog {
    right: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}


<!-- Bootstrap JS -->
<script src="/bootstrap.min.js"></script>

<!-- Optional JavaScript -->
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
    <style>
    .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
}

.modal.right.fade .modal-dialog {
    right: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}  </style>      
  </head>
  <body>
    <h1>Bootstrap Modal Popup!</h1>

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal">  Launch demo modal </button>
OR
<a href="#!" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </a>

<!-- Modal -->
  <div class="modal right fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="userPic"><img src="img/union.svg"></div>
          <div class="userName">Ram Chandra</div>
          <div class="userDist">Development Center</div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <button class="btn loginBtn mt-3" type="button" onclick="window.location.href='login.html';">Logout</button>
        </div>
        <div class="modal-body">
          <div class="loginInfo">
            <div>Current Login</div>
            <div>07 July, 2022<span>|</span>10:45 am</div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.6.0.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>

Simple responsive popup with example

In this tutorial we learn that how to create bootstrap modal popup from left or right side using bootstrap CSS and js file, no need to include to extra JavaScript code for a Left/Right Sidebar popup.

You can customize this code further as per your requirement.

You May Also Like

Pt to Px Converter | px, em, pt, percentage

admin

Animated Circular progress bar using Html and CSS

admin

How to make 3 corner rounded triangle in CSS

admin