Bootstrap: Multiple buttons with btn-block inside modal-footer not aligned

[xbojch]

When using buttons with btn-block inside a modal-footer the buttons are not aligned.
Seems like the intended use for buttons with btn-block is vertical stacking, but inside a modal-footer they are stacked horizontally.

Operating system: macOs
Browser: Safari Version 11.1.1 (13605.2.8)

Reduced test case: https://codepen.io/xbojch/pen/ejgBrB

Suggested fix: https://codepen.io/xbojch/pen/zLNoMz

[asyncdesign]

By adding btn-block you are saying display: block and width: 100%. Instead of btn-block you can use w-50 on each of the buttons, so that they are displayed inline-block and each take up 50% of the width of the parent element.

[xbojch]

Thank you @asyncdesign. I guess I was trying to avoid utility classes and was a bit fooled by issue 5018 from Bootstrap 3. This works as expected and I agree it's the preferred way and easier to understand.