とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > グリッド

グリッド

等幅グリッド

下記の例では、画面を 5個のカラムに等分します。

Sample
A
B
C
D
E
Code
<div class="container-fluid">
  <div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
  </div>
</div>

.w-100 で width: 100% の div を入れることで、強制的に改行することができます。

Sample
A
B
C
D
E
Code
<div class="container-fluid">
  <div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="w-100"></div>
    <div class="col">D</div>
    <div class="col">E</div>
  </div>
</div>

カラム指定グリッド

カラム指定では、画面の横幅を 12個のカラムに分割し、そのうちの何個分を使用するかを指定します。下記の例では 6個分、3個分、3個分のカラムに区切って表示します。

Sample
col-6
col-3
col-3
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

カラムの合計が 12 を超える場合は複数行で表示します。

Sample
col-6
col-3
col-3
col-3
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

マルチデバイス対応

画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm 以上の時(576px以上の時)は 3分割となり、それより小さい場合は縦方向に並びます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-sm">A</div>
    <div class="col-sm">B</div>
    <div class="col-sm">C</div>
  </div>
</div>

下記の例では、sm サイズの時には 4:4:4 の割合で、md サイズ以上の場合は 2:8:2 の割合で、sm サイズより小さな場合は縦方向に並びます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-md-2">A</div>
    <div class="col-sm-4 col-md-8">B</div>
    <div class="col-sm-4 col-md-2">C</div>
  </div>
</div>

col-xs-* は定義されていません。代わりに col-* を使用します。

Code
<div class="container-fluid">
  <div class="row">
    <div class="col-4 col-md-2">A</div>
    <div class="col-4 col-md-8">B</div>
    <div class="col-4 col-md-2">C</div>
  </div>
</div>

縦方向のアライン(row)

align-items-* を指定することで、上寄せ、中央寄せ、下寄せすることができます。

Sample
A
B
A
B
A
B
Code
<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
  <div class="row align-items-center">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
  <div class="row align-items-end">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
</div>

縦方向のアライン(カラム)

align-self-* を指定することで、カラムをそれぞれ個別に上寄せ、中央寄せ、下寄せすることができます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col align-self-start">A</div>
    <div class="col align-self-center">B</div>
    <div class="col align-self-end">C</div>
  </div>
</div>

横方向のアライン

justify-content-* を用いることよより、横方向の配置を指定することができます。start は左寄せ、center は中央寄せ、end は右寄せ、around は左右に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。

Sample
A
B
A
B
A
B
A
B
C
A
B
C
Code
<div class="container-fluid">
  <div class="row justify-content-start">
    :
  </div>
  <div class="row justify-content-center">
    :
  </div>
  <div class="row justify-content-end">
    :
  </div>
  <div class="row justify-content-around">
    :
  </div>
  <div class="row justify-content-between">
    :
  </div>
</div>

カラム順序

order-* を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1~12 の値を指定することができます。order-first は最初、order-last は最後を指定します。order-sm-3 の様に、特定の画面サイズの時に適用するオーダーを指定することもできます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row>
    <div class="col order-1">A</div>
    <div class="col order-3">B</div>
    <div class="col order-2">C</div>
  </div>
</div>

オフセット

offset-* を指定することにより、カラム間に隙間を開けることができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 1の幅のオフセットを指定しています。offset-sm-1 の様に、特定の画面サイズの時にオフセットを指定することもできます。

Sample
A
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">A</div>
    <div class="col-5 offset-1">C</div>
  </div>
</div>

マージン

mr-auto は右側に、ml-auto は左側に最大限のマージンをとります。

Sample
A
B
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-3">A</div>
    <div class="col-3 ml-auto">B</div>
  </div>
</div>

入れ子

下記の様に、グリッドを入れ子にすることも可能です。

Sample
A
X
Y
Z
B
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">A
      <div class="row">
        <div class="col-4">X</div>
        <div class="col-4">Y</div>
        <div class="col-4">Z</div>
      </div>
    </div>
    <div class="col-6">B</div>
  </div>
</div>

ガーター無し

no-gutters を指定すると、カラムのガーター(左右のパディング)を無くすことができます。row に設定されていた -15px のマイナスマージンも削除されるため、全体の横幅は短くなります。

Sample
row
row
row
row, no-gutters
row, no-gutters
row, no-gutters
container, row
container, row
container, row
container, row, no-gutters
container, row, no-gutters
container, row, no-gutters
Code
<div class="row">
  :
</div>

<div class="row no-gutters">
  :
</div>

<div class="container-fluid">
  <div class="row">
    :
  </div>
</div>

<div class="container-fluid">
  <div class="row no-gutters">
    :
  </div>
</div>

Copyright (C) 2015-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/grid.html