Bootstrap5でCardsを利用して画像や文字を重ねる方法 - Qiita

はじめに 備忘録 Bootstrap5で画像や文字を重ねる方法の一例です。 こんな風にもできるんだなーくらいに思ってください。 どなたかのお役に立てれば幸いです。 実装方法 Cardsの「card-img-overlay」を使います。 cardクラスの中身に「card-img-overlayのみ」を書くことによって背景に設定した色をそのまま表示することができます。 リファレンスには、 コンテンツは画像の高さを超えないようにしてください。もしコンテンツが画像より大きい場合、画像をはみだしてコンテンツが表示されます。 とあるので、これを逆手に取ります。 つまりcardクラスは使いますが、card-img-overlayがわざとcardの範囲をはみ出すようにすることで、自由にレイアウトができるようにしています。 また、cardクラスと一緒にborder-0クラスを指定することで、cardクラスに