« Back to main Free Hosting Bootstrap Builder Free UI Kit

Bootstrap custom modal as offcanvas sidebar

View demo Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

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