Left & right align modal footer buttons in Bootstrap 4
Twitter BootstrapBootstrap 4Twitter Bootstrap-4Twitter Bootstrap Problem Overview
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.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-left">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div class="col-sm-6 text-right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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>
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>
Solution 2 - Twitter Bootstrap
The modal-footer
is display:flex;
. So the better way to align its elements (e.g. buttons) is by using flex rules. Bootstrap 4 provides new utilities classes to modify those flex rules (e.g. [.justify-content-[modifier]
][1]). So I think a better option should be as follows:
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
[1]: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content ".justify-content-[modifier]
"
Solution 3 - Twitter Bootstrap
The only way it works in IE is using w-100. mx-auto and mr and ml-auto all seems to overflow the buttons from the containing element.
<div class="modal-footer">
<div class="w-100">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary float-right">Save</button>
</div>
</div>
Solution 4 - Twitter Bootstrap
For anyone that wants 3 buttons, for example 2 on the right and 1 on the left:
<div class="modal-footer justify-content-between">
<button type="submit" class="btn btn-danger">Delete</button>
<div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
Solution 5 - Twitter Bootstrap
Totally agree with @Zim and @jmboiton
If both of these methods are used together, it fixes the issue for everyone (including IE users :P )
Overall best solution is to combine .justify-content-between
and the .mr-auto
classes like this:
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-secondary mr-auto" type="button">Left Button</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-secondary mr-auto" type="button">Left Button</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Solution 6 - Twitter Bootstrap
This works for me
<div class="modal-footer">
<button type="button" class="btn btn-primary d-flex flex-grow-1">Save changes</button>
<button type="button" class="btn btn-secondary d-flex flex-grow-1" data-dismiss="modal">Close</button>
</div>
Solution 7 - Twitter Bootstrap
<div class="modal-footer justify-content-start">
<input type="hidden" value="" name="">
<button id="pagePrintBtn" type="button" class="btn btn-primary">Print</button>
<button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary" id=asd>Save</button>
</div>
Solution 8 - Twitter Bootstrap
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
Solution 9 - Twitter Bootstrap
This is simple and helped me
<div class="modal-footer">
<button id="pagePrintBtn" type="button" class="btn btn-primary" style= "float: left;">Print</button>
</div>
Solution 10 - Twitter Bootstrap
For IE you can use .justify-content-between
helper class form bootstrap for the parent element. In this case for the .modal-footer
.
For Example:
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
Solution 11 - Twitter Bootstrap
`<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>`.
you can create a div tag (<div class="col-md-12 text-right></div>
) and put your button tags inside that div section.. This will center the buttons.. if you want to move the to any other position and css style float: left or right
to a class in our new div tag.