"Location"
Bootstrap 4.1.1 Snippet by divyalahad

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
span.circle {
background: #203989;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fc6600;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: