I am trying to add text over an image in a Bootstrap card, but I am facing some challenges. Here is the code I have:
<div className ="container" id="mainContainer">
<div className ="row mt-4">
<div className="col-md-4">
<div className="card" >
<img className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
</img>
<div className="card-img-overlay">
<span className="badge badge-dark"> 1 </span>
</div>
<div className="card-body">
<h5 className="card-title"> Bulbasaur </h5>
<span className="badge badge-light"> poison </span>
</div>
</div>
</div>
</div>
My desired outcome is shown in this image.
However, the current state looks like this https://i.sstatic.net/SmT3q.png
There are several differences between what I have and what I want, with the most crucial being the positioning of the element - I just can't seem to get it right.