Troubleshooting problem with image overlay alignment in Bootstrap 4 Card

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!

Answer №1

Latest Update for Bootstrap 4.0 in 2018

To align the span to the right using Bootstrap, you can utilize the float-right class.

<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">The Bakery Test Store</h4>
                    <p class="card-text">Meat / Fish / Poultry / Deli Meat / Salads / Soup / Cheese</p>
                    <p class="card-search-text">14 apples available!</p>
        </div>
</div>

Answer №2

Silly me, I failed to recognize that I could simply use the .card-img-overlay class offered by Bootstrap. >_>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing jQuery to display images similar to videos

Are there any plugins available that can create a video-like effect on images by incorporating scroll, pan, tilt, zoom (in/out) transitions for a few seconds before fading to the next image? I've searched but haven't found anything quite like thi ...

Editing the content of a div in real-time by dynamically updating the innerHTML

Looking for a way to dynamically change the innerHTML of a contentEditable div using pure JavaScript, without relying on the Rangy library. I want the change to occur on keyup without losing cursor position or focus. Here is an example setup: <div id=" ...

Fixed css footer with full height content container

For my website's sticky footer, I followed this technique: I wanted to add a border around the entire site that also encompasses the footer, but ran into an issue where it did not extend around the page properly. Here is what happened: https://i.ssta ...

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

There are three individuals each working on separate sections of a webpage. One is focusing on moving images, another is devoted to the tab section. This begs the question: 1) Is it feasible to embed all these HTML sections into a single HTML page and dis ...

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

Issue with Firefox: Click event not triggered when clicking on CSS pseudo element

Check out my custom-made button: <button class="btn-close">Close alert</button> Here's the CSS styling for the button: .btn-close{ position: relative; height: 30px; border: none; background-color: #332b2a; color: #ff ...

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

What is the best way to combine a string with a variable in sass?

Is there a way to merge a string and a variable in Sass to form a variable name that is already present? $size: "sm"; $button-sm: 1rem; $buttom-md: 1.5rem; body { font-size: $button-#{$size}; } The desired output is: body { font-size: 1r ...

Encountering an error message stating, "Unable to assign value to 'onclick' property"

Currently, I am at a beginner level in Javascript. While working on some exercises, I encountered an issue with the 'onclick' function as mentioned above. Despite going through other queries in this forum, I have not found a solution that works ...

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

Modifying an image's src using JavaScript is not possible

I'm attempting to modify the source of an image using a JavaScript function, but it doesn't seem to be working. The function is being executed within a mounted() method in Framework7. Here is my current setup: HTML: <div> <span> &l ...

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

I seem to be encountering an issue with the image tag while working with HTML code

I have been studying through freecodecamp.org and this is my first tribute project. Everything has been going well, but I am encountering an issue with the image tag. I need to submit my project online, so I have been trying to input image links from Googl ...

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...