Bootstrap 4 Card image overlay float issue

Question

I'm using Bootstrap 4 and am trying to use a card based layout to display my stores. I have a location marker that's supposed to come over the store and on the same line, floating to the right, I want a 5 star rating. (Icons from font-awesome) However, whenever I use float:right on the ratings they vanish. (I assume underneath the image)

Anyone have a clue as to how to fix this?

<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>

And the css to raise the .stores-card-img-overlay-text over 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;
}

Thanks in advance!

Carol Skelly · Answer 1 · 2018-03-26T20:31:00.363

Update 2018 for Bootstrap 4.0

You can use the Bootstrap float-right class to pull the span right..

<div class="card">
        <img class="card-img-top img-fluid" 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 float-right">
                                <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>

http://codeply.com/go/60n8Prld36

That just adds !important to the float:right. Same result :) https://s31.postimg.org/f7h1yt31n/Capture.png vs https://s32.postimg.org/6gwcp7y3p/Capture2.png — Feanor, Jul 29 '16 at 12:25
Yeah... but this makes use of an existing class so you don't have to add your own. — Carol Skelly, Jul 29 '16 at 12:46
True true, but it doesn't solve the problem at hand. :) Using .card-img-overlay did though. — Feanor, Jul 29 '16 at 13:35
The "overlay" wasn't clear. The question says "location marker that's supposed to come over the store and on the same line, floating to the right" — Carol Skelly, Jul 29 '16 at 13:40

score -1 · Accepted Answer · answered Jul 29 '16 at 12:37

-1

Idiot that I am I did not realise I could just the the .card-img-overlay class provided by Bootstrap. >_>

answered Jul 29 '16 at 12:37

Feanor

1
2

Bootstrap 4 Card image overlay float issue

2 Answers2