カードレイアウト

2021-07-01

参考サイト1:https://webst8.com/blog/bootstrap4-card/

参考サイト2:https://webnetamemo.com/coding/bootstrap4/201711116162

参考サイト3:http://www.tohoho-web.com/bootstrap/card.html

参考サイト4:https://getbootstrap.jp/docs/4.2/components/card/

参考サイト5:https://www.webdesignleaves.com/pr/plugins/bootstrap4_04.html

カードグループ

複数のカードを横に並べたカードグループを表示します。
任意の位置でカラム落ちさせるのは、標準のクラスでは難しいようです。
rowなどを使った方が良い場合もあると思います。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

カードデッキ

複数のカードを横に隙間を開けて並べたカードデッキを表示します。
任意の位置でカラム落ちさせるのは、標準のクラスでは難しいようです。
rowなどを使った方が良い場合もあると思います。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

カードカラム

カードをカラム表示します。
カラム数は画面の幅によって適度に変化しますが、CSS の columns を指定することにより変更可能です。bootstrap4の該当するクラスを編集する必要があるようです。

Card title 1

text Sample text Sample text Sample text Sample

Card 2 text Sample text Sample text Sample text Sample

Someone famous in Source Title

Card title 3

text Sample text Sample text Sample text Sample

Last updated 3 mins ago

Card 4 text Sample text Sample text Sample text Sample

Someone famous in Source Title

Card title 5

text Sample text Sample text Sample text Sample

Last updated 3 mins ago

Card 6 text Sample text Sample text Sample text Sample

Someone famous in Source Title

Card title 7

text Sample text Sample text Sample text Sample

Last updated 3 mins ago

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title 1</h4>
      <p class="card-text">text Sample text Sample text Sample text Sample</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Card 2 text Sample text Sample text Sample text Sample</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title 3</h4>
      <p class="card-text">text Sample text Sample text Sample text Sample</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Card 4 text Sample text Sample text Sample text Sample</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h4 class="card-title">Card title 5</h4>
      <p class="card-text">text Sample text Sample text Sample text Sample</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Card 6 text Sample text Sample text Sample text Sample</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title 7</h4>
      <p class="card-text">text Sample text Sample text Sample text Sample</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

<h4 class="card-title">Card title 1</h4>

<p class="card-text">text Sample text Sample text Sample text Sample</p>

</div>

<p>Card 2 text Sample text Sample text Sample text Sample</p>

Someone famous in <cite title="Source Title">Source Title</cite>

</small>

</footer>

</blockquote>

</div>

<h4 class="card-title">Card title 3</h4>

<p class="card-text">text Sample text Sample text Sample text Sample</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

<p>Card 4 text Sample text Sample text Sample text Sample</p>

<small>

Someone famous in <cite title="Source Title">Source Title</cite>

</small>

</footer>

</blockquote>

</div>

<h4 class="card-title">Card title 5</h4>

<p class="card-text">text Sample text Sample text Sample text Sample</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

</div>

<p>Card 6 text Sample text Sample text Sample text Sample</p>

Someone famous in <cite title="Source Title">Source Title</cite>

</small>

</footer>

</blockquote>

</div>

<h4 class="card-title">Card title 7</h4>

<p class="card-text">text Sample text Sample text Sample text Sample</p>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

カード画像配置

カードその他

カード レイアウト

カードグループ

Card title

Card title

Card title

カードデッキ

Card title

Card title

Card title

カードカラム

Card title 1

Card title 3

Card title 5

Card title 7

関連記事

カードレイアウト