Bootstrap 4 uses flex-box for it's modal footers. If I want two buttons, one on the left and one on the right, how do I get it to work properly?
The code below tries to use a div.row
with col-sm-6
but doesn't work.
Now that the modal-footer
is "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-auto
on the left button.
<div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
Also see: Left align and right align within div in Bootstrap
Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-block
class:
<div class="modal-footer">
<button type="button" class="btn btn-primary text-nowrap">Save changes</button>
<button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>