Bootstrap4 の使い方 (1) Layout

Bootstrap4 の使い方(1) Layout

Bootstrap は Twitter 社が開発した CSS フレームワークです。CSS は通常自分で設定しますが、Bootstrap にはよく使われるスタイルがあらかじめ定義してあるので、これらのスタイルを利用するだけで統一されたデザインを適用可能になります。

以下は Bootstrap のドキュメントを元にその使い方を説明しています。Bootstrap のバージョンは、4.1.3 です。ほぼ翻訳に近いものになっていて、翻訳上の誤り等がある可能性がありますが、予めご了承ください。また、ページの都合上以下のパートに分かれています。

Layout（このページ。Bootstrap の読み込み、Sass の導入、グリッドシステムを使ったレイアウト、メディアオブジェクト）
Content（タイポグラフィ、コード、イメージ、フィギュア、テーブル）
Components part1（アラート、バッジ、パンくずリスト、ボタン、ドロップダウン、フォーム、インプットグループ、リストグループ、ページネーション）
Components part2（カード、表示・非表示切り替え、アコーディオン、ツールチップ、ポップオーバー、モーダル、ナビゲーション、ナビゲーションバー）
Components part3（カルーセル、スクロールスパイ）
Utilities

作成日：2018年10月16日

Bootstrap4 の読み込み

Bootstrap4 を使用するには、jQuery（JavaScriptのライブラリ）と Bootstrap4 の CSS、JavaScript、及び Popper.js を読み込む必要があります。読み込むには以下の２つの方法があります。

CDN (Content Delivery Network) 経由で読み込む
ダウンロードしたファイルをサーバーに配置して読み込む

CDN 経由で読み込む

Bootstrap4 の公式サイト（https://getbootstrap.com/）へアクセスして Get Started をクリックします。

Introduction のページが開くので、Quick start の下に記述されている CSS と JavaScript を読み込みます。

CSS

以下を <head> 内で、他の CSS ファイルより先に読み込みます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

jQuery と Popper.js、bootstrap の JavaScript ファイルを body 要素の閉じタグの直前で読み込みます。

それぞれのファイルは、依存関係があるので以下の順番で読み込む必要があります。

jQuery
Popper.js
bootstrap.min.js

また、以下の例では jQuery の Slim build バージョン（Ajax やアニメーションの効果などのモジュールを除いたもの）を使用していますが、フルバージョンを使用することもできます。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Starter template

以下は、各ファイルの読み込みを記述したスターター・テンプレート（Starter template）です。

HTML5 doctype を使用して、レスポンシブに対応するために、viewport を指定する必要があります。

<!doctype html><!-- HTML5-->
<html lang="ja">
<head>
  <!-- 以下の meta tags（charset と viewport）は必須です-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap の CSS（CDN経由）の読み込み -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <!-- 関連 JavaScript の読み込み-->
  <!-- jQuery, Popper.js, Bootstrap JS の順に読み込みます-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

WordPress での読み込み

WordPress で Bootstrap 4 の読み込みを行うには、wp_enqueue_scripts と言うアクションフックを使います。

以下は functions.php で Bootstrap の JavaScript と CSS を CDN 経由で読み込む例です。

function add_my_styles_and_scripts() {
  //bootstrap.min.css の読み込み
  wp_enqueue_style( 
    'my-template-bs-style', 
    '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' ,
    array(),
    '4.1.3'
  );
  
  //スタイルシート style.css の読み込み
  wp_enqueue_style(
    'my-template-style',
    get_stylesheet_uri(),
    array('my-template-bs-style'),
    filemtime( get_theme_file_path( '/style.css' ) )
  );  

  //WordPress 本体の jQuery を登録解除
  wp_deregister_script( 'jquery');  
  
  //jQuery を CDN から読み込む
  wp_enqueue_script( 'jquery', 
    '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', 
    array(), 
    '3.3.1', 
    true //</body> 終了タグの前で読み込み
  );
  
  // Bootstrap の依存ファイル popper.min.js の読み込み
  wp_enqueue_script( 'popper', 
    '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', 
    array('jquery'), 
    '1.14.3', 
    true 
  );
  
  // Bootstrap JavaScript の読み込み 
  wp_enqueue_script( 'bootstrap', 
    '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', 
    array('jquery', 'popper'), 
    '4.1.3', 
    true 
  );
  
  // base.js の読み込み（独自の JS ファイル） 
  wp_enqueue_script( 
    'base-script', 
    get_theme_file_uri( '/js/base.js' ), 
    array( 'jquery', 'bootstrap' ), 
    filemtime( get_theme_file_path( '/js/base.js' ) ), 
    true
  );
}
add_action( 'wp_enqueue_scripts', 'add_my_styles_and_scripts' );

WordPress での CSS や JavaScript ファイルの読み込み方法については以下をご覧ください。

WordPress CSSやJavaScriptファイルの読み込み

Bootstrap4 のダウンロード

Bootstrap4 のダウンロードページから Bootstrap4 の CSS 及び JavaScript をダウンロードして読み込むこともできます。

Compiled CSS and JS の下の Download ボタンをクリックしてダウンロードします。

CSS は「bootstrap.min.css」を、JavaScript は「bootstrap.bundle.min.js（Popper.jsを含む）」を読み込みます。

ダウンロードしたそれぞれの CSS や JavaScript ファイルの差異については「CSS files」「JS files」で確認できます。

