Bootstrap - Badge in Img mantain responsive - html

Question

I need a badge within an img - independently from the window size - So far I have in my html following code (btw. I'm using Angular - but framework should be irrelevant):
.icon-container {
display: inline-block;
position: relative;
}
troop-level-badge {
position: absolute;
bottom: 2px;
left: 2px;
}
`
<div class="container row" *ngIf="img">
<div class="col-md-1">
<div class="icon-container">
<img class="rounded" [src]="img" width="40" height="auto">
<span class="badge badge-dark troop-level-badge">6</span>
</div>
</div>
</div>`
so far the result looks like this (as expected):
But when i resize the window the badge breaks out of the div. Does
someone know how i can contain the badge within the img even by resizing the window?

Answer 1

Your troop-level-badge rule isn't valid. There is a missing point. So replace troop-level-badge with .troop-level-badge and it should work like the following. To display the badge on the right side you need to set right:2px; instead of left:2px;:
.icon-container {
display:inline-block;
position:relative;
}
.troop-level-badge {
bottom:2px;
position:absolute;
right:2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container row" *ngIf="img">
<div class="col-md-1">
<div class="icon-container">
<img class="rounded" src="https://placehold.it/100x100" >
<span class="badge badge-dark troop-level-badge">6</span>
</div>
<div class="icon-container">
<img class="rounded" src="https://placehold.it/75x75" >
<span class="badge badge-dark troop-level-badge">6</span>
</div>
<div class="icon-container">
<img class="rounded" src="https://placehold.it/50x50" >
<span class="badge badge-dark troop-level-badge">6</span>
</div>
</div>
</div>