Bootstrap4のグリッドシステムおさらい

Bootstrap4では画面の横幅を12分割して管理する「グリッドシステム」を採用しています。

この「グリッドシステム」を利用すれば、簡単にスマホなどに対応したレスポンシブデザインの表を作成することができます。

スポンサーリンク

Bootstrap4のグリッドシステム

Bootstrap4のグリッドシステムは以下のように画面の横幅を12分割に均等割りして管理されています。

1番目
2番目
3番目
4番目
5番目
6番目
7番目
8番目
9番目
10番目
11番目
12番目

それぞれのグリッドは「col-数字」で幅を決定し、数字の合計が必ず12になるように設定します。
(以下の例は「3+2+4+3=12」になっています。)

col-3
col-2
col-4
col-3

Boostrap4のグリッドシステムは

  1.  .container・・・グリッド全体を囲むエリア
  2.  .row   ・・・行を表すエリア(.rowはグリッド内に複数持つことができます)
  3.  .col   ・・・行内のカラム表すエリア(.colは.row内に複数持つことができます)

といったクラスで管理されています。

実際のサンプルは

のように指定します。

Bootstrap4での画面幅

Bootstrap4では、画面幅を5つのブレークポイントで設定することができます。

サイズ 主な利用用途 画面幅
xl デスクトップ PC などの大画面モニタ 1200px以上
lg ノート PC などの省サイズモニタ 992px以上
md タブレット端末など 768px以上
sm スマートフォン(横持ち)など 576px以上
スマートフォン(縦持ち)、IoT 端末など 576px未満

のように指定します。

Bootstrap
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました