Как средствами Bootstrap разместить h1 и кнопку в центре поверх изображения?

Question

Есть фоновое изображение (во всю ширину), нужно разместить по центру изображения кнопку и текст над кнопкой. Подскажите как это можно сделать? (желательно средствами bootstrap).

 <div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img class="w-100" src="img/roomba.jpg" alt="">
      <h1>Текст</h1>
      <button type="button" class="btn btn-outline-primary">Продукция</button>
    </div>
  </div>
</div>

Answer 1

Пробовал делать так:

    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <img class="w-100 myimage" src="img/image1.jpg" alt="">
          
          <div class="div_href">
            <h1>Текст 1</h1>
            <button type="button" class="btn btn-outline-success bn_info">Подробнее</button>
          </div>
          
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <img class="w-100 myimage" src="img/image2.jpg" alt="">
          
          <div class="div_href">
            <h1>Текст 2</h1>
            <button type="button" class="btn btn-outline-success bn_info">Подробнее</button>
          </div>
          
        </div>
      </div>      
    </div>

.div_href {
  position: relative;
  bottom: 50%;
  text-align: center;
}
.div_href h1 {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bn_info {
  width:20%;
  min-width: 150px;
  height: 10%;
}

Но между изображениями появляется разрыв и по краям отступы, а они должны идти в плотную. Возможно что-то не так с position (

БЛОГ НА HUSL

Как средствами Bootstrap разместить h1 и кнопку в центре поверх изображения?

Ответы (1 шт):