Bootstrap4要素集まとめ① | ブレイクポイント、コンテナ、offset、表示非表示、br

自分用のメモ。
IE11の対応もしたいので、Bootstrap4を使い続ける日々。
まだマスターできてないBootstrap4の確認も兼ねて、cssで調整した各要素も含めたテンプレートページ。

実装までのCSSやJS等の設置方法については公式サイトを参照。

Bootstrap4のブレイクポイント

（xs）	sm	md	lg	xl
デフォルト	画面サイズ 576px〜	画面サイズ 768px〜	画面サイズ 992px〜	画面サイズ 1200px〜

コーディング時、PC→SPの順に構築していくと混乱してくるので、モバイルファーストの考え方で小さい画面の状態から大きい画面の状態へと構築していくとよいのですが、チームのやり方によるので事前にすり合わせておいた方がいいでしょう。

Bootstrap3からの変更点

ほとんどの人には関係無いと思われますが、古いサイトを改修する際に以前はBootstrap3で作成していた案件に出会すことがあります。
Bootstrap3の時点ではモバイルファーストの時代ではなかったこともあり（？）、576pxでのブレイクポイントは設定されていません。

xs	sm	md	lg
画面サイズ 767px未満	画面サイズ 768px〜	画面サイズ 992px〜	画面サイズ 1200px〜

class指定だけ見るとxlが無いのですが、それ以外はサイズ的に一段階ずつズレて設定されることになります。
また、Bootstrap4ではデフォルトで.col-12、スマホサイズで.col-sm-12のようになる箇所は、Bootstrap3では.col-xs-12となっていました。

コンテナ

.container

画面幅によって左右に余白が付く。スマホサイズになると余白は消え、幅100%になる。
ブレイクポイントごとのコンテナの幅は以下のとおり。

（xs）デフォルト	sm 576px〜	md 768px〜	lg 992px〜	xl 1200px〜
コンテナ幅幅100% 余白無し	コンテナ幅 540px	コンテナ幅 720px	コンテナ幅 960px	コンテナ幅 1140px

.container-fluid

コンテナが常に画面幅100%、余白無しになる。

Bootstrap4.4以降に追加されたcontainer

.container-xl

普段は.containerと同じ幅。
xl以下（〜1199px）で.container-fluid化。

.container-lg

普段は.containerと同じ幅。
lg以下（〜991px）で.container-fluid化。

.container-md

普段は.containerと同じ幅。
md以下（〜767px）で.container-fluid化。

.container-sm

.containerと同じ。
Demo page

このブログの投稿ページ内は.containerの幅をカスタマイズしているため、デフォルトの状態で.containerおよび.container-fluidの幅を確認できるデモを別ページで表示します。

colとoffset

Bootstrapは横に12分割されたグリッドシステムです。コンテナの中に.rowという行の中に.colを組んでいきます。

Grid system

Grid system(グリッドシステム)は,12カラムのシステムと,5段階のレスポンシブ,Sassとmixin,いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です

なんて基本的な説明は↑の公式サイトに任せて、隙間用のclassのメモです。

Bootstrap4では.colに.offset-ブレイクポイント-左側に開けたい隙間のcol分の数値を添えます。
（このブログにアレンジで調整したCSSの影響で.rowのpaddingがおかしいです）
Bootstrap3のときは例えば.col-md-offset-6のようなclass指定でしたが、Bootstrap4からはclassが変更になっています。

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

ブラウザ幅768px以上ではcol6つ分の幅に、前に隙間がcol3つ分空いています。767px以下ではcol12個分に隙間無しとなります。

.col-4.offset-2

こちらは全てのブラウザ幅でcol4つ分の幅に、前に隙間がcol2つ分空きます。

.col-8.offset-2.col-md-6.offset-md-0

アレンジ例です。ブラウザ幅768px以上ではcol6つ分の幅に、前に隙間が無しのため、2カラムになっています。767px以下にするとcol8個分に前に隙間がcol2つ分となり、段違いとなります。

colとpadding

これはメモとして。

