ぱそくま ろご
開発 > Bootstrap > Bootstrap カード

Bootstrap カード

Bootstrap カード

カードは柔軟で拡張性の高いコンテンツコンテナです。例えば、求人広告のように1ページにいくつもの求人募集を掲載することができます。 ヘッダーやフッターをつけたりと結構柔軟になんでも出来ます。例えば以下のようなものがカードになります。

Bootstrap カードの表示

エンジニア募集

楽しいサイトを一緒に開発しませんか?

株式会社ぱそくまでは新しい仲間を募集しています....

詳しくはこちらへ


カードの構成

カードの基本的な構成は下表の通りです。(あくまでも、基本ですので)

カードの構成
タグとクラス 説明
div.card カードの大枠です。この中にコンテンツが入ります。
div.card-header カードのヘッダー部分です。
img.card-img-*** カード内の画像です。***には画像の配置箇所によりtop、bottom、overlayを指定します。(例:card-img-top)
div.card-block カード内のコンテンツ部分です。さらにこの中に.card-titleや.card-textなどが入ります。
div.card-footer カードのフッター部分です。

全部あわせるとこんな感じになります。

例:Bootstrap カード - 2


<div class="card">
  <div class="card-header">
    ヘッダー部分
  </div>

  <img class="card-img-top" src="/img/dev/web/bootstrap/arrow_icon.png">

  <div class="card-block">
    <h4 class="card-title">コンテンツタイトル</h4>
    <p class="card-text">コンテンツの中身</p>
  </div>

  <div class="card-header">
    フッター部分
  </div>

</div>

Bootstrap カードの表示 - 2

ヘッダー部分

コンテンツタイトル

コンテンツの中身

フッター部分

ちなみに、リストグループなんかも入れることができます。

例:Bootstrap カード - 2


<div class="card">
  <div class="card-header">
    ヘッダー部分
  </div>

  <img class="card-img-top" src="/img/dev/web/bootstrap/arrow_icon.png">

  <div class="card-block">
    <h4 class="card-title">コンテンツタイトル</h4>
    <p class="card-text">コンテンツの中身</p>
  </div>

  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>

  <div class="card-header">
    フッター部分
  </div>

</div>

Bootstrap カードの表示 - 2

ヘッダー部分

コンテンツタイトル

コンテンツの中身

  • リスト1
  • リスト2
  • リスト3
フッター部分