- 「Bootstrap4」のおすすめ本:これ一冊で十分
- 画像の上に文字を重ねる
- 画像スライダー(カルーセル)のサンプルコード
- GoogleMapを埋め込む方法
- 文字サイズを小さくしたり、大きくしたりする方法
- クラス一覧(アルファベット順)
- jumbotronクラスの角丸をなくす方法
- containerクラスの定義(設定)部分
- メニュークリック時に開いたままのメニューを閉じたい
- Card 画像が上
- Card 画像が下
- Card ヘッダーとフッター付き
ヘッダーとフッター付き
<div class="card" style="max-width: 20rem;">
<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" style="max-width: 20rem;">
<div class="card-body">
<h4 class="card-title">
カードタイトル
</h4>
<p class="card-text">
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスサ
</p>
</div>
<img class="card-img-bottom" src="img/004/image.jpg" alt="">
</div>
画像が上
<div class="card" style="max-width: 20rem;">
<img class="card-img-top" src="img/004/image.jpg" alt="">
<div class="card-body">
<h4 class="card-title">
カードタイトル
</h4>
<p class="card-text">
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>
</div>
</div>