このダウンロードには、jQuery は含まれていないので、CDN 経由か別途ダウンロードして読み込む必要があります。

以下は、ダウンロードした CSS と JS を読み込む例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>sample 01</title>
<!-- Bootstrap の CSS ファイルの読み込み -->
<link href="../bootstrap4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- jQueryの読み込み（Bootstrap を利用するには必須） --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!-- bootstrap.bundle.min.js の読み込み --> 
<script src="../bootstrap4/js/bootstrap.bundle.min.js"></script> 
</body>
</html>

Bootstrap を適用した場合の変化

bootstrap.min.css (bootstrap.css) には、h1～h6 や a 要素などの要素に対するスタイルの設定や reboot.css が含まれています。このため、クラスを適用していなくてもデフォルトのスタイルと異なっていたり、Bootstrap のデザインで文字などが表示される場合があります。

SASS

Bootstrap 4で導入された Sass を利用するには、ソースファイルをダウンロードします。

Source files

Source files の下の「Download」をクリックしてソースファイルをダウンロードして zip ファイルを解凍します。

ダウンロードしたファイルを展開すると、Sass 関連のファイルは scss フォルダに入っているので、このフォルダを任意の場所に保存します。以下のようなフォルダやファイルが入っています。

Sass の利用

Bootstrap の Sass ファイルは変更したくないので、カスタマイズ用の scss ファイルを作成して、Bootstarp の scss ファイルをインポートします。（Theming Bootstrap）

この例では、カスタマイズ用のファイルは、custom.scss としています。

your-project/
├── scss
│   └── custom.scss
│   └── custom.css （custom.scssをコンパイル時に生成）
└── bootstrap/
    ├── js
    └── scss

ファイルには、Bootstarp の scssファイルへのパスを指定した @import を記述して、ファイルをインポートします。（Importing）

// custom.scss
// Option A: Bootstrap を全部組み込む場合

@import "path/to/bootstrap/scss/bootstrap";

custom.scss をコンパイルするとデフォルトの bootstrap.css と同様の custom.css が生成されるので、この custom.css を読み込むようにします。

上記は、Bootstrap 全部をインポートする方法ですが、必要な部分のみをインポートすることもでき、ファイルを軽量化することができます。但し、この場合、Bootstrap のコンポーネントには依存関係があるので注意が必要です。

// custom.scss
// Option B: Bootstrap の必要な部分のみを組み込む場合

// Required（必須）
@import "path/to/bootstrap/scss/functions";
@import "path/to/bootstrap/scss/variables";
@import "path/to/bootstrap/scss/mixins";

// Optional（オプション）
@import "path/to/bootstrap/scss/root";
@import "path/to/bootstrap/scss/reboot";
@import "path/to/bootstrap/scss/type";
@import "path/to/bootstrap/scss/images";
@import "path/to/bootstrap/scss/code";
@import "path/to/bootstrap/scss/grid";

bootstrap.scss を見てみると、以下のようにそれぞれのファイルをインポートしているのがわかります。

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";
@import "print";

このファイルの内容をコピーして、ファイルへのパスを書き換えて、不要なファイルはコメントアウト（または削除）するのも１つの方法です。

// custom.scss
// Option B: Bootstrap の必要な部分のみを組み込む場合
 
// Required（必須）
@import "path/to/bootstrap/scss/functions";
@import "path/to/bootstrap/scss/variables";
@import "path/to/bootstrap/scss/mixins";
 
// Optional（オプション）
@import "path/to/bootstrap/scss/root";
@import "path/to/bootstrap/scss/reboot";
@import "path/to/bootstrap/scss/type";
@import "path/to/bootstrap/scss/images";
//@import "path/to/bootstrap/scss/code";
@import "path/to/bootstrap/scss/grid";
@import "path/to/bootstrap/scss/tables";
@import "path/to/bootstrap/scss/forms";
@import "path/to/bootstrap/scss/buttons";
@import "path/to/bootstrap/scss/transitions";
@import "path/to/bootstrap/scss/dropdown";
@import "path/to/bootstrap/scss/button-group";
@import "path/to/bootstrap/scss/input-group";
@import "path/to/bootstrap/scss/custom-forms";
@import "path/to/bootstrap/scss/nav";
@import "path/to/bootstrap/scss/navbar";
@import "path/to/bootstrap/scss/card";
@import "path/to/bootstrap/scss/breadcrumb";
@import "path/to/bootstrap/scss/pagination";
@import "path/to/bootstrap/scss/badge";
//@import "path/to/bootstrap/scss/jumbotron";
//@import "path/to/bootstrap/scss/alert";
//@import "path/to/bootstrap/scss/progress";
@import "path/to/bootstrap/scss/media";
@import "path/to/bootstrap/scss/list-group";
@import "path/to/bootstrap/scss/close";
@import "path/to/bootstrap/scss/modal";
@import "path/to/bootstrap/scss/tooltip";
@import "path/to/bootstrap/scss/popover";
@import "path/to/bootstrap/scss/carousel";
@import "path/to/bootstrap/scss/utilities";
@import "path/to/bootstrap/scss/print";

カスタマイズ

カスタマイズするには、custom.scss に変更したい Sass 変数に値を設定してデフォルト値を上書きします（必要に応じて変数と値を scss/_variables.scss からコピーし、その値を変更して !default フラグを削除します）。

また、変数の記述は、Bootstrap の @import よりも前に記述する必要があります。（Variable defaults）

