On my website, I am putting google map to show my location. I figured out with google map API without any difficult. My problem is that I write my phone number and address beside this google map, but it always show below google map. I tried couple of different bootstrap grid components, but no luck with me.
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Us</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-6 col-sm-3">
<div id='map'></div>
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
<div>123-4567-8910
</div>
</div>
</div>
</div>
</section>
Line 6 is custom CSS that shows star mark middle of hr line. Some components I tried worked, but then my contact information is right beside map without any space. What can I do with this? Thank you for reading!
You can style in two column
<div class="row">
<div class="col-md-4 col-xs-6 col-sm-3">
<div id='map'></div>
</div>
<div class="col-md-4 col-xs-6 col-sm-3">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
123-4567-8910
</div>
</div>
or you a float left (with span inside divinside the )
<div class="row">
<div class="col-md-4 col-xs-6 col-sm-3">
<div id='map'></div>
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
<div style="float-left" > span class="glyphicon glyphicon-phone-alt" aria-hidden="true">123-4567-8910</span>
</div>
</div>
</div>
Otherwise check if your page / tag are well formed (correctly nested, open/closed)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.