bootstrap

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を組んでいきます。


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

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

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

ブラウザ幅768pxまではカラム6つ分の幅に、前に隙間がカラム3つ分空いています。767px以下ではカラム12個分に隙間無しとなります。

.col-4.offset-2

.col-4.offset-2

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

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;

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

デフォルト

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

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

display: block;

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

デフォルト(常にblock指定が適用)
画面サイズ576px以上でblock指定が適用
画面サイズ768px以上でblock指定が適用
画面サイズ992px以上でblock指定が適用
画面サイズ1200px以上でblock指定が適用

display: inline-block;

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

デフォルト(常にblock指定が適用)
画面サイズ576px以上でinline-block指定が適用
画面サイズ768px以上でinline-block指定が適用
画面サイズ992px以上でinline-block指定が適用
画面サイズ1200px以上でinline-block指定が適用

display: inline;

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

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

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

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

デフォルト(常に表示)
画面サイズ576px以上で表示 = 575px以下で非表示
画面サイズ768px以上で表示 = 767px以下で非表示
画面サイズ992px以上で表示 = 991px以下で非表示
画面サイズ1200px以上で表示 = 1199px以下で非表示

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

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

デフォルト(常に表示)
画面サイズ576px以上で非表示 = 575px以下で表示
画面サイズ768px以上で非表示 = 767px以下で表示
画面サイズ992px以上で非表示 = 991px以下で表示
画面サイズ1200px以上で非表示 = 1199px以下で表示

brタグで応用

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

デフォルト(常に改行)
br
画面サイズ575px以下で改行
br.d-inline.d-sm-none
画面サイズ767px以下で改行
br.d-inline.d-md-none
画面サイズ991px以下で改行
br.d-inline.d-lg-none
画面サイズ1199px以下で改行
br.d-inline.d-xl-none

上記は画面サイズ○○px以下で改行の例でしたが、逆のパターンも試してみます。

画面サイズ575px以下で改行トル
br.d-none.d-sm-inline
画面サイズ766px以下で改行トル
br.d-none.d-md-inline
画面サイズ991px以下で改行トル
br.d-none.d-lg-inline
画面サイズ1199px以下で改行トル
br.d-none.d-xl-inline

もっと複雑にパターンを試してみます。

画面サイズ575px以下で改行トル、576〜767pxで改行、768〜991pxで改行トル、992pxで改行
br.d-inline.d-sm-none.d-md-inline.d-lg-none
back to top