以下は、body 要素の background-color と color を変更する例です。

// Your variable overrides（上書きする変数の記述）
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables（デフォルトの Bootstrap のインポート）
@import "path/to/bootstrap/scss/bootstrap";

以下は、Sass のオプションを指定して、グラデーションを使った背景色を有効にする例です。

//オプション（デフォルトの値を上書き）の記述
$enable-gradients: true;

// Bootstrap and its default variables（デフォルトの Bootstrap のインポート）
@import "path/to/bootstrap/scss/bootstrap";

以下は、$theme-colors に色を追加する例です。これだけで新規のカラーボタンなど（btn-lgray や btn-outline-lgray、alert-lgray、badge-lgray クラス）が新たに使えるようになります。

//追加する変数の記述
$theme-colors: (
  "lgray": #aaa
);

// Bootstrap and its default variables（デフォルトの Bootstrap のインポート）
@import "path/to/bootstrap/scss/bootstrap";

以下は、既存のカードのクラス（.card-columns）を拡張する例です。この場合、ミックスインをインクルードするので Bootstrap のインポートより後に記述する必要があります。

// Bootstrap and its default variables（デフォルトの Bootstrap のインポート）
@import "path/to/bootstrap/scss/bootstrap";

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

custom.scss 変更後はコンパイルする必要があります。コンパイルする際に、.map ファイルやキャッシュフォルダなどが生成される場合があります。以下は Windows 環境でバッチファイルを作成しておく場合のフォルダ内の例です。

関連ページ：SASS (scss) の基本的な使い方

ブラウザサポート

モダンブラウザ及び IE10 以上がサポートされています。但し、IE10に関しては完全にはサポートされていないようです。「Browsers and devices」に詳細が記述されています。

IE9 以下を使用する場合は、Bootstrap3 を使用する必要があります。関連ページ：「Bootstrap3 の使い方」

レイアウト

Bootstrap には、コンテナ、グリッドシステム、メディア・オブジェクト、レスポンシブ・ユーティリティクラスなど、レイアウトのためのいくつかのコンポーネントとオプションが用意されています。

コンテナ

コンテナ（Containers）は、Bootstrap の中で最も基本的なレイアウト要素で、Bootstrap のグリッドシステムを利用するにはコンテナでその範囲を囲む必要があります。また、コンテナは入れ子にすることができます。

以下の２つのコンテナクラスがあります。

.container：
レスポンシブな固定幅のコンテナ（各ブレークポイントで max-width が変わるコンテナ）
```
<div class="container">
  
</div>
```
.container-fluid：
レスポンシブな全幅のコンテナ（常に 100％幅のコンテナ）
```
<div class="container-fluid">
  
</div>
```

container と container-fluid クラスには、以下のようなスタイルが bootstrap.css に設定されていてます（一部抜粋）。

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

サンプル：.container と .container-fluid

レスポンシブ・ブレークポイント

Bootstrap は、モバイル・ファーストの手法で開発されていて、ブレークポイントを作成するために、いくつかのメディアクエリを使用しています。これらのブレークポイントは、最小のビューポート幅を基に設定されていて、ビューポートの変更により要素の大きさ等の変更に対応しています。（Responsive breakpoints）

Bootstrap では、レイアウト、グリッドシステム及びコンポーネントのために、以下のようなブレークポイント（メディアクエリのレンジ）をで設定しています。

「xs」（Extra small devices：画面幅が 576px 未満）は、Bootstrap ではデフォルトになるので、この場合「xs」用のメディアクエリはありません。

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

//sm: Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

//md: Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

//lg: Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

//xl: Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap では、Sass を使って CSS を設定しているので、全てのメディアクエリは Sass の mixin を利用することができます。

以下の7行目から14行目は、画面幅が sm のブレークポイント（576px）未満では非表示で、576px以上では表示する「custom-class」と言うクラスを設定する例です。

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

_breakpoints.scss に以下が定義されています。

/* ミックスイン media-breakpoint-up() の定義
Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
Makes the @content apply to the given breakpoint and wider. */
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

/* 関数 breakpoint-min() の定義
Minimum breakpoint width. Null for the smallest (first) breakpoint. */
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name); //指定したキーの値を取得を取得する Sass 関数
  @return if($min != 0, $min, null);
}

_variable.scss には以下のグリッド用ブレークポイントの変数が定義されています。

/* Define the minimum dimensions at which your layout will change,
 adapting to different screen sizes, for use in media queries. */

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Bootstrap では場合によっては以下のような逆方向の（max-widthを使った）メディアクエリを使用します。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

上記のメディアクエリの Sass のミックスインも用意されています。

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

また、max-width と min-widt を使って画面サイズの1つを対象とする以下のようなメディアクエリとミックスインも用意されています。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

//ミックスイン
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

同じように、メディアクエリは複数のブレークポイントの幅にまたがることがある場合のために、以下のようなメディアクエリとミックスインも用意されています。

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

//ミックスイン
@include media-breakpoint-between(md, xl) { ... }

Z-index

いくつかの Bootstrap のコンポーネントでは z-index を利用しています。ナビゲーション、ツールチップ、ポップオーバー、モーダルなどを適切に表示するために、以下のような z-index が _variables.scss に定義されています。

※これらの値は、変更しないことが推奨されています。どれか１つを変更すると、全てを変更しなければならない可能性があります。（Z-index）

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Bootstrap のグリッドシステム

