Bootstrap custom modal as offcanvas sidebar
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-rightorfixed-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