bootstrap4.css
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
bootstrap4.css
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
bootstrap4.css
h4, .h4 {
font-size: 1.5rem;
}
■カード:card:コンポーネント:基本的な使用例 divでcard、card-body、imgでcard-img-top、pでcard-title、card-text
<!-- カードの枠:card -->
<div class="card" style="max-width: 25rem;">
<!-- カード上部にレイアウトされる画像:card-img-top -->
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
<!-- カード本文:card-body -->
<div class="card-body">
<!-- カードタイトル:card-title -->
<h4 class="card-title">カードのタイトル</h4>
<!-- カードの内容文:card-text -->
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード:card:コンポーネント:カードの背景色と文字色の設定
背景色、文字色指定なし
カードのタイトル
カードの内容
背景色:bg-primary、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-secondary、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-success、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-danger、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-warning、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-info、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-light
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<div class="card-header">背景色、文字色指定なし</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-primary、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-secondary、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-success、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-danger、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-warning、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-info、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-light</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
<div class="card-header">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
■カード:card:コンポーネント:カードの背景色を除去する
ヘッダー初期設定の背景色
カードのタイトル
カードの内容
ヘッダー背景色の除去:bg-transparent
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<!-- ヘッダーの背景色 -->
<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 mb-3" style="max-width: 25rem;">
<!-- 背景色の除去:bg-transparent -->
<div class="card-header bg-transparent">ヘッダー背景色の除去:bg-transparent</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- 背景色の除去:bg-transparent -->
<div class="card-footer bg-transparent">フッター背景色の除去:bg-transparent</div>
</div>
■カード:card:コンポーネント:カードのボーダー色を変更する
カードのヘッダー
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<div class="card-header">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<!-- カード枠のボーダー色:青 border-primary -->
<div class="card border-primary mb-3" style="max-width: 25rem;">
<!-- ヘッダーのボーダー色:青 border-primary -->
<div class="card-header border-primary">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
■カード:card:コンポーネント:カードデッキによるレイアウトcard-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード:card:コンポーネント:カードグループによるレイアウト card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード:card:コンポーネント:カードカラムによるレイアウト card-columns
カード01
ここに文章が入ります
カード02
ここに文章が入ります
カード03
ここに文章が入ります
ここに文章が入ります
カード04
ここに文章が入ります
カード05
ここに文章が入ります
この文章はダミーです。
カード07
ここに文章が入ります
カード08
ここに文章が入ります
ここに文章が入ります
<div class="card-columns">
<!-- カード01 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">この文章はダミーです。</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card"> <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="..."> </div>
<!-- カード07 -->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> この文章はダミーです。 </small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
</div>
■カード:card:コンポーネント:カードとグリッドレイアウト
<div class="row">
<!-- カラム01 -->
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
<!-- カラム02 -->
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
</div>
■カード:card:コンポーネント:カードのヘッダーとフッター card-title
カードのヘッダー
カードのタイトル
カードの内容
<div class="card" style="max-width: 25rem;">
<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>
■カード:card:コンポーネント:カードの画像とテキストを重ね合わせる card-img-overlay
<div class="card">
<img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
■カード:card:コンポーネント:カード内にコンテンツを複合する
<div class="card" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- カード内のリストグループ:list-group-flush -->
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト01</li>
<li class="list-group-item">リスト02</li>
<li class="list-group-item">リスト03</li>
</ul>
<!-- カードの本文:card-body -->
<div class="card-body">
<a href="#" class="card-link">カード内リンク</a>
<a href="#" class="card-link">カード内リンク</a>
</div>
</div>
■カード:card:コンポーネント:カードにナビゲーションを組み込む ピル型のナビゲーション
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- ピル型のナビゲーション:card-header-pills -->
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a> </div>
</div>
■カード:card:コンポーネント:カードにナビゲーションを組み込む タブ型のナビゲーション
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- タブ型のナビゲーション:card-header-tabs -->
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード:card:コンポーネント:カードのサイズを変更する Sizingユーティリティクラスw-75
<!-- Sizingユーティリティクラス:w-{%値}による幅指定 -->
<div class="card w-75">
<div class="card-body">
<h4 class="card-title">カードの幅指定:w-75</h4>
<p class="card-text">カードの幅が親要素の幅の75%になります。</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード:card:コンポーネント:カード内のテキストを左寄せ、中央、右寄せ
<!-- 標準(左寄せ) -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<h4 class="card-title">標準(左寄せ)</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- 中央寄せ:text-center -->
<div class="card text-center" style="max-width: 25rem;">
<div class="card-body">
<h4 class="card-title">中央寄せ:text-center</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- 右寄せ:text-right -->
<div class="card text-right" style="max-width: 25rem;">
<div class="card-body">
<h4 class="card-title">右寄せ:text-right</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■テキスト:Text:ユーティリティ:h1クラス~h6クラスで文字の大きさを変える
h1クラスの標準と同じになる
h2クラスの標準と同じになる
h3クラスの標準と同じになる
h4クラスの標準と同じになる
h5クラスの標準と同じになる
h6クラスの標準と同じになる
<p class="h1">h1クラスの標準と同じになる</p>
<p class="h2">h2クラスの標準と同じになる</p>
<p class="h3">h3クラスの標準と同じになる</p>
<p class="h4">h4クラスの標準と同じになる</p>
<p class="h5">h5クラスの標準と同じになる</p>
<p class="h6">h6クラスの標準と同じになる</p>
■テキスト:Text:ユーティリティ:text-mutedクラス
主タイトル キャプチャー 副タイトル(small.text-muted)
<h4>主タイトル <small class="text-muted">キャプチャー 副タイトル(small.text-muted)</small></h4>
■アラート:alert:コンポーネント:アラート内にコンテンツを追加する
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">アラートのタイトル(h4)</h4>
<p>アラートの文字</p>
<hr>
<p>アラート内のリンクを見やすくする</p>
<p class="mb-0"><a href="#" class="alert-link">リンク alert-primary</a></p>
<p class="mb-0"><a href="#">リンク alert-primary</a></p>
</div>
■ナビゲーションバー:navbar:コンポーネント:サブコンポーネントを水平中央に配置
コンテンツ
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22" aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav22">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</div>
</nav>
<div class="container bg-light">
<h4>コンテンツ</h4>
<p>コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。</p>
</div>
■ナビゲーションバー:navbar:コンポーネント:外部コンテンツの表示/非表示
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">折り畳みコンテンツ</h4>
<span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
</nav>