Slideover Bootstrap Modals


Sometimes we don’t want a modal floating in the center of the viewport; sometimes, we want a full-height modal that slides into frame. Luckily, we can write a bit of CSS to extend the Bootstrap modal component to support slideover modals.

We want our slideover modals to have a few key characteristics:

  • take up the full-height of the viewport
  • take up the natural width Bootstrap would give the viewport, unless the viewport width is such that the modal would take up more than 80% of the width, in which case, cap the modal width at 80% of the viewport width
  • keep the header at the top of the modal always, regardless of content height
  • keep the footer at the bottom of the modal always, regardless of content height
  • allow the content to be internally scrollable if it overflows
  • support forms within the modal out-of-the-box

With these goals in mind, I wrote a small bit of CSS to achieve our ends. I used the class name .modal-dialog-slideover, which we can simply add to the element that already has the .modal-dialog class to seamlessly convert a floating modal to a slideout modal. It is a concise 27 lines of SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.modal-dialog.modal-dialog-slideover {
  margin: 0;
  margin-left: auto;
  max-width: 80%;

  .modal.fade & {
    transform: translate(100%, 0);
  }
  .modal.fade.show & {
    transform: translate(0, 0);
    flex-flow: column;
  }
  & .modal-content {
    border: 0;
    border-radius: 0;
    height: 100vh;
  }
  & .modal-body {
    max-height: 100%;
    overflow-y: auto;
  }
  & .modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

Here is a CodePen that offers a number of examples of Bootstrap 4 modals converted to slideover modals. Enjoy!

See the Pen Bootstrap 4 SlideOut Modal examples by Stephen Margheim (@smargh) on CodePen.