I was recently working on a project where I themed a Bootstrap modal as a side drawer. I made an implementation that is compatible with the modal sizing classes. Maybe this is something that's nice to have in Bootstrap by default?
Demo: https://codepen.io/MartijnCuppens/pen/OwwjWV?editors=1100
PR incomming...
MartijnCuppens
All 5 comments
@MartijnCuppens I really need this. Would love it if you could share the SCSS changes for this!
myorangeca
on 7 Aug 2018
@myorangeca, you can find the code in the PR https://github.com/twbs/bootstrap/pull/27035
MartijnCuppens
on 7 Aug 2018
This looks really good! Have you seen this (https://github.com/twbs/bootstrap/pull/21540) PR? Not sure how it compares....
coliff
on 8 Aug 2018
@coliff, I only searched for _"side modals"_ in the open issues and did not came across that PR. Thanks for mentioning it.
There are some differences in the PR's though:
- This version uses flexbox to push the
.modal-footerto the bottom, notposition: absolute;. This makes the footer optional - This version is compatible with the modal sizes.
I see there is a bit of discussion in #21540 to make a new component instead of extending the modal functionality. The reason I chose to extend is that modals actually have all the functionality that the drawer need (the API, the keyboard accessibility). I think we would have a lot of duplicate code if we're going to make another component for this.
MartijnCuppens
on 8 Aug 2018
I love this, and really want this in basically all of my projects as the nav (hamburger) menu.
What is the likelihood of getting a version of this into Bootstrap?
viktorsmari
on 2 Apr 2019
Related issues
tiendq
路
3Comments
alvarotrigo
路
3Comments
leomao10
路
3Comments
cvrebert
路
3Comments
vinorodrigues
路
3Comments
Most helpful comment
@coliff, I only searched for _"side modals"_ in the open issues and did not came across that PR. Thanks for mentioning it.
There are some differences in the PR's though:
.modal-footerto the bottom, notposition: absolute;. This makes the footer optionalI see there is a bit of discussion in #21540 to make a new component instead of extending the modal functionality. The reason I chose to extend is that modals actually have all the functionality that the drawer need (the API, the keyboard accessibility). I think we would have a lot of duplicate code if we're going to make another component for this.