Bootstrap4 入門

ヘッダーとフッター付き

<div class="card" style="max-width: 20rem;">
  <div class="card-header">
    カードヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">
      カードタイトル
    </h4>
    <p class="card-text">
      サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
    </p>
  </div>
  <div class="card-footer">
    カードフッター
  </div>
</div>

画像が下

<div class="card" style="max-width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">
      カードタイトル
    </h4>
    <p class="card-text">
      サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスサ
    </p>
  </div>
  <img class="card-img-bottom" src="img/004/image.jpg" alt="">
</div>

画像が上

<div class="card" style="max-width: 20rem;">

  <img class="card-img-top" src="img/004/image.jpg" alt="">
  <div class="card-body">
    <h4 class="card-title">
      カードタイトル
    </h4>
    <p class="card-text">
      サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
    </p>
  </div>
</div>