Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

bootstrap4のグリッドシステムを理解する

More than 3 years have passed since last update.

いまだ正式版が公開されないままのbootstrap4。
そのグリッドシステムについて、bootstrap3と何が違うかや新機能について理解を深めようと思います。

本家ドキュメント(英語)

大きな変更 -> flexboxの採用

グリッドシステムはflexboxを採用したので、より柔軟なサイズを指定しないcolが導入されました。
今まではcol-sm-4col-md-3などで適用するブレイクポイントとサイズの指定を行なっております。
bootstrap4ではこの指定を残しつつ、新たにサイズを指定しないcolの指定が可能になります。
このcolrowでラップされている内容のcolの個数によって自動的に幅を決定します。
また、col-6のように従来と同様に幅を12分割のうちの割合として指定できます。
従来では不可能だった奇数割合をさらに2分割といったことも可能になります。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

上記例の2段目では5割の余白である7割分を2分割しております。
この仕様により、より柔軟なレイアウトが可能になります。

各ブレイクポイントにおいてもcol-md-autoのように-auto指定により明示的にcolと同様の設定が可能です。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

各行の幅を統一したい場合はw-100を使用できるとありますが、空div前提なのはちょっと問題がありそうです。

 <div class="row">
   <div class="col">col</div>
   <div class="col">col</div>
   <div class="w-100"></div>
   <div class="col">col</div>
   <div class="col">col</div>
 </div>

大きな変更その2 -> セルの位置調整

縦位置の調整

各行に対しての縦位置はalign-items-によって設定します。
上寄せ <div class="row align-items-start">
中央寄せ<div class="row align-items-center">
下寄せ <div class="row align-items-end">

それぞれのセルの縦位置指定はalign-self-によって指定します。

上寄せ <div class="col align-self-start">
中央寄せ<div class="col align-self-center">
下寄せ <div class="col align-self-end">

横位置の指定

セルの分割割合が12に足りない時のセルの配置指定もあります。

左寄せ <div class="row justify-content-start">
中央寄せ<div class="row justify-content-center">
右寄せ <div class="row justify-content-end">
余白含み均等割 <div class="row justify-content-around">
余白含まず均等割<div class="row justify-content-between">

ネガティブマージンの除去

bootstrap4のグリッドシステムは、rowでネガティブマージンを設定し、各セルでパディングを指定することで余白を設定しております。no-guttersはそのマージンとパディングを削除します。余白を含まないパネルデザインを作成するときなどに使用するかと思います。

paddingの変更はsassで

各セルごとの隙間はsassで一括変更可能になりました。

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

$grid-columnsがカラム数 $grid-gutter-width-baseがセルごとの隙間です。

大きな変更点は以上だと思います。

Nerosui777
富山県のWEBプログラマー プログラム教育にも力を入れてます。
https://floatingweed.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away