Positioning an element within bootstrap column - html

Question

I have a gallery kind of display. What I'm trying to achieve is to put titles for those items within their display box.
Check jsfiddle for the scenario:
https://jsfiddle.net/xry7ezb9/5/
The problem is that the parent element uses bootstrap col class which creates padding on both sides of the element (which is, of course, considered part of the element size) and thus a child element takes that as the 100% width to adapt.
The result I'm trying to achieve is the second gallery item. But the way it is achieved is... "Hacky" (apologies for terminology) since i define the values in a hard-coded way and relying on the fact that Bootstrap does not change that. Also, I'm certain there is another way to achieve this.
The last div element has the correct width by itself but since i can't use absolute positioning to put it into correct place, I'm not sure, how i can apply this.
Also, not sure if 3rd tile approach is really viable (though it might be due to the fact, that gallery item height is hard-coded).
How should I approach this while keeping responsiveness in mind?
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.gallery-item-container {
height: 200px;
max-height: 200px;
cursor: pointer;
}
.gallery-item-logo {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border: unset;
border-radius: unset;
background: unset;
border: solid 1px #929292;
border-radius: 5px;
background-color:#fff;
}
.gallery-item-logo:hover{
background-color:#c7c7c7;
transition: 0.5s;
}
.gallery-item-logo > img {
max-height: 70%;
max-width: 90%;
}
.speaker-name, .item-title {
position: absolute;
text-align: center;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 1000;
padding: 5px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.no-absolute {
/* position: absolute; */
text-align: center;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 1000;
padding: 5px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.no-absolute-top-margin-test{
height: 15%;
margin-top: -30px;
}
/* Offsetting bootstrap col class padding on the parent (it expands parent body by 15px on each side thus children inherit that extra width) */
.col-padding-offset {
max-width: calc(100% - 30px);
margin-left: 15px;
max-height: 15%; // Separate this
height: 15%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_8">
<img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
<span class="icon-focus"></span>
</div>
<div class="item-title">
<p><b>test title</b></p>
</div>
</div>
<div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_16">
<img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
<span class="icon-focus"></span>
</div>
<div class="item-title col-padding-offset">
<p><b>test title</b></p>
</div>
</div>
<div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_11">
<img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
<span class="icon-focus"></span>
</div>
<div class="no-absolute no-absolute-top-margin-test">
<p><b>test title</b></p>
</div>
</div>
<div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_2">
<img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
<span class="icon-focus"></span>
</div>
<div class="no-absolute">
<p><b>test title</b></p>
</div>
</div>
</div>

Answer 1

The padding is always 15px, so you can could do this:
.speaker-name, .item-title {
position: absolute;
text-align: center;
bottom: 0px;
left: 15px;
width: calc(100% - 30px);
z-index: 1000;
padding: 5px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
Your fiddle example