« Back to main

Bootstrap custom modal as offcanvas sidebar

View demo Download


You can create off-canvas sidebar dialogs also with modal component. You already know about bootstrap 4 modal and how it works. But you can play with its styles, You have to be more creative. All you need is to add your class to modal-dialog div element and change its position.

Steps to customize bootstrap's modal dialog
  • Create basic bootstrap modal
  • Add your class to modal-dialog element control it. For example modal-dialog-aside
  • Add another class to modal element (parent "div" of modal-dialog). For example fixed-right or fixed-left
  • Now we can override some CSS to change its position and shape. By default it should have negative transform to stay out of screen
  • Let's show our modal with simple style .modal.show .modal-dialog-aside{ transform: translateX(0); }
Here are basic code snippets

« Back to all examples

Whant to thank author?


My another project: Bootstrap-ecommerce UI kit
Design system and code library for creating e-commerce web projects