JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<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>
<div class="container">
		
	    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	      <div class="modal-dialog" role="document">
	        <div class="modal-content">
	          <div class="modal-header">
	                <h5 class="modal-title" id="exampleModalLongTitle">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 col-lg-12" class="btn btn-secondary" data-dismiss="modal">Close</button>
	          	</div>
	          	<div class="modal-footer">
	            	<button type="button col-lg-12" class="btn btn-primary">Save changes</button>
	          	</div>
	        </div>
	      </div>
	    </div>
	</div>

CSS

#exampleModalLong .modal-footer .btn{
    width:100%;
}

JavaScript

$(document).ready(function(){
$('#exampleModalLong').modal()
})