## 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.