Bootstrap のグリッドシステム（Grid system）では、コンテナ（containers）、行（rows）、および列（columns カラム）を使用して、コンテンツのレイアウトや配置を行います。これには、Flexbox が使用され、レスポンシブに対応しています。

以下は、定義済みのグリッドクラス（col-sm）を使用して、small、medium、large と extra large のデバイスにおいて3つの等幅列（カラム）を作成する例です。container クラスの親要素により、これらの列（カラム）はページの中央に配置されます。

<div class="container">
  <div class="row">
    <div class="col-sm"> One of three columns </div>
    <div class="col-sm"> One of three columns </div>
    <div class="col-sm"> One of three columns </div>
  </div>
</div>

以下のような表示になります。（sm というサイズ以上の場合は3カラムで表示）

One of three columns

Bootstrap grid examples（グリッドのサンプルページ）

How it works（概要）

コンテナ（container）は、コンテンツを中央に配置し、水平方向にパディングを設定します。コンテナを設定するには、「container」または「container-fluid」のクラスを指定します。

行（row）で列（column）を囲みます。各列（column）には、水平方向のパディング（ガター/gutter）がありますが、このパディングは、行（row）のネガティブマージンで打ち消されるようになっています。これにより、列内のコンテンツは視覚的に左側に整列されます。以下は bootstrap.css からの一部抜粋です。

.row には display:flex が指定されていて、Flexbox の「フレックスコンテナ（Flex Container）」なっています。また、flex-wrap:wrap が指定されているので「Flex コンテナの幅に収まらない場合、折り返す」ようになっています。（関連ページ：Flex Container のプロパティ）　

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}
・・・省略・・・

グリッドレイアウトでは、コンテンツは列（columns）内に配置する必要があり、基本的には、列（columns）のみが行（rows）の直下の子要素になります。

Flexbox を使用しているので、幅が指定されていないグリッド列は自動的に等幅列として配置されます。例えば、4つの.col-sm の列は、small(sm) のブレークポイント以上でそれぞれ自動的に25%の幅になります。

行は最大で12の列に分割することができます。列（columns）のそれぞれのクラスの最後の数字は、各列の幅を意味します。例えば、3つの等幅列が必要な場合は、.col-4 を使用します。（4 x 3 = 12）

列の幅は、パーセンテージで設定されているので、親要素の幅とは相対的になっています。

列には水平方向のパディング（ガター）が設定されていますが、.row に .no-gutters を指定することで、行からマージンを削除したり、列からパディングを削除することができます。

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

グリッドをレスポンシブ対応にするため、５つのブレークポイント（extra small, small, medium, large, extra large）があります。

グリッドのブレークポイントは、最小幅のメディアクエリに基づいていて、そのブレークポイントとそれ以上の幅のすべてに適用されます（例：.col-sm-4 は small, medium, large, 及び extra large のデバイスに適用されますが、extra small には適用されません）。

よりセマンティックなマークアップが必要な場合は、定義済みのグリッドクラス（.col-4 など）や Sass のミックスインを利用できます。

グリッド・オプション

Bootstrapでは、ほとんどのサイズの定義で単位に em か rem を使用していますが、グリッドのブレークポイントとコンテナの幅には px を使用しています。これはビューポート幅がピクセル単位で設定されているため、フォントサイズによって変化しないためです。

以下は、Bootstrap のグリッドシステムが、いろいろなデバイスでどのように機能するかの表です。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width コンテナの最大幅	None (auto) なし（自動）	540px	720px	960px	1140px
Class prefix クラス名（接頭辞）	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns 列の数	12
Gutter width 列の水平方向余白（ガター）	30px (15px on each side of a column)
Nestable ネスト（入れ子）	可能
Column ordering 列の順序変更	可能

以下は、各クラスの有効範囲と優先度を表したものです。（n は1～12の数値）

色がついた部分が有効範囲で、クラスが複数指定されている場合、色の濃いものが優先度が高くなります。

画面サイズ	0～575px	576～767px	768～991px	992～1199px	1200px以上
col-xl-n
col-lg-n
col-md-n
col-sm-n
col-n
タイプ	Extra small	Small	Medium	Large	Extra Large

自動レイアウトの列

.col-sm-6 のような最後に番号を付けられたクラスを使わずに、ブレークポイント固有の列のクラスを利用すると簡単に列のサイズを設定（自動レイアウト）することができます。（Auto-layout columns）

等幅（Equal-width）

以下は、xs から xl までの全てのデバイスとビューポートに適用される2つのグリッドレイアウトの例です。必要なブレークポイントごとに数値の単位の付いていないクラス（unit-less classe）を追加することで、全ての列が同じ幅になるようにすることができます。（Equal-width）

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

前述の例は、「col」クラスを指定しましたが、以下の例では「col-md」クラスを指定しているので、Medium デバイスのブレークポイント（768px）で変化します。

<div class="container">
  <div class="row">
    <div class="col-md">
      1 of 2
    </div>
    <div class="col-md">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-md">
      1 of 3
    </div>
    <div class="col-md">
      2 of 3
    </div>
    <div class="col-md">
      3 of 3
    </div>
  </div>
</div>

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

サンプル：自動レイアウトの列/等幅（Equal-width）

※古いバージョンの Safari には、Flexbox のバグがありますが、最新のバージョンでは問題ありません。（Safari flexbox bug）

以下は bootstrap.css からの一部抜粋です。

