Bootstrapグリッドシステムを使いこなす：col-lg-, col-md-, col-sm-* 以外の方法

2024-04-02

Bootstrapにおけるcol-lg-, col-md-, col-sm-*の違い

各クラスの詳細

col-lg-*: デスクトップ画面（1200px以上）で適用されます。
col-md-*: タブレット画面（992px～1199px）で適用されます。

例

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

上記の例では、

デスクトップ画面では、最初のカラムは画面の4分の1、2番目のカラムは画面の4分の3を占めます。
タブレット画面では、両方のカラムが画面の半分ずつになります。
スマートフォン画面では、両方のカラムが画面全体を占めます。

これらのクラスは組み合わせて使用することができます。
詳細については、Bootstrapの公式ドキュメントを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrapグリッドシステムサンプル</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha384-B0vP5xm8lpOi+qY9f0+rFWQqdtR/7F73e41d7C1qD0r4j9dRnO9j37ewc20xe/PU" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Bootstrapグリッドシステムサンプル</h1>
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12">
        <h2>カラム1</h2>
        <p>このカラムは、デスクトップ画面では画面の4分の1、タブレット画面では画面の半分、スマートフォン画面では画面全体を占めます。</p>
      </div>
      <div class="col-lg-8 col-md-6 col-sm-12">
        <h2>カラム2</h2>
        <p>このカラムは、デスクトップ画面では画面の4分の3、タブレット画面では画面の半分、スマートフォン画面では画面全体を占めます。</p>
      </div>
    </div>
  </div>
</body>
</html>

ポイント

Bootstrapのグリッドシステムは、画面サイズに応じてカラムレイアウトを自動的に調整する便利な機能です。
col-lg-, col-md-, col-sm-* は、それぞれ異なる画面サイズに対応したカラムクラスです。
これらのクラスを組み合わせて使用することで、さまざまなレイアウトを作成することができます。

Bootstrapの公式ドキュメントには、グリッドシステムに関する詳細情報が掲載されています。
サンプルコードは、Bootstrap公式サイトのサンプルコードを参考に作成しました。

Bootstrapグリッドシステムのその他の方法

グリッドオプション

Bootstrap 4.6以降では、グリッドオプションを使用して、グリッドシステムの動作をカスタマイズすることができます。

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

<script>
  $(document).ready(function() {
    $('.container').bootstrapGrid({
      gutter: 30,
      breakpoints: {
        xs: 768,
        sm: 992,
        md: 1200,
        lg: 1440
      }
    });
  });
</script>

gutter オプションで、カラム間の余白を30pxに設定しています。
breakpoints オプションで、各ブレークポイントの画面サイズを変更しています。

カスタムカラムクラス

Bootstrapでは、col クラスを拡張して、カスタムカラムクラスを作成することができます。

.custom-col-lg-4 {
  width: 33.3333%;
}

@media (max-width: 1199px) {
  .custom-col-lg-4 {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .custom-col-lg-4 {
    width: 100%;
  }
}

デスクトップ画面では、custom-col-lg-4 クラスのカラムは画面の3分の1を占めます。

Flexbox

Bootstrap 5では、Flexboxを使用してグリッドレイアウトを作成することもできます。

<div class="container">
  <div class="row d-flex flex-wrap">
    <div class="col-lg-4 col-md-6 col-sm-12 d-flex flex-column">
      ...
    </div>
    <div class="col-lg-8 col-md-6 col-sm-12 d-flex flex-column">
      ...
    </div>
  </div>
</div>