I am currently utilizing Bootstrap 4 and am attempting to create a card-based layout for showcasing my stores. Within this design, I have a location marker that should appear over the store image with a 5-star rating positioned on the same line, floating to the right (using icons from font-awesome).
However, I have encountered an issue where the ratings disappear when I attempt to use float:right on them (presumably going underneath the image).
Does anyone have any suggestions on how to resolve this problem?
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
<div class="card-block">
<div class="stores-card-img-overlay-text">
<p>
<i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
<span class="rating">
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="test-shizzle">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h4 class="card-title">De bakkerij testshop</h4>
<p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
<p class="card-search-text">14 appels in gamma!</p>
</div>
</div>
The following CSS is meant to position the .stores-card-img-overlay-text above the image and float the .rating span:
.stores-list .stores-card-img-overlay-text {
color: #fff;
margin-top: -50px;
}
.stores-list .stores-card-img-overlay-text .rating {
float: right;
}
Thank you in advance for any assistance!