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の余白)
入れ子表示 有効
オフセット表示 無効 有効
カラム表示順 無効 有効

基本

col-02
col-05
col-05

<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

入れ子
col-02
col-6
col-6

<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>

オフセットカラム

指定のカラム分ずらす

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

<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>

固定幅の場合
col-md-6
col-md-6

<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>

流動幅の場合
col-md-6
col-md-6

<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>

列クラスを2つ指定

DeskTopの時は6カラム表示、スマホの時は2カラム表示に変更

col-xs-2 col-md-6
col-xs-2 col-md-6

<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>

画像文字重ね

Card title

画像の上に重ねるテキスト

<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>

Follow me!