Bootstrap3のグリッドシステム

2015年6月29日2023年9月30日

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

グリッドシステムって？

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

.col-md-1

.col-md-8

.col-md-4

.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未満	エクストラスモール=xs	`col-xs-*`
タブレット 768px以上992px未満	スモール=sm	`col-sm-*`
デスクトップ 992px以上1200px未満	ミディアム=md	`col-md-*`
デスクトップ 1200px以上	ラージ=lg	`col-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

<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

<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`	表示	表示	表示	非表示