■カード:card:コンポーネント:カードカラムによるレイアウト card-columns

...

カード01

ここに文章が入ります

カード02

ここに文章が入ります

ここに文章が入ります
...

カード03

ここに文章が入ります

ここに文章が入ります

カード04

ここに文章が入ります

ここに文章が入ります

カード05

ここに文章が入ります

この文章はダミーです。

...

カード07

ここに文章が入ります

この文章はダミーです。

カード08

ここに文章が入ります

ここに文章が入ります

  <div class="card-columns">
    <!-- カード01 -->
    <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>
■カード:card:コンポーネント:カード内のテキストを左寄せ、中央、右寄せ

標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-right

カードの内容

ボタン
  <!-- 標準(左寄せ) -->
  <div class="card" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">標準(左寄せ)</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 中央寄せ:text-center -->
  <div class="card text-center" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">中央寄せ:text-center</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 右寄せ:text-right -->
  <div class="card text-right" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">右寄せ:text-right</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>