とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. グリッド

等幅グリッド

.row や .col を用いて、画面を N個のカラムに等分することができます。

<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 を入れることで、強制的に改行することができます。

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

カラム指定グリッド

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

<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 を超える場合は複数行で表示します。

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

マルチデバイス対応

.col-{breakpoint} や .col-{breakpoint}-{n} を用いて、画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm (Small:スマホサイズ)以上の時は 3分割となり、それより小さい場合は縦方向に並びます。

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

.col-{breakpoint}-{n} を用いて、画面サイズに応じてカラムの割合を変更することができます。下記の例では、sm (Small:スマホサイズ)以上の時には 4:4:4 の割合で、md (Medium:タブレットサイズ)以上の場合は 2:8:2 の割合で、sm サイズより小さな場合は縦方向に並びます。

<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-{n} は定義されていません。代わりに .col-{n} を使用します。詳細は ブレークポイント を参照してください。

自然幅カラム

.col-auto, .col-{breakpoint}-auto は、カラムの横幅を、カラムの内容に応じた自然な大きさにします。

<div class="container-fluid">
  <div class="row">
    <div class="my-box col-3">col-3</div>
    <div class="my-box col-auto">col-auto</div>
    <div class="my-box col-3">col-3</div>
  </div>
</div>

縦方向のアライン(row)

.align-items-* を用いて、行(row)を上寄せ、中央寄せ、下寄せすることができます。

<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-* を用いて、カラム(col)を上寄せ、中央寄せ、下寄せすることができます。

<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 はカラム間に適度なスペースを入れます。

<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-*, .order-{breakpoint}-* を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1～12 の値を指定することができます。.order-first は最初、.order-last は最後を指定します。

<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-{n}, .offset-{breakpoint}-{n} を指定することにより、カラム間に隙間を開けることができます。{n} には 1～11 の値を指定することができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 1の幅のオフセットを指定しています。

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

マージン

.mr-{breakpoint}-auto, .ml-{breakpoint}-auto は左側や右側に最大限のマージンをとります。mr は Margin Right を、ml は Margin Left を意味します。

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

入れ子

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

<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 のマイナスマージンも削除されるため、全体の横幅は短くなります。

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

---