A bit lost. Trying to put marker over an image (x,y coordinates within 0 to 256).
I know usually its done by creating a container like here: https://stackoverflow.com/a/29304089/11933719
But since in my case i use img-fluid class, and image stretching height relative to its size(original image size is 256x256), i dont know how to wrap it in container to draw on.
Only idea i have left is, since image is square, and parent div width will be the same as image, probably calculate relative to the width somehow.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
<div class="col">
<div class="card shadow h-100">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
<div style="position: absolute; top:0; left:0; width: 256px; height: auto">
<img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
<div style="position: absolute; top:0; left:0; width: 256px; height: auto">
<img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
<div style="position: absolute; top:0; left:0; width: 256px; height: auto">
<img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
<div style="position: absolute; top:0; left:0; width: 256px; height: auto">
<img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
<div style="position: absolute; top:0; left:0; width: 256px; height: auto">
<img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
</div>You can wrap both images in a div container with position: relative; and move the img-fluid class to the container. Also use margin instead of padding.
If you want to position the marker perfectly you need to subtract 16px from top and 8px from left (considering marker is 16x16) so that tip of the marker is at the correct position. Example: top: calc(100% - 16px); left: calc(100% - 8px);
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
<div class="col">
<div class="card shadow h-100">
<div class="img-fluid shadow-sm m-2" style="position: relative;">
<img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="w-100"/>
<img class="marker" style="position: absolute; top: calc(0% - 16px); left: calc(0% - 8px); height: 16px; width: 16px;"
src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
</div>
<div class="card-header text-center">
<div class="row p-0">
<div class="col-4">
500
</div>
<div class="col-4 border-start border-end">
800
</div>
<div class="col-4">
1000
</div>
</div>
<div class="row p-0 fw-bold">
<div class="col-4">
%PRICE%
</div>
<div class="col-4 border-start border-end">
%SIZE%
</div>
<div class="col-4">
%SQM%
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">%TITLE$</h5>
<p>%DESCRIPTION%</p>
</div>
<div class="card-footer text-center">
<b>Call: %PHONE%</b>
</div>
</div>
</div>
</div>