カード 色変更
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
背景色・ボタンの色・一部テキストの色を白に変更
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<div class="row"> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-primary text-white"> <img class="card-img-bottom" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="ライトコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-primary</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-info">btn-info</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-secondary text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="スタンダードコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-secondary</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-success">btn-success</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-success text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-success</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-secondary">btn-secondary</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-danger text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-danger</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-warning">btn-warning</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-warning text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-warning</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-danger">btn-danger</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-info text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-info</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-light">btn-light</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-light"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-light</h4> <p class="card-text">テキストの色は変更していません。</p> <a href="#" class="btn btn-dark">btn-dark</a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card bg-dark text-white"> <img class="card-img-top" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt="プロフェッショナルコースのイメージ画像"> <div class="card-body"> <h4 class="card-title">背景色変更bg-dark</h4> <p class="card-text">テキストの色も変更しています。</p> <a href="#" class="btn btn-light">btn-light</a> </div> </div> </div> </div> |
以下のようなパネルの場合、「card-header」部分に「bg-」の各クラスを付けても効くようです。
border-primary
Primary card title
text-primary
|
1 2 3 4 5 6 7 |
<div class="card"> <div class="card-header bg-primary">border-primary</div> <div class="card-body"> <h4 class="card-title">Primary card title</h4> <p class="card-text">text-primary</p> </div> </div> |
枠線とテキスト色変更
border-primary
Primary card title
text-primary
border-secondary
Secondary card title
text-secondary
border-success
Success card title
text-success
border-danger
Danger card title
text-danger
border-warning
Warning card title
text-warning
border-info
Info card title
text-info
border-light
Light card title
テキスト色変更していません。
border-dark
Dark card title
text-dark
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<div class="row"> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-primary"> <div class="card-header">border-primary</div> <div class="card-body text-primary"> <h4 class="card-title">Primary card title</h4> <p class="card-text">text-primary</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-secondary"> <div class="card-header">border-secondary</div> <div class="card-body text-secondary"> <h4 class="card-title">Secondary card title</h4> <p class="card-text">text-secondary</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-success"> <div class="card-header">border-success</div> <div class="card-body text-success"> <h4 class="card-title">Success card title</h4> <p class="card-text">text-success</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-danger"> <div class="card-header">border-danger</div> <div class="card-body text-danger"> <h4 class="card-title">Danger card title</h4> <p class="card-text">text-danger</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-warning"> <div class="card-header">border-warning</div> <div class="card-body text-warning"> <h4 class="card-title">Warning card title</h4> <p class="card-text">text-warning</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-info"> <div class="card-header">border-info</div> <div class="card-body text-info"> <h4 class="card-title">Info card title</h4> <p class="card-text">text-info</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-light"> <div class="card-header">border-light</div> <div class="card-body"> <h4 class="card-title">Light card title</h4> <p class="card-text">テキスト色変更していません。</p> </div> </div> </div> <div class="col-lg-4 col-md-6 col-lg-3 m10-bottom"> <div class="card border-dark"> <div class="card-header">border-dark</div> <div class="card-body text-dark"> <h4 class="card-title">Dark card title</h4> <p class="card-text">text-dark</p> </div> </div> </div> </div> |
