How to stacking image on top of another and responsive


im a beginner at css,i have several image and i attempting to stack image on top of another. im using framework bootstrap 4.1

expected Result


i need the second image(the women) is on the bottom of div like picture above

See the jsfiddleHere


Welcome to the forums, @shaqiyalaura!

What is the purpose of this exercise? Is it part of an HTML and CSS course or a school project?

Why are you using the Bootstrap 4 framework?

I would recommend that you first complete a basic class in HTML and CSS, then decide if you want to use a framework. If you still think that Bootstrap is the way to go, then read the Bootstrap documentation completely several times until you are comfortable writing pages the Bootstrap way.

You will need to understand HTML and CSS to understand how Bootstrap works and how to customize the pages that you write.


If you post the relevant HTML and CSS (not everything please) I’ll be happy to walk you through it best as I can.


Make the large image the one that holds the space open in the flow of the document and then place the small mage absolutely on top of the large image. If you give the small image height:100% and width:auto it will keep track with the larger image accordingly.

This has little to do with bootstrap itself as that is a method for laying out grids or sections and not little tasks like this. You still need to use your own css skills inside the grid.