The provided HTML code is as follows (jsfiddle link included below):
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="jumbotron">
<!--Search Bar-->
<form class="form-inline" method = "GET" action = "{% url 'search' %}" >
<input class="form-control mr-sm-2" name="query" type="text" placeholder="Zip Code or City/Town">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Find Jobs</button>
</form>
<p class="lead">The only job site on the web dedicated to positions that don't require a degree
(IOS and Android app coming soon!)</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-md learn_more_buttons" href="{% url 'business_owners_info' %}" role="button">Business Owner's Learn More</a>
<a class="btn btn-primary btn-md learn_more_buttons" href="{% url 'job_seekers_info' %}" role="button">Job Seekers Learn More</a>
</p>
</div>
http://jsfiddle.net/x1d02twy/2/
How can I horizontally center the search bar and button within the jumbotron?