「Bootstrap.cssのGrid system」のサンプル

Bootstrap.cssのクラス名のサンプル:和訳」の「Grid system」のサンプルページです。

  • 「.row」を親要素にする
  • 1行の合計を「12」にする。超えたものは2行目。
  • 幅は親の幅と同じ(container-fluidを親にする)

ウィンドウ幅を広げたり縮めたりするとGridのトコが横並びになったり縦並びになったりします。

Extra small devices Phones (<768px)

col-xs-X」を使う。ウィンドウ幅関係無しで常に横並び。

1行2列で50%ずつ。「col-xs-6」「col-xs-6」

.col-xs-6
.col-xs-6

1行2列で25%、75%。「col-xs-3」「col-xs-9」

.col-xs-3
.col-xs-9

実際のソース

<h3>1行2列で50%ずつ。「col-xs-6」「col-xs-6」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6" style="background-color:#ddd">.col-xs-6</div>
    <div class="col-xs-6" style="background-color:#bbb">.col-xs-6</div>
  </div>
</div>

<h3>1行2列で25%、75%。「col-xs-3」「col-xs-9」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3" style="background-color:#ddd">.col-xs-3</div>
    <div class="col-xs-9" style="background-color:#bbb">.col-xs-9</div>
  </div>
</div>

Small devices Tablets (≥768px)

col-sm-X」を使う。ウィンドウ幅が768px以上のときのみ横並び。

1行2列で50%ずつ。「col-sm-6」「col-sm-6」

.col-sm-6
.col-sm-6

1行2列で25%、75%。「col-sm-3」「col-sm-9」

.col-sm-3
.col-sm-9

実際のソース

<h3>1行2列で50%ずつ。「col-sm-6」「col-sm-6」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6" style="background-color:#ddd">.col-sm-6</div>
    <div class="col-sm-6" style="background-color:#bbb">.col-sm-6</div>
  </div>
</div>

<h3>1行2列で25%、75%。「col-sm-3」「col-sm-9」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3" style="background-color:#ddd">.col-sm-3</div>
    <div class="col-sm-9" style="background-color:#bbb">.col-sm-9</div>
  </div>
</div>

Medium devices Desktops (≥992px)

col-md-X」を使う。ウィンドウ幅が992px以上のときのみ横並び。

1行2列で50%ずつ。「col-md-6」「col-md-6」

.col-md-6
.col-md-6

1行2列で25%、75%。「col-md-3」「col-md-9」

.col-md-3
.col-md-9

実際のソース

<h3>1行2列で50%ずつ。「col-md-6」「col-md-6」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" style="background-color:#ddd">.col-md-6</div>
    <div class="col-md-6" style="background-color:#bbb">.col-md-6</div>
  </div>
</div>

<h3>1行2列で25%、75%。「col-md-3」「col-md-9」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3" style="background-color:#ddd">.col-md-3</div>
    <div class="col-md-9" style="background-color:#bbb">.col-md-9</div>
  </div>
</div>

Large devices Desktops (≥1200px)

col-lg-X」を使う。ウィンドウ幅が1200px以上のときのみ横並び。

1行2列で50%ずつ。「col-lg-6」「col-lg-6」

.col-lg-6
.col-lg-6

1行2列で25%、75%。「col-lg-3」「col-lg-9」

.col-lg-3
.col-lg-9

実際のソース

<h3>1行2列で50%ずつ。「col-lg-6」「col-lg-6」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6" style="background-color:#ddd">.col-lg-6</div>
    <div class="col-lg-6" style="background-color:#bbb">.col-lg-6</div>
  </div>
</div>

<h3>1行2列で25%、75%。「col-lg-3」「col-lg-9」</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3" style="background-color:#ddd">.col-lg-3</div>
    <div class="col-lg-9" style="background-color:#bbb">.col-lg-9</div>
  </div>
</div>

ウィンドウ幅による組合せ

タブレットとPCで横並びの数を変える

タブレット(ウィンドウ幅が768px以上)のときは2カラムレイアウト、PC(ウィンドウ幅が992px以上)のときは4カラムレイアウト

A:
.col-sm-6 .col-md-3
B:
.col-sm-6 .col-md-3
C:
.col-sm-6 .col-md-3
D:
.col-sm-6 .col-md-3

実際のソース

<h3>タブレットとPCで横並びの数を変える</h3>
<p>タブレット(ウィンドウ幅が768px以上)のときは2カラムレイアウト、PC(ウィンドウ幅が992px以上)のときは4カラムレイアウト</p>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-3" style="background-color:#d9d">A:<br >.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3" style="background-color:#9bb">B:<br >.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3" style="background-color:#d6d">C:<br >.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3" style="background-color:#6bb">D:<br >.col-sm-6 .col-md-3</div>
  </div>
</div>

左の余白

※「col-xx-offset-□」で左に余白をあける。

A:
.col-sm-6 .col-md-offset-3
B:
.col-sm-8 .col-md-offset-2
C:
.col-sm-4 .col-md-4
D:
.col-sm-6 .col-md-6
E:
.col-sm-2 .col-md-10

実際のソース

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-offset-3" style="background-color:#d9d">A:<br >.col-sm-6 .col-md-offset-3</div>
    <div class="col-sm-8 col-md-offset-2" style="background-color:#9bb">B:<br >.col-sm-8 .col-md-offset-2</div>
    <div class="col-sm-4 col-md-offset-4" style="background-color:#d6d">C:<br >.col-sm-4 .col-md-4</div>
    <div class="col-sm-6 col-md-offset-6" style="background-color:#d9d">D:<br >.col-sm-6 .col-md-6</div>
    <div class="col-sm-2 col-md-offset-10" style="background-color:#9bb">E:<br >.col-sm-2 .col-md-10</div>
  </div>
</div>

関連ページ