Bootstrap4 画面幅一覧表
Bootstrap4のブレークポイントを覚えられないのでメモしておきます。
xsやxlはあまり使わない気がしますね。
実際はPCとモバイルの2種類しか作らない人が多いのではないでしょうか。
| 名称 | 領域サイズ |
|---|---|
| xs | 0px〜575px |
| sm | 576px〜767px |
| md | 768px〜991px |
| lg | 992px〜1199px |
| xl | 1200px〜 |
Webの勉強をしよう!Web制作の技術やサービス情報を発信します。
投稿日:2017年11月17日 更新日:
Bootstrap4のブレークポイントを覚えられないのでメモしておきます。
xsやxlはあまり使わない気がしますね。
実際はPCとモバイルの2種類しか作らない人が多いのではないでしょうか。
| 名称 | 領域サイズ |
|---|---|
| xs | 0px〜575px |
| sm | 576px〜767px |
| md | 768px〜991px |
| lg | 992px〜1199px |
| xl | 1200px〜 |
執筆者:sasaki
関連記事
Bootstrap4 画面幅100%で制作したい場合(サンプル付き)
Bootstrap4のcontainerクラスは最大幅が1140pxに設定されています。 サイトのよっては、画面幅100%を使って制作したい場合があります。 オシャレなサイトなどで多いですよね。 こん …
Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)
Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …
Bootstrap4 divに影(シャドウ)を付ける(影付きのdiv・ボックス)
Bootstrap4では、影(シャドウ)を付けるクラスが初めから用意されています。 クラスを追加するだけで簡単に影(シャドウ)を付けることができます。 Bootstrap4 divに影(シャドウ)を付 …
Bootstrap4 colの隙間(padding、margin)を削除する(サンプル付き)
Bootstrap4でデザインを忠実に再現したい時に、colの隙間(padding)が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう!というのが今回の趣旨です。 サンプルも作りました。 CS …
Bootstrap4 PCでは2カラムで、スマホ画面では1カラム(サンプル)
Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。 画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。 サンプルを作成しましたので …
2019/02/11
Python3 for文で添え字(index)を取得する方法(enumerate関数)
2018/11/10
gulp.js コンパイル時にエラーになっても中断させない(gulp-plumber)
2018/11/04
JavaScript 一定時間後に処理を実行させるサンプル(setTimeout)
2018/11/03
JavaScript クリックイベントをJavaScriptで実現するサンプル
2018/10/13
Bootstrap4 上部固定メニューヘッダを作るサンプル(fixed-top)