Как сделать так, чтобы другой ряд появился внутри другого ряда в Bootstrap 4?

Question

Я пытаюсь создать изображение заголовка с текстом, расположенным внизу изображения.Каждый раз, когда я создаю строку и столбцы, текст просто переходит на другую строку.Проблема в том, что я пытаюсь создать изображение заголовка, в котором есть два экземпляра текста.Я испортил абсолютную позицию, и это тоже не работает.Я также пробовал возиться со свойствами d-flex, align-items-end и выравнивать содержимое ...

Я знаю, что это легко исправить, я просто пытаюсь понять, как заставить текст отображатьсявнизу.

Так как бы вы создали изображение ниже для примера?

Заголовок изображения

<div class="fluid-container" style="width: 100%">
  <div class="row" style="">
    <div class="col"> <img class="card-img-top" src="images/electrical-repair.png" width="100%" height="auto" alt=""/>
      <h4 class="text-danger d-flex justify-content-center bannerText text-center">Premiere Commercial Electrical Services in the Northwest</h4>
    </div>
  </div>

Answer 1

Вот пример, который объединяет некоторый пользовательский код и загрузчик. Возможно, вам придется изменить размер или показать в полноэкранном режиме, надеюсь, это поможет.

body {
  padding: 0;
  margin: 0;
}

.full-home {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-position: 50% 50%\9 !important;
  background-size: cover;
  min-height: 100vh;
  position: absolute;
}

.hero-wrapper {
  position: relative;
  z-index: 1;
  height: 100vh;
}

.hero-wrapper-inner {
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.hero-wrapper-bottom {
  padding: 10px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');"></div>
<div class="hero-wrapper">
  <div class="container hero-wrapper-inner">
    <div class="row">
      <div class="col-md-12">
        <h1>Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="hero-wrapper-bottom">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</div>