flex-basis に 0 を指定し、flex-glow で比率を指定すると、その割合でレイアウトされます。

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

１つの列に幅を指定

自動レイアウトでは、１つの列に幅を指定することで他の列を自動的にサイズ変更することができます。（Setting one column width）

１つの列の幅の指定には、定義済みの数値付きグリッドクラス（col-6 や col-sm-5 等）やミックスイン、インラインで設定することができます。

<div class="container">
  <div class="row">
    <div class="col"> col </div>
    <div class="col-6"> col-6 </div>
    <div class="col"> col </div>
  </div>
  <div class="row">
    <div class="col-sm"> col-sm </div>
    <div class="col-sm-5"> col-sm-5 </div>
    <div class="col-sm"> col-sm </div>
  </div>
  <div class="row">
    <div class="col-md"> col-md </div>
    <div class="col-md" style="min-width: 300px"> col-md (min-width: 300px) </div>
    <div class="col-md"> col-md </div>
  </div>
</div>

col

col-6

col

col-sm

col-sm-5

col-sm

col-md

col-md (min-width: 300px)

col-md

可変幅コンテンツ

col-{breakpoint}-auto クラスを使用すると、コンテンツ（内容）の実際の幅に基づいて列の幅が調整されます。（Variable width content）

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2"> 1 of 3 </div>
    <div class="col-md-auto"> Variable width content（可変幅コンテンツ） </div>
    <div class="col col-lg-2"> 3 of 3 </div>
  </div>
  <div class="row">
    <div class="col"> 1 of 3 </div>
    <div class="col-md-auto"> Variable width content </div>
    <div class="col col-lg-2"> 3 of 3 </div>
  </div>
</div>

1 of 3

Variable width content（可変幅コンテンツ）

3 of 3

1 of 3

Variable width content

3 of 3

.col-xx-auto には、flex: 0 0 auto; が設定されています。flex は flex-grow、flex-shrink、flex-basis を同時に指定するショートハンドプロパティです。

また、.justify-content-md-center は以下のように、768px以上で justify-content: center（中央揃え）が設定されています。

@media (min-width: 768px) {
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }          
          
  .justify-content-md-center {
    justify-content: center !important;
  }
}

複数行の等幅設定

複数行にまたがる等幅の列は、改行したい箇所に .w-100 を挿入することで作成することができます。また、「responsive display utilities」と併用することで、改行をレスポンシブ対応にすることができます。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

col

.w-100 は以下のように幅が100%に設定されています。

.w-100 {
  width: 100% !important;
}

以下は「responsive display utilities」の d-block と d-sm-none を指定して、xs の場合のみ w-100 を表示するようにして、576px未満の場合に改行するようにした例です。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 d-block d-sm-none"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

col

レスポンシブ・クラス

複雑なレスポンシブ・レイアウトを構築するために、Bootstrap のグリッドシステムには、extra small、small、medium、large と extra large の5つの定義済みのクラスが用意されています。（Responsive classes）

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width コンテナの最大幅	None (auto) なし（自動）	540px	720px	960px	1140px
Class prefix クラス名（接頭辞）	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

全てのブレークポイントで同じ場合

最小サイズから最大サイズまで（全てのサイズで）同じグリッドの場合は、.col および .col-* クラスを使用します。特定のサイズの列が必要な場合は、数値付きクラス（.col-*）を指定します。

.col-* の「*」は1から12までの数値です。基本的には、「*」の合計が 12 になるように指定します（12分割）

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-5">col-5</div>
    <div class="col-4">col-4</div>
    <div class="col-3">col-3</div>
  </div>
</div>

col

col-5

col-4

col-3

積み重ねから水平表示へ

.col-sm-* クラスを使用すると、Extra small（576px未満）では各行が1列に積み重なって表示され、small のブレークポイント（576px以上）では水平方向に表示される基本的なグリッドシステムを作成することができます。（Stacked to horizontal）

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

col-sm-8

col-sm-4

col-sm

サンプル：基本的なグリッドシステム

複数クラスの指定

必要に応じて、異なるクラスを複数指定することができます。（Mix and match）

これにより、例えば、スマホでは2カラム、パソコンでは4カラム、大画面パソコンでは6カラムというように柔軟なレイアウトが可能です。

以下は、extra small 及び small（768px未満）では、全幅（col-12）と半分の幅（col-6）で積み重なって表示され、medium（768px）以上では2:1の割合（col-md-8 と col-md-4）で水平方向に表示されます。

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

.col-12 .col-md-8

.col-6 .col-md-4

以下は、576px 未満（xs）では2カラム（col-6）の3段、576px 以上 992px 未満（sm と md）では4カラム（col-sm-3）と2カラム（col-sm-6）の2段、992px 以上（lg と xl）では6カラム（col-lg-2）の1段で表示する例です。

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-sm-3 col-6">#1</div>
    <div class="col-lg-2 col-sm-3 col-6">#2</div>
    <div class="col-lg-2 col-sm-3 col-6">#3</div>
    <div class="col-lg-2 col-sm-3 col-6">#4</div>
    <div class="col-lg-2 col-sm-6 col-6">#5</div>
    <div class="col-lg-2 col-sm-6 col-6">#6</div>
  </div>
</div>

サンプル：複数クラスの指定

位置揃え（Alignment）

Flexbox の整列位置を指定するプロパティを使ったクラスを利用して、列の垂直方向及び水平方向の位置を揃えることができます。（Alignment）

