Bootstrap3のグリッドシステム

Bootstrap3のグリッドシステムを利用すればレスポンシブサイトが簡単に作ることができます。

目次

グリッドシステムって?

レイアウトを均等に分けてマス目上にレイアウトを考えること。12等分にされていて8:4や4:4:4にしたり、合わせて12になるようにお好みにレイアウトが組むことができます。
ブラウザを小さくしてみてください。Bootstrapのグリッドシステムはレスポンシブなのでスマホのサイズにもレイアウト調整してくれるのでとても便利です。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>  
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

レイアウト構成

大枠に.containerを指定することで通常の固定画面サイズに表示します。.rowで列表示を区切ります。

<div class="container">
  <div class="row">
    ...
  </div>
</div>

フルサイズにしたい場合

.container.container-fluid に変更することで全幅レイアウトに切り替えることができます。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

グリッドシステムの画面サイズ

Bootstrapのレイアウトは4段階構成

モバイル(スマホ)、タブレット、デスクトップ1200px未満、1200px以上の4段階でわかれています。

デバイス意味クラス(*は数値)
モバイル(スマホ)
768px未満
エクストラスモール=xscol-xs-*
タブレット
768px以上992px未満
スモール=smcol-sm-*
デスクトップ
992px以上1200px未満
ミディアム=mdcol-md-*
デスクトップ
1200px以上
ラージ=lgcol-lg-*

cssでの分岐はこんな感じ。

/* Extra small devices: Phones (<768px) */
@media (max-width: 767px) {}
 
/* Small devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}
 
/* Medium devices: Desktops (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}
 
/* Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}

モバイルとデスクトップ

モバイル .col-xs-* とデスクトップ .col-md-* で分ける場合はこんな使い方があります。

モバイルは2カラム、デスクトップでは3カラム並び

モバイルは50%幅、デスクトップでは33.3%幅にしてくれます。

.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

モバイル、デスクトップとも2カラム並び

モバイルでもデスクトップでも50%幅にしてくれます。

.col-xs-6
.col-xs-6
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

表示・非表示クラス

スマホの場合は表示させたくない!?などデバイスの個別対応したいときに便利です。

モバイル
768px未満
タブレット
768px以上992px未満
デスクトップ
992px以上1200px未満
デスクトップ
1200px以上
.visible-xs表示非表示非表示非表示
.visible-sm非表示表示非表示非表示
.visible-md非表示非表示表示非表示
.visible-lg非表示非表示非表示表示
.hidden-xs非表示表示表示表示
.hidden-sm表示非表示表示表示
.hidden-md表示表示非表示表示
.hidden-lg表示表示表示非表示

印刷の表示・非表示

クラスブラウザ印刷
.visible-print-block
.visible-print-inline
.visible-print-inline-block
非表示表示
.hidden-print表示非表示

 
Bootstrap4では表示クラス名が変わりました↓↓↓

あわせて読みたい
Bootstrap4のグリッドシステム v3からの変更点 Bootstrapのバージョンが4にアップされグリッドシステムも少し変更されました。画面サイズは4から5段階に、Flexboxによるレイアウトになりました。 Bootstrap4のグリッ...
  • URLをコピーしました!
目次