bootstrap

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

Pocket
LINEで送る

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

Bootstrap4のブレイクポイント

(xs) sm md lg xl
デフォルト 画面サイズ
576px〜
画面サイズ
760px〜
画面サイズ
992px〜
画面サイズ
1200px〜

コーディング時、PC→SPの順に構築していくと混乱してくるので、モバイルファーストの考え方で小さい画面の状態から大きい画面の状態へと構築していくとよい。

コンテナ

.container

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

(xs)
デフォルト
sm
576px〜
md
760px〜
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以下(〜759px)で.container-fluid化。

.container-sm

.containerと同じ。
Demo page

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

colとoffset

Bootstrapは横に12分割されたグリッドシステムです。コンテナの中に.rowという行の中に.colを組んでいきます。
なんて説明は置いといて、隙間用のclassのメモです。

Bootstrap4では、.colに.offset-ブレイクポイント-開けたい隙間分の数値を添えます。
(このブログに当ててるCSSの影響で.rowのpaddingがおかしいです)

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

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

.col-4.offset-2

.col-4.offset-2

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

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〜で表示 = 576px以下で非表示
画面サイズ768px〜で表示 = 768px以下で非表示
画面サイズ992px〜で表示 = 992px以下で非表示
画面サイズ1200px〜で表示 = 1200px以下で非表示

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

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

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

brタグで応用

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

d-blockを使うとFireFoxで1行丸ごと空白が入ってしまいます。

Pocket
LINEで送る

back to top