Html 如何使引导4中的另一行出现在另一行的内部？

我正在尝试创建一个标题图像，其中一些文本位于图像底部。但每次我创建行和列时，文本都会转到另一行。问题是，我试图创建一个标题图像，其中包含两个文本实例。我弄乱了绝对位置，这也不起作用。我还尝试过处理d-flex属性、对齐项目结尾和对齐内容

我知道这是一个简单的解决办法，我只是想弄清楚如何使文本显示在底部

那么，您将如何创建下面的图像作为示例

西北部首屈一指的商业电气服务

下面是一个结合了一些自定义代码和引导的示例。您可能需要调整大小或显示在全屏视图，希望这有帮助

正文{
填充：0；
保证金：0；
}
.满座{
宽度：100%；
背景重复：无重复；
背景位置：50%50%；
背景位置：50%50%\9！重要；
背景尺寸：封面；
最小高度：100vh；
位置：绝对位置；
}
.英雄包装{
位置：相对位置；
z指数：1；
高度：100vh；
}
.hero wrapper inner{
保证金：0；
背景：黄色；
位置：绝对位置；
最高：50%；
左：50%；
保证金权利：-50%；
转换：转换（-50%，-50%）
}
.英雄包装袋底部{
填充：10px0；
宽度：100%；
位置：绝对位置；
底部：0；
背景色：rgba（0,0,0,0.8）；
颜色：#fff；
}

标题
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

<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>