Looking for a way to ensure that an image is displayed responsively with a div-element positioned underneath it in Bootstrap. Currently, the image can overlap the div-element. How can I resolve this issue?
<div class="col-sm-12 col-md-6 pt-5 pl-lg-5">
<div class="row">
<div id="container">
<img id="image" class="img-fluid" src="~/images/myImage.png" />
</div>
</div>
<div class="row">
<div class="py-3 py-lg-4">
This text should always appear below the image.
</div>
</div>
</div>
CSS:
#container {
height: 245px;
width: 310px;
position: relative;
width: 100%;
}
#image {
position: absolute;
left: 0;
top: 0;
}
Your assistance is greatly appreciated!