Bootstrap グリッド
設定方法
.containerで最大表示枠を設定
.rowで行を設定
.col-**-**でカラム数を設定(カラム数の合計は12に)
| Extra small devicesスマートフォン | Small devicesタブレット | Medium devicesデスクトップPC | Large devicesデスクトップPC | |
|---|---|---|---|---|
| ブラウザ表示幅 | 768px未満 | 768px～991px | 992px～1199px | 1200px以上 |
container最大幅 |
auto | 750px | 970px | 1170px |
| Class名称 | col-xs-** |
col-sm-** |
col-md-** |
col-lg-** |
| カラム数 | 12 | |||
| カラム最大幅 | auto | 60px | 78px | 95px |
| カラム余白 | 30（左右に15pxの余白） | |||
| 入れ子表示 | 有効 | |||
| オフセット表示 | 無効 | 有効 | ||
| カラム表示順 | 無効 | 有効 | ||
基本
<div class=”container”>
<div class=”row”>
<div class=”col-xs-2″>col-02</div>
<div class=”col-xs-5″>col-05</div>
<div class=”col-xs-5″>col-05</div>
</div>
</div>
COL
入れ子
<div class=”container”>
<div class=”row”>
<div class=”col-xs-2″>col-02</div>
<div class=”col-xs-10″>
<div class=”col-xs-6″>col-6</div>
<div class=”col-xs-6″>col-6</div>
</div>
</div>
</div>
オフセットカラム
指定のカラム分ずらす
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4 col-md-offset-4″>.col-md-4 .col-md-offset-4</div>
</div>
<div class=”row”>
<div class=”col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
<div class=”col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
</div>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>.col-md-6 .col-md-offset-3</div>
</div>
固定幅の場合
<div class=”container”>
<div class=”row”>
<div class=”col-xs-6″>col-md-6</div>
<div class=”col-xs-6″>col-md-6</div>
</div>
</div>
流動幅の場合
<div class=”container-fluid”>
<div class=”row-fluid”>
<div class=”col-xs-6″>col-md-6</div>
<div class=”col-xs-6″>col-md-6</div>
</div>
</div>
列クラスを２つ指定
DeskTopの時は6カラム表示、スマホの時は2カラム表示に変更
<div class=”container”>
<div class=”row”>
<div class=”col-xs-2 col-md-6″>col-xs-2 col-md-6</div>
<div class=”col-xs-2 col-md-6″>col-xs-2 col-md-6</div>
</div>
</div>
<style>
div {
border:0.5px solid #888;
}
</style>
基本
ROW
<div class=”container”>
<div class=”row”>
～
</div>
</div>
中央寄せ
<div class=”container”>
<div class=”row justify-content-center”>
～
</div>
</div>
カード
基本
<div class=”card”>
<div class=”card-header”>
カードヘッダー
</div>
<div class=”card-body”>
<div class=”card-title”>カードタイトル</div>
<div class=”card-subtitle mb-2 text-muted”>カードサブタイトル</div>
<p class=”card-text”>カードテキスト</p>
<a href=”#” class=”card-link”>カードリンク</a>
</div>
<div class=”card-footer”>
カードフッター
</div>
</div>
画像上部/下部
テキスト
<div class=”card” style=”width: 20rem;”>
<img class=”card-img-top” src=”～” style=”width:100px;”>
<div class=”card-body”>
<p class=”card-text”>テキスト</p>
</div>
<img class=”card-img-buttom” src=”～” style=”width:100px;”>
</div>
画像文字重ね
<div class=”card bg-dark text-white” style=”width: 20rem;”>
<img class=”card-img” src=”～” style=”width:100px;”>
<div class=”card-img-overlay”>
<div class=”card-title”>Card title</div>
<p class=”card-text”>画像の上に重ねるテキスト</p>
</div>
</div>
