カード 基本
2021-06-02
参考サイト1:https://webst8.com/blog/bootstrap4-card/
参考サイト2:https://webnetamemo.com/coding/bootstrap4/201711116162
参考サイト3:http://www.tohoho-web.com/bootstrap/card.html
「.well」「.panel」「.thumbnail」といったクラスがbootstrap4では廃止され「.card」クラスに統一されました。
コメントアウトで説明を入れています。
WordPress側が勝手にbrやpタグを入れてしまいレイアウトが崩れる場合があります。
|
1 2 3 4 5 6 7 8 |
<div class="card" style="width: 20rem;"><!-- 全体を.cardで囲む --> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="card"><!-- imgタグに.card-img-top --> <div class="card-body"><!-- コンテンツ部分を.card-bodyで囲む--> <h4 class="card-title">スダンダードコース</h4><!-- コンテンツ内タイトルに.card-title--> <p class="card-text">ホームページ作成・Web集客を一通り習得したい方向けです。</p><!-- コンテンツ内説明に.card-text--> <a href="#" class="btn btn-primary">btn-primary</a><!-- ボタンを作る場合.btn .btn-色名--> </div> </div> |
上の例は幅をstyleで指定していますが、.rowでレスポンシブにもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="row"> <div class="col-lg-4"> <div class="card"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="card"> <div class="card-body"> <h4 class="card-title">スダンダードコース</h4> <p class="card-text">ホームページ作成・Web集客を一通り習得したい方向けです。</p> <a href="#" class="btn btn-primary">btn-primary</a> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="card"> <div class="card-body"> <h4 class="card-title">スダンダードコース</h4> <p class="card-text">ホームページ作成・Web集客を一通り習得したい方向けです。</p> <a href="#" class="btn btn-primary">btn-primary</a> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt="card"> <div class="card-body"> <h4 class="card-title">スダンダードコース</h4> <p class="card-text">ホームページ作成・Web集客を一通り習得したい方向けです。</p> <a href="#" class="btn btn-primary">btn-primary</a> </div> </div> </div> </div> |
