How to make a similar gallery on bootstrap3, so that the height of the frame is fixed, and inside it there are images and captions?

The trivial solution is to set a specific height for the image in the wrapper, but in order to make it responsive (adaptive) - it is necessary to set not the height but proportions.

Wrap a picture in a <div> , in which you set proportions, and set the absolute positioning to the picture itself:

 .item-img-wrapper { overflow: hidden; position: relative; padding-top: 70%; /* процент пропорции */ } .item-img { position: absolute; display: block; top: 0; left: 50%; margin: 0 auto; max-width: 100%; max-height: 100%; transform: translateX(-50%); } 

To calculate the percentage of proportion, use the formula

 ratio = width / height paddingTop = ration * 100 

Suppose the proportion of the container is 3 to 4. Then

 paddingTop = 3 / 4 * 100 = 75% 

Link to the working example https://codepen.io/lukas-pierce/pen/LxKpxY