ans ans - 3 years ago 196
CSS Question

bootstrap 4 modal - move buttons inside modal to left

I have a modal I am using in bootstrap 4, however I like to move the 'cancel' and return buttons to the left side of the modal. I have a working js fiddle here: https://jsfiddle.net/andrewsolis/08v6znox/. Here is also my html code:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<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>


The general modal the docs provide here already does what I need it to, it's just figuring out how to make the buttons on the modal float left that are an issue. I've tried attaching the class
pull-left
to the buttons, but with no luck. Any help will be greatly appreciated.

Thanks.

Answer Source

You need to overwrite the default Bootstrap css.

Just add this in your css:

.modal-footer {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

Here is the updated jsfiddle.

You can read more about Bootstrap suite of responsive flexbox utilities here https://v4-alpha.getbootstrap.com/utilities/flexbox/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download