垂直方向の位置揃え

垂直方向の位置揃えは、行（.row を指定している要素）に指定して列全体の位置を揃える方法と、各列（アイテム）に対して指定する方法があります。

列全体の垂直方向の位置

列全体の垂直方向の位置を揃えるクラスには以下のようなものがあり、行（.row を指定している要素）に指定します。

.align-items-start：上揃え
.align-items-center：中央揃え
.align-items-end：下揃え

.align-items-start：上揃え

<div class="container">
  <div class="row align-items-start">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>
</div>

One of three columns

.align-items-center：中央揃え

<div class="container">
  <div class="row align-items-center">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>
</div>

One of three columns

.align-items-end：下揃え

<div class="container">
  <div class="row align-items-end">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>
</div>

One of three columns

各列の垂直方向の位置

各列（アイテム）の垂直方向の位置を揃えるクラスには以下のようなものがあり、各列の要素に指定します。

.align-self-start：上揃え
.align-self-center：中央揃え
.align-self-end：下揃え

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

One of three columns

水平方向の位置揃え

行（.row を指定している要素）に以下のクラスを追加することで水平方向の位置を指定することができます。

.justify-content-start ：始端揃え
.justify-content-center ：終端揃え
.justify-content-end ：中央揃え
.justify-content-around ：均等割り（全てを均等割り配置）
.justify-content-between ：両端揃えで均等割り（最初の Flex アイテムを始端に、最後の Flex アイテムを終端に揃えて残りを均等配置）

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two
    </div>
    <div class="col-4">
      One of two
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two
    </div>
    <div class="col-4">
      One of two
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two
    </div>
    <div class="col-4">
      One of two
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-3">
      One of three
    </div>
    <div class="col-3">
      One of three
    </div>
    <div class="col-3">
      One of three
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-3">
      One of three
    </div>
    <div class="col-3">
      One of three
    </div>
    <div class="col-3">
      One of three
    </div>
  </div>
</div>

One of two

One of three

No gutters

予め定義されたグリッドクラスの列間のパディング（gutters）は、行（.row が指定された要素）に .no-gutters を指定することで削除することができます。

.no-gutters を指定することで、行（.row）からネガティブマージンを削除し、直下の全ての列からパディング（gutters）を削除します。.no-gutters は以下のように定義されています。

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.row は以下のように定義されています。

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

列は以下のように定義されています。

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

以下はを指定した例です。列のパディングが削除されています。

<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

また、edge-to-edge（画面の端から端までの）デザインが必要な場合は、親要素の .container または .container-fluid を削除します。

サンプル：no-gutters

列の折り返し

1行に12列以上（列の数値の合計が12以上）配置された場合、1行に収まらない列は新しい行に折り返されます。

以下の例の場合、1列目と2列目の合計は 9 + 4 = 13 となり、12より大きいため、2列目の.col-4 は1つのユニットとして新しい行に折り返されます。

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

列の改行

Flexbox で列を新しい行に改行するには、「width: 100% の要素を改行する位置に挿入する」と言うハックを使います。（Column breaks）

以下のように改行したい位置で、w-100 クラスを指定した要素を挿入します。

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- 強制的に次の列を改行 -->
    <div class="w-100"></div>
    
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

.col-6 .col-sm-3

以下は「responsive display utilities」の d-block と d-md-none（md 以上で非表示）を指定して、xs と sm の場合のみ w-100 を表示するようにして、768px未満の場合に改行するようにした例です。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 d-block d-md-none"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

col

サンプル：responsive display utilities と w-100

表示順の変更

表示順を指定するクラス（Order classes）を設定することで、列の表示順を変更することができます（Reordering）。

Order classes

.order- クラスを使用して、コンテンツの表示順序を指定することができます。

これらのクラスはレスポンシブ対応になっていて、ブレークポイントごとに .order-1 や .order-md-2 のように指定することができます。指定する数値は 0 から 12 までが全てのグリッドでサポートされています。

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-2">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

First, but unordered

Second, but last

Third, but first

要素は、order の値の昇順（小さい順）に配置され、order の値が同じ要素は、ソースコード内で現れる順に配置されます。以下は、bootstrap.css からの抜粋です。

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

・・・中略・・・

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

また、レスポンシブ対応の .order-first と .order-last と言うクラスもあり、以下のような設定（bootstrap.css より抜粋）になっていて、.order-first を指定すると表示順が一番最初に、.order-last を指定すると一番最後になります。これらのクラスは必要に応じて .order-* クラスと混在させることができます。

.order-first {
  order: -1;
}
.order-last {
  order: 13;
}

・・・

@media (min-width: 768px) {
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 13;
  }

}

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

First, but last

Second, but unordered

Third, but first

列のオフセット

Bootstrap のグリッドシステムでは、各列を左から順番に配置しますが、列と列の間に間隔を置きたい場合には、オフセットを指定します。

オフセットの指定には、レスポンシブ対応の .offset- クラスを使う方法と、マージン・ユーティリティ（margin utilities）を使う2つの方法があります。（Offsetting columns）

Offset classes（オフセットクラス）

.offset-{breakpoint}-* または .offset-* クラスを指定します。{breakpoint} には、sm/md/lg/xl のいずれかを、n には、0～11 の数値を指定して、この値でそのカラムの左側に設けるオフセット（間隔）の幅を指定します。以下は、bootstrap.css からの抜粋です。

