Grid

Bootstrapでは、水平方向に12分割したグリッドシステムを採用しています。これにより、2カラムや3カラム、4カラム、6カラムなどのレイアウトが容易に行えます。

Auto layout

列の幅は均等に割り当てられます。

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

Column width

.col-{width} で、列の幅を1~12の範囲で指定できます。

幅を指定していない列が混じっても構いません。幅を指定されていない列は、残りの領域を均等に使用します。

<div class="row">
  <div class="col-2">.col-2</div>
  <div class="col">.col</div>
</div>
.col-2
.col
<div class="row">
  <div class="col-3">.col-3</div>
  <div class="col">.col</div>
</div>
.col-3
.col

Breakpoint

デバイスの画面幅に応じてレイアウトを変えたい場合は、ブレークポイントを指定できます。

BootstrapのBreakpoint
Breakpoint 接頭辞 画面幅 用途
Extra small xs 1px ~ 543px スマートフォン
Small sm 544px ~ 767px タブレット
Medium md 768px ~ 991px モバイルパソコン
Large lg 992px ~ 1119px ノートパソコン
Extra large el 1120px ~ デスクトップパソコン