<div class="row">
  <div class="col-12 col-md-6 pr-md-0" style="background: #FAFAE1">.col-12.col-md-6.pr-md-0</div>
  <div class="col-12 col-md-6 pl-md-0" style="background: #D3BCA4">.col-12.col-md-6.pl-md-0</div>
</div>

.col-12.col-md-6.pr-md-0

.col-12.col-md-6.pl-md-0

ブラウザ幅768px以上で横並びになる2つのcolの間のpaddingが0となり、767px以降でcolは縦並びになり左右のpaddingの値がデフォルトに戻ります。
ここでは便宜上テキストでやっていますが、画像をくっ付けて配置したりで使うかな。

display

display: none;

非表示指定。下記ではブラウザ幅による非表示反映の例を示しています（ブラウザ幅を伸び縮みさせてみてください）。

デフォルト

d-none

当たり前ですが、display:none;が指定されたので非表示となっています。

画面サイズ576px以上で非表示

d-sm-none

画面サイズ768px以上で非表示

d-md-none

画面サイズ992px以上で非表示

d-lg-none

画面サイズ1200px以上で非表示

d-xl-none

display: block;

雑な言い方をすると、display:none;の逆。下記ではわかりやすくするためにd-inline-blockも指定してブラウザ幅ごとの表示切り替えさせています。

デフォルト（常にblock指定が適用）

d-inline-block d-block

画面サイズ576px以上でblock指定が適用

d-inline-block d-sm-block

画面サイズ768px以上でblock指定が適用

d-inline-block d-md-block

画面サイズ992px以上でblock指定が適用

d-inline-block d-lg-block

画面サイズ1200px以上でblock指定が適用

d-inline-block d-xl-block

display: inline-block;

display:block;とは逆に、d-inline-blockの方にブレイクポイントの指定を入れます。
スマホサイズでボタンを大きくしたい場合などに使いそうですね。

デフォルト（常にblock指定が適用）

d-block d-inline-block

画面サイズ576px以上でinline-block指定が適用

d-block d-sm-inline-block

画面サイズ768px以上でinline-block指定が適用

d-block d-md-inline-block

画面サイズ992px以上でinline-block指定が適用

d-block d-lg-inline-block

画面サイズ1200px以上でinline-block指定が適用

d-block d-xl-inline-block

display: inline;

inline-blockとの違いがしばらく理解できなかったのですが、spanタグやstrongタグやiタグやaタグなど、行の一部の扱いなのがinline。行の一部なのでinline-blockと違って、高さ・横幅・上下のmarginは指定できない。
そういえば、aタグをボタンやカード状にしたいときは、inline-blockを当てて形作ってましたね。

レスポンシブ時の表示・非表示

特定の画面幅以下で非表示にする

レスポンシブ時の表示切り替えの場合、○○px以上で適用させるというより、○○px以下で適用させたいという考え方をする場合が多いので、忘れないようまとめておきます。
ブラウザの横幅を伸び縮みさせてみてください。

デフォルト（常に表示）

画面サイズ576px以上で表示＝ 575px以下で非表示

d-none d-sm-block

画面サイズ768px以上で表示＝ 767px以下で非表示

d-none d-md-block

画面サイズ992px以上で表示＝ 991px以下で非表示

d-none d-lg-block

画面サイズ1200px以上で表示＝ 1199px以下で非表示

d-none d-xl-block

特定の画面幅以下で表示させる

今度は逆に表示させるパターン。
d-blockとd-noneを組み合わせます。d-noneの方にブレイクポイントの指定を加えます。

デフォルト（常に表示）

画面サイズ576px以上で非表示＝ 575px以下で表示

d-block d-sm-none

画面サイズ768px以上で非表示＝ 767px以下で表示

d-block d-md-none

画面サイズ992px以上で非表示＝ 991px以下で表示

d-block d-lg-none

画面サイズ1200px以上で非表示＝ 1199px以下で表示

d-block d-xl-none

brタグで応用

前述の例は要素を分かりやすくするためd-blockを使用していましたが、
スマホ表示ではbr改行をする、PC表示のみbr改行をするといった場合、
d-noneとd-inlineを組み合わせます。d-inlineの方にブレイクポイントの指定を加えます。
d-blockを使うとFireFoxで1行丸ごと空白が入ってしまいます。