.offset-1 {
  margin-left: 8.33333%;
}
.offset-2 {
  margin-left: 16.66667%;
}
.offset-3 {
  margin-left: 25%;
}

・・・中略・・・

.offset-10 {
  margin-left: 83.33333%;
}
.offset-11 {
  margin-left: 91.66667%;
}

@media (min-width: 576px) {
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333%;
  }
  .offset-sm-2 {
    margin-left: 16.66667%;
  }

  ・・・中略・・・

  .offset-sm-10 {
    margin-left: 83.33333%;
  }

  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}

例えば、.offset-md-4 は .col-md-4 を右側に4列分移動します。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-5 offset-md-1">.col-md-5 .offset-md-1</div>
    <div class="col-md-5 offset-md-1">.col-md-5 .offset-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

.col-md-4

.col-md-4 .offset-md-4

.col-md-5 .offset-md-1

.col-md-6 .offset-md-3

場合によっては、特定のブレークポイントで .offset-{breakpoint}-0 を使用してオフセットを解除することもできます。

サンプル：オフセットを解除

マージン・ユーティリティ

.mr-auto などのマージン・ユーティリティ（margin utilities）を使用して兄弟要素の列に間隔を設定することもできます。

以下は、bootstrap.css からのマージン・ユーティリティクラスの一部抜粋です。

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

・・・省略・・・

