bootstrap 4 modal - move buttons inside modal to left - html

Question

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">×</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 1

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/

Answer 2

Do not override the modal-footer class, this will effect all other modals as well.
You can simply achieve what you want by using Bootstrap itself:
<div class="modal-footer d-flex justify-content-start">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
You can read more about d-flex justify-content-start in the documentation.