blockquote-footer

bootstrap5.css

bootstrap5.css
.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}
bootstrap5.css
.blockquote-footer::before {
  /* 前に文字を追加する */
  content: "20140A0";
}

html bootstrap5 Sample

カードカラムによるレイアウト：card-columns

...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="card-columns">
    <!-- ★複数のカードをレイアウトするためにcard-columnsを使う、flex同様、自動整列される -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">ここに文章が入ります</p>
      </div>
    </div>
    <!-- カード02 -->
    <div class="card p-3">
      <blockquote class="blockquote mb-0 card-body">
        <p>カード02</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード03 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
    <!-- カード04 -->
    <div class="card bg-secondary text-white text-center p-3">
      <blockquote class="blockquote mb-0">
        <p>カード04</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small> 文章 </small> </footer>
      </blockquote>
    </div>
    <!-- カード05 -->
    <div class="card text-center">
      <div class="card-body">
        <h4 class="card-title">カード05</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
    <!-- カード06 -->
    <div class="card">
      <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="...">
    </div>
    <!-- カード07 -->
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">
        <p>カード07</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード08 -->
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">カード08</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
  </div>

引用の中央寄せ：blockquoteとtext-center

基本の引用文です。

文章の引用元が明示できます。
  <blockquote class="blockquote text-center">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用の右寄せ：blockquoteとtext-right

基本の引用文です。

文章の引用元が明示できます。
  <blockquote class="blockquote text-right">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用のフッター表記：blockquote-footer

基本の引用文です。

文章の引用元が明示できます。
  <blockquote class="blockquote">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>