Позиционирование элемента в столбце bootstrap

Question

У меня есть вид галереи. То, чего я пытаюсь добиться, - это поместить названия для этих элементов в поле их отображения.

Проверьте jsfiddle для сценария: https://jsfiddle.net/xry7ezb9/5/

Проблема заключается в том, что родительский элемент использует класс bootstrap col, который создает заполнение по обе стороны от элемент (который, конечно, считается частью размера элемента) и, следовательно, дочерний элемент принимает это как ширину 100% для адаптации.

Результатом, которого я пытаюсь достичь, является второй элемент галереи. Но способ, которым это достигается, это ... "Hacky" (извинения за терминологию), так как я определяю значения жестко закодированным способом и полагаясь на факт, что Bootstrap не меняет это. Кроме того, я уверен, что есть другой способ достичь этого.

Последний элемент div имеет правильную ширину сам по себе, но поскольку я не могу использовать абсолютное позиционирование, чтобы поместить его в правильное место, я не уверен, как я могу применить это.

Кроме того, не уверен, является ли подход 3-го тайла действительно жизнеспособным (хотя это может быть связано с тем, что высота элемента галереи жестко задана).

Как мне подойти к этому, помня об отзывчивости?

.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

Заполнение всегда 15px, поэтому вы можете сделать это:

.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);
}

Ваш пример скрипки