Open a bootstrap modal from the left or right sidebar

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.

Live Demo

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.

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 getbootstrap 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 Bootsrap 5 modal popup from the left or right.

Bootstrap 5 Modal Popup

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
  • Css and JavaScript
  • Example
<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>
<!-- 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')
})
<!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>

In this tutorial we learn that how to create bootstrap modal poup 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.

Simple responsive popup with example

You can customize this code further as per your requirement.