<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Please confirm your location</h2>
<p class="lead">Please begin by refreshing the page to see if your location populates the Near field. Make sure you click Allow or Grant Permission if your browser asks for your location.
<div class="jumbotron">
<p><b>If your browser doesn't ask your location and your city still doesn't appear, try these steps:</b><p>
<span class="circle">1</span> At the top of your Chrome or Firefox window, near the web address, click the green lock.<p>
<p>
<span class="circle">2</span> In the window that pops up, make sure Location is set to Allow or Ask.
<p>
<span class="circle">3</span> That's all you need. Reload the page and repeat your search.
</div>
<i> If you're still having trouble, please consult your browser's help page, or choose a city and state/province from the type ahead dropdown choices.</i>
</div>
</div>