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

Bootstrap でのコンテナについて紹介します。
<!DOCTYPE html>
  <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>
  <div class="container">
    container クラスの枠です。
</body>
</html>
<!DOCTYPE html>
  <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>
  <div class="container-fluid">
    container-fluid クラスの枠です。
</body>
</html>
プログラム例 (container と container-fluid の違い)
サンプルコードを利用して、container と container-fluid の動作の違いを確認します。

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

ContainerDemo.html
<!DOCTYPE html>
  <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>
  <div class="container" style="border:1px solid #ff6a00">
    container クラスの枠です。
  <div class="container-fluid" style="border:1px solid #ff6a00">
    container-fluid クラスの枠です。
</body>
</html>
クラスに "continer" を指定したdiv枠と、"continer-fluid" を指定したdiv枠を並べて動作の違いを確認します。

  <div class="container" style="border:1px solid #ff6a00">
    container クラスの枠です。
  <div class="container-fluid" style="border:1px solid #ff6a00">
    container-fluid クラスの枠です。
上記のHTMLファイルをWebブラウザ(Microsoft Edge)で表示しますWebブラウザのウィンドウ幅が広い場合、下図の画面が表示されます。container-fluid を指定した枠はウィンドウ幅いっぱいに表示されます。一方 container を指定した枠は 1140 ピクセルの幅で表示されます。

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

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

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

  <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>
  <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>
</body>
</html>
              BootstrapのList Group を利用する
              NuGet を利用してVisual Studio のプロジェクトに Bootstrap をインストールする
              Float, Flexbox, Gridレイアウト, Bootstrap での段組みページの作成の違いについて
              段組み間の余白を調整する
              ウィンドウ幅に応じて段組みを変更する
              ASP.NET アプリケーションに Bootstrap5 をインストールする
              BootstrapのList Group をドラッグで順番を入れ替えられるようにする
              Bootstrap のパッケージを利用している ASP.NET Core プロジェクトでビルド時に "Two assets found targeting the same path with incompatible asset kinds" エラーが発生する
目次

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