@media (min-width: 768px) {
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  
・・・省略・・・

例えば、.ml-md-auto は md（Medium）ブレークポイントの ml（margin left）が auto を意味します。

<div class="container offset_sample">
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-4 ml-md-auto">.col-md-4 .ml-md-auto</div>
    <div class="col-md-4 ml-md-auto">.col-md-4 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

.col-md-3

.col-md-3 .ml-auto

.col-md-4 .ml-md-auto

.col-auto .mr-auto

.col-auto

ネスト（入れ子）

Bootstrap では、グリッドをネスト（入れ子）することができます。言い換えると、グリッドシステムで配置した列の中に、新たにグリッドシステムを配置することができます。この時、内側のグリッドシステムも幅を12等分に分割することができます。（12の列を全て使用する必要はありません）

グリッドシステムでコンテンツをネストするには、既存の .col-{breakpoint}-* の列内に新しい .row と .col-{breakpoint}-* の列を追加します。（Nesting）

<div class="container">
  <div class="row">
    <div class="col-sm-9"> Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div>
        <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div>
      </div>
    </div>
    <div class="col-sm-3"> Level 1: .col-sm-3</div>
  </div>
</div>

この例では、わかり易いように列の高さを適当に指定しています。

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Level 1: .col-sm-3

Sass ミックスイン

Bootstrap の Sass のソースファイルを使用すれば、Sass 変数とミックスインを使用して、独自設定のレスポンシブなページレイアウトを作成することができます。Bootstrap の定義済みのグリッドクラスも、同じ Sass 変数とミックスインを使用して、レスポンシブ・レイアウトに対応したクラスを提供しています。（Sass mixins）

Sass 変数

Sass の変数とマップは、列の数、ガター（列の余白）、メディアクエリポイントを設定します。Bootstrap では、これらを使用して定義済みのグリッドクラスや以下のようなカスタムミックスインを生成しています。（以下の変数は、_variables.scss に記載されています）

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

ミックスイン

ミックスインは、グリッド変数と共に使用され、個々のグリッド列の CSS を生成します。以下は mixins フォルダ内の _grid.scss で、グリッド関連のミックスインが記述されています。

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container() {
  width: 100%;
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($grid-gutter-width / -2);
  margin-left: ($grid-gutter-width / -2);
}

@mixin make-col-ready() {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

使用例

Sass 変数やマップは、独自の値に変更することやデフォルトの値を使ってミックスインを利用することができます（変更後は再コンパイルが必要です）。

以下はデフォルトの値を使用して、独自の2カラムレイアウトを作成する例です。

.example-content-main：xs では積み重ね、sm では6カラム、lg では8カラム
.example-content-secondary：xs では積み重ね、sm では6カラム、lg では4カラム

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

コンパイルすると以下のような CSS が生成されます。

.example-container {
  width: 800px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.example-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.example-content-main {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 576px) {
  .example-content-main {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .example-content-main {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
}

.example-content-secondary {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 576px) {
  .example-content-secondary {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .example-content-secondary {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

上記の HTML があると、以下のような表示になります。

Main content

Secondary content

グリッドのカスタマイズ

用意されているグリッドの Sass 変数とマップを使用して、定義済みのグリッドクラスを完全にカスタマイズすることができます。ブレークポイントの数、メディアクエリのサイズ、コンテナの幅などを変更して再コンパイルします。（Customizing the grid）

列とガター

グリッドの列の数やガターの幅は Sass 変数で変更することができます。

$grid-columns ：グリッドの列の数を指定します（個々の列の幅をパーセントで生成します）。
$grid-gutter-width ：列のガター（パディング）の幅を指定します。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid tiers

グリッドのブレークポイントの数やコンテナの最大幅もカスタマイズすることができます。以下は、$grid-breakpoints と $container-max-widths を使ってブレークポイントを4つにする場合の一例です。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass の変数やマップをカスタマイズするときは、変更を保存して再コンパイルする必要があります。

※ グリッドに使用する値は px（ピクセル）の単位を使用する必要があります (rem, em, % は使用できません).。

メディア・オブジェクト

メディア・オブジェクト（Media object）は、繰り返し使われるブログのコメントやツイートなどのコンポーネントを作成するのに利用できます。

メディア・オブジェクトは画像などのメディアを含むコンテンツを作成する際に役に立ちます。

以下は、１つのメディア・オブジェクトの例です。コンテンツ周りに、.media と .media-body の２つのクラスを指定するだけです。オプションのパディングとマージンは「spacing utilities」を使用して設定することができます。

見易いように、外側の .media を指定した div 要素には、ボーダーとパディングのクラス「p-3」を設定しています。また、.mr-3 はデフォルトでは、margin-right: 1rem が設定されています。

<div class="media p-3">
  <img class="mr-3" src=".../120x120.jpg" alt="Photo of blue flower">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Flexbug #12: Inline elements aren’t treated as flex items

Internet Explorer 10-11　では、リンクやイメージ（または ::before と ::after 擬似要素）などのインライン要素はフレックスアイテムとしてレンダリングされません。

回避策としては、display の値にインライン以外の値（block, inline-block, flex）を設定します。「display utilities」の 1つである .d-flex（display:flex）を使って修正することが推奨されています。

ネスティング

メディアオブジェクトは無限にネストすることができますが、ある時点で停止することが推奨されています。親のメディアオブジェクトの .media-body 内に .media 配置することでネストすることができます。

<div class="media">
  <img class="mr-3" src=".../120x120" alt="Photo of blue flower">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src=".../120x120" alt="Photo of blue flower">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Media heading

位置揃え（Alignment）

メディアオブジェクト内の画像などのメディアは、.media-body のコンテンツに対して上部（デフォルト）、中央、下部に配置させることができます。（Alignment）

以下のクラスをメディアの要素（またはそれを囲む a 要素）に指定します。

align-self-start：上部（デフォルト）揃え
align-self-center：中央揃え
align-self-end：下部揃え

align-self-start：上部（デフォルト）揃え

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla.・・・</p>
    <p>Donec sed odio dui. Nullam quis risus eget ・・・</p>
  </div>
</div>

Top-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

align-self-center：中央揃え

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. ・・・</p>
    <p class="mb-0">Donec sed odio dui. ・・・</p>
  </div>
</div>

Center-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

align-self-end：下部揃え

以下の例では、メディアを囲む a 要素に .align-self-end を指定しています。

<div class="media">
  <a href="#" class="align-self-end"><img class="mr-3" src=".../64x64" alt="Generic placeholder image"></a>
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla ・・・</p>
    <p class="mb-0">Donec sed odio dui.  ・・・</p>
  </div>
</div>

Bottom-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

順序（Order）

メディアオブジェクト内のコンテンツの順序を入れ替えるには、HTML 自体を変更するか、Order classes（.order-）を使用します。

以下は、HTML 自体を変更して、コンテンツの順序を入れ替える例です。

<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img class="ml-3" src=".../120x120" alt="Generic placeholder image">
</div>

Media object

以下は、メディアに .order-2 を、.media-body の要素に .order-1 を指定して順序を入れ替える例です。

<div class="media">
  <img class="order-2 ml-3" src=".../120x120" alt="Generic placeholder image">
  <div class="media-body order-1">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

Media object

メディアリスト

メディアオブジェクトは構造上の必要条件が少ないため、これらのクラスをリストの HTML 要素に使用することもできます。ul または ol 要素に .list-unstyled クラスを追加して、デフォルトのスタイルを削除し、.media クラスを li 要素に指定します。必要に応じて spacing utilities を利用します。

<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>

List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

レイアウトのユーティリティ

Bootstrap にはコンテンツの表示、非表示、整列、およびスペーシング（間隔調整）のための数多くのユーティリティークラスが用意されています。（Utilities for layout）

display プロパティの変更

display プロパティの値をレスポンシブに切り替えるには、表示ユーティリティ（display utilities）を使用します。グリッドシステム、コンテンツ、またはコンポーネントと組み合わせて、特定のビューポートで表示または非表示にします。

Flexboxのオプション

Bootstrap 4 は flexbox を使って構築されていますが、全ての要素の display プロパティの値が display: flex に設定変更されているわけではありません（コンポーネントのほとんどは、フレックスボックス対応として構築されています）。

display: flex を要素に設定する必要がある場合は、 .d-flex またはレスポンシブ対応のクラス（例：.d-sm-flex ）を使用します。このクラスや display 値（display: flex）の指定は、サイジングやアライメント（位置揃え）、スペーシング（間隔調整）などのフレックスボックスユーティリティ（flexbox utilities）を使用するために必要になります。

マージンとパディング

マージンとパディングのスペーシングユーティリティ（spacing utilities）を使用して、要素とコンポーネントの間隔とサイズを制御することができます。Bootstrap 4 には、1rem をデフォルトとする $spacer 変数に基づいて、、スペーシングユーティリティの5つのレベルのスケールが含まれています。

すべてのビューポートを対象とする値（margin-right：1rem の場合は .mr-3 等）か、特定のビューポートを対象とする値（ブレークポイントが md で、margin-right:1rem 場合は .mr-md-3）を選択します。

Visibility（可視性）の切り替え

display を切り替える必要がない場合は、可視性ユーティリティ（visibility utilities）で要素の可視性を切替えることができます。目に見えない要素はページのレイアウトに影響を与えますが、視覚的にはユーザー（閲覧者）には表示されません。

Web Design Leaves