Bootstrap 3 Modal Footer Align Buttons on Both Edges
How Can I Align Buttons in Modal's Footer So They Are on Both Sides of Modal? Default Behaviour Sets All Buttons Near Right Edge, but I Need Close Button on...
How can I align buttons in modal's footer so they are on both sides of modal ? Default behaviour sets all buttons near right edge, but I need close button on right and another buttons on left.
2 Answers
You can add class pull-left to the buttons which you want to align to left.
In the below sample, close button will be aligned to right and other buttons aligned to left.
Sample footer code:
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" style="">Save changes</button>
<button type="button" class="btn btn-primary pull-left" style="">Save changes1</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
Example:
$(function () {
$(".btn").click(function () {
$("#myModal").modal('show');
});
});<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" />
<!-- Button HTML (to Trigger Modal) -->
<a href="#" class="btn btn-lg btn-primary">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?
</p>
<p class="text-warning">
<small>If you don't save, your changes will be lost.</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left">Save changes</button>
<button type="button" class="btn btn-primary pull-left">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Similar to Phani's answer but now visualized and using non-inline CSS classes.
$('#myModal').modal('show');.modal .modal-footer button {
float:left;
}<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
