Bootstrap でのコンテナの利用 (continer と container-fluid の違い)

Bootstrap でのコンテナについて紹介します。

概要

BootSstrapを利用する場合に一番外側に配置する枠がコンテナです。
枠の要素のクラスに container または、 container-fluid を指定するとコンテナとして動作します。

記述例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="SimpleBootstrap.css" />
</head>
<body>

  <div class="container">
    container クラスの枠です。
  </div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="SimpleBootstrap.css" />
</head>
<body>

  <div class="container-fluid">
    container-fluid クラスの枠です。
  </div>

</body>
</html>

プログラム例 (container と container-fluid の違い)

サンプルコードを利用して、container と container-fluid の動作の違いを確認します。

コード

下記のHTMLファイルを作成します。

ContainerDemo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="SimpleBootstrap.css" />
</head>
<body>

  <div class="container" style="border:1px solid #ff6a00">
    container クラスの枠です。
  </div>

  <hr/>

  <div class="container-fluid" style="border:1px solid #ff6a00">
    container-fluid クラスの枠です。
  </div>

</body>
</html>

解説

クラスに "continer" を指定したdiv枠と、"continer-fluid" を指定したdiv枠を並べて動作の違いを確認します。

  <div class="container" style="border:1px solid #ff6a00">
    container クラスの枠です。
  </div>

  <hr/>

  <div class="container-fluid" style="border:1px solid #ff6a00">
    container-fluid クラスの枠です。
  </div>

表示結果

上記のHTMLファイルをWebブラウザ(Microsoft Edge)で表示しますWebブラウザのウィンドウ幅が広い場合、下図の画面が表示されます。container-fluid を指定した枠はウィンドウ幅いっぱいに表示されます。一方 container を指定した枠は 1140 ピクセルの幅で表示されます。

Webブラウザのウィンドウサイズを縮めます。container-fluid の枠はウィンドウサイズに合わせて枠の大きさも小さくなります。container の枠は枠の大きさは1140ピクセルのまま変わらず、左右の余白(マージン)が短くなります。

ウィンドウサイズ 1200ピクセルまでは container枠は1140ピクセルの幅で表示されます。

ウィンドウサイズが1200ピクセルより短くなると、container の枠の幅が960ピクセルになり、幅が短くなります。

ウィンドウサイズをさらに縮めます。container の枠の幅は960ピクセルで表示され、左右のマージンが短くなります。

ウィンドウの幅が992ピクセル以下になると、container の枠の幅は720ピクセルで表示されます。

ウィンドウ幅をさらに縮めます。container の枠幅は720ピクセルのまま左右のマージンが短くなります。

768ピクセル以下になると、continer の枠幅は540ピクセルになります。

さらにウィンドウ幅を縮めます。containerの枠幅540ピクセルのまま、左右のマージンが短くなります。

ウィンドウ幅が576ピクセル以下になるとcontainer 枠はウィンドウ幅いっぱいに表示されます。

プログラム例2 (container と container-fluid の違い)

コード

下記のHTMLファイルを作成します。

Column-01.css

#column1 {
    border: 1px solid #bd1515;
    background-color: #ffc5c5;
}

#column2 {
    border: 1px solid #f27200;
    background-color: #ffd89b;
}

#column3 {
    border: 1px solid #889100;
    background-color: #f4ff42;
}

#column4 {
    border: 1px solid #58b300;
    background-color: #c5f09b;
}

Column-01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="Column-01.css" />
</head>
<body>
  <div class="container-fluid">
  <!-- または <div class="container"> -->
    <div class="row">
      <div class="col-1" id="column1">項目1</div>
      <div class="col-1" id="column2">項目2</div>
      <div class="col-6" id="column3">項目3</div>
      <div class="col-4" id="column4">項目4</div>
    </div>
  </div>
</body>
</html>