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にはマージン用クラスが用意されています。 クラスに追加するだけでマージンが取られるので、とても便利ですよ。 サンプルも作ってますので一緒に見てくださいね。 次のように指定できます。 …
Bootstrap4 ブレークポイントを変更したい(ソースファイルをコンパイルする)
Bootstrap4のブレークポイントはあらかじめ設定されていますが、案件によってはブレークポイントを変更したい場合があります。 ブレークポイントを変更する場合、bootstrap.cssを直接編集す …
Bootstrap4で縦の領域はcolクラスを使って分ける事になります。 縦幅を均等に分けたい場合 均等に縦幅を分けたい場合はrowの中にcolを好きな数だけ作ればOKです。 例えばrowの中にcol …
Bootstrapについて レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。 CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。 その代表格と言えばTw …
Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)
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)