Bootstrap-vueで画像の上にテキストを表示する方法 How to Text overlay on Image

概要
- bootstrap-vueを利用して、画面一杯の画像の上に文字を配置するスニペット
- あまりピッタリくるドキュメントがなかったので記載しています
- 使い方間違っていたらそっと教えてください
- 下記のような、トップ画面によくありそうなイメージです
スニペット
全貌
<!-- 画像自体は、画面幅一杯に表示したいので、flued指定 -->
<b-container fluid class="px-0">
<b-row>
<b-col md="12">
<b-carousel fade>
<b-carousel-slide>
<!-- カルーセルさせる画像をb-cardで指定 -->
<!-- かつ、overlayを指定 -->
<template v-slot:img>
<b-card
overlay
class="w-100"
img-src="images/1.jpg"
img-height="420"
text-variant="white"
>
<!-- この内部は自由 -->
<b-container>
<b-row>
<b-col md="12">
<h3 class="mt-3">
<small>2020.1.11-2.10</small>
<p class="mt-1 display-4">
Some Text Title
</p>
</h3>
<p class="mt-5">Some text here.</p>
<b-button size="lg">Some Link</b-button>
</b-col>
</b-row>
</b-container>
</b-card>
</template>
</b-carousel-slide>
</b-carousel>
</b-col>
</b-row>
</b-container>
以下の様にカルーセルのslotにb-cardを組み合わせて使うのがミソですね。 かつoverlayを指定しているのもポイント。
<b-carousel-slide>
<template v-slot:img>
<b-card
overlay
class="w-100"
img-src="images/1.jpg"
img-height="420"
text-variant="white"
>
(省略)
よくあるパターンだと思うので、Bootstrap-vueのカルーセルのサンプルにあってもほしかったです。
皆さんの助けになれば幸いです。