Bootstrap チートシート

Bootstrapとは？

Bootstrapは、レスポンシブなWebサイトを効率的に構築できる世界で最も人気のあるCSSフレームワークです。12カラムグリッドシステム、豊富なUIコンポーネント、ユーティリティクラスを提供し、開発スピードを大幅に向上させます。

レスポンシブグリッドシステム UIコンポーネント

基本セットアップ

CDN経由で最も簡単に導入できます（Bootstrap 5）

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript (Bundle: Popper.js含む) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

CSSは<head>内に配置

JavaScriptは</body>直前に配置

基本テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Template</title>
  <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

コンテナ

<!-- 固定幅（レスポンシブブレークポイント） -->
<div class="container">...</div>

<!-- 常に100%幅 -->
<div class="container-fluid">...</div>

<!-- 特定サイズまで100% -->
<div class="container-sm">...</div>  <!-- 576px以上で固定 -->
<div class="container-md">...</div>  <!-- 768px以上で固定 -->
<div class="container-lg">...</div>  <!-- 992px以上で固定 -->
<div class="container-xl">...</div>  <!-- 1200px以上で固定 -->
<div class="container-xxl">...</div> <!-- 1400px以上で固定 -->

グリッドシステム基本

12カラムシステム。合計が12になるように配分

<!-- 基本的な行と列 -->
<div class="row">
  <div class="col-4">4カラム</div>
  <div class="col-4">4カラム</div>
  <div class="col-4">4カラム</div>
</div>

<!-- 自動幅 -->
<div class="row">
  <div class="col">自動幅</div>
  <div class="col">自動幅</div>
</div>

<!-- 固定幅と自動幅の混在 -->
<div class="row">
  <div class="col-6">6カラム（固定）</div>
  <div class="col">残りの幅</div>
</div>

レスポンシブグリッド

ブレークポイント

• xs: <576px（デフォルト）

• sm: ≥576px

• md: ≥768px

• lg: ≥992px

• xl: ≥1200px

• xxl: ≥1400px

<!-- モバイル: 12列、タブレット: 6列、PC: 4列 -->
<div class="row">
  <div class="col-12 col-md-6 col-lg-4">カラム1</div>
  <div class="col-12 col-md-6 col-lg-4">カラム2</div>
  <div class="col-12 col-md-6 col-lg-4">カラム3</div>
</div>

ボタン

<!-- 基本ボタン -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

<!-- アウトライン -->
<button class="btn btn-outline-primary">Outline</button>

<!-- サイズ -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

カラーユーティリティ

<!-- テキストカラー -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>

<!-- 背景色 -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-light">Light background</div>

スペーシング

{property}{sides}-{size}の形式

• m=margin, p=padding

• t=top, b=bottom, s=start（左）, e=end（右）, x=水平, y=垂直

• 0〜5（0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem）

<div class="mt-3">Margin top 1rem</div>
<div class="mb-4">Margin bottom 1.5rem</div>
<div class="mx-auto">中央揃え</div>
<div class="p-3">Padding 1rem (全方向)</div>
<div class="px-4">Padding 1.5rem (水平)</div>
<div class="py-2">Padding 0.5rem (垂直)</div>

テキストユーティリティ

<!-- 配置 -->
<p class="text-start">左揃え</p>
<p class="text-center">中央揃え</p>
<p class="text-end">右揃え</p>

<!-- サイズ -->
<h1 class="display-1">Display 1</h1>
<p class="fs-1">Font size 1</p>
<p class="fs-6">Font size 6</p>

<!-- ウェイト -->
<p class="fw-bold">太字</p>
<p class="fw-normal">通常</p>
<p class="fw-light">細字</p>

<!-- その他 -->
<p class="text-decoration-underline">下線</p>
<p class="text-uppercase">大文字</p>

フォーム

<!-- 基本フォーム -->
<div class="mb-3">
  <label for="email" class="form-label">メールアドレス</label>
  <input type="email" class="form-control" id="email">
</div>

<!-- セレクト -->
<select class="form-select">
  <option selected>選択してください</option>
  <option value="1">オプション1</option>
</select>

<!-- チェックボックス -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">同意する</label>
</div>

<!-- フローティングラベル -->
<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput">
  <label for="floatingInput">メールアドレス</label>
</div>

カード

<!-- 基本カード -->
<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードの説明文</p>
    <a href="#" class="btn btn-primary">詳細</a>
  </div>
</div>

<!-- カードグループ（3カラム） -->
<div class="row">
  <div class="col-md-4"><div class="card">...</div></div>
  <div class="col-md-4"><div class="card">...</div></div>
  <div class="col-md-4"><div class="card">...</div></div>
</div>

ナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">サイト名</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">について</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

モーダル

<!-- トリガーボタン -->
<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルタイトル</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">モーダルの内容</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

アラート

<!-- 基本アラート -->
<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-warning">Warning alert</div>

<!-- 閉じるボタン付き -->
<div class="alert alert-warning alert-dismissible fade show">
  警告メッセージ
  <button type="button" class="btn-close"
          data-bs-dismiss="alert"></button>
</div>

バッジ

<!-- 基本バッジ -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>

<!-- 丸みのあるバッジ -->
<span class="badge rounded-pill bg-primary">Pill badge</span>

<!-- ボタンとの組み合わせ -->
<button class="btn btn-primary">
  通知 <span class="badge bg-danger">9</span>
</button>

カルーセル（スライダー）

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button"
          data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button"
          data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

テーブル

<!-- 基本テーブル -->
<table class="table">
  <thead>
    <tr>
      <th>ID</th><th>名前</th><th>メール</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>山田太郎</td><td>taro@example.com</td>
    </tr>
  </tbody>
</table>

<!-- スタイルバリエーション -->
<table class="table table-striped">...</table>  <!-- 縞模様 -->
<table class="table table-hover">...</table>   <!-- ホバー -->
<table class="table table-bordered">...</table> <!-- ボーダー -->
<table class="table table-sm">...</table>      <!-- コンパクト -->

<!-- レスポンシブテーブル -->
<div class="table-responsive">
  <table class="table">...</table>
</div>

ドロップダウン

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" data-bs-toggle="dropdown">
    ドロップダウン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他</a></li>
  </ul>
</div>

アコーディオン

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
              data-bs-toggle="collapse" data-bs-target="#collapseOne">
        アコーディオン項目 #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        アコーディオンの内容
      </div>
    </div>
  </div>
</div>

表示・非表示

<!-- 基本的な表示制御 -->
<div class="d-none">非表示</div>
<div class="d-block">ブロック表示</div>
<div class="d-inline">インライン表示</div>
<div class="d-flex">フレックス表示</div>

<!-- レスポンシブ表示制御 -->
<div class="d-none d-md-block">768px以上で表示</div>
<div class="d-md-none">768px未満で表示</div>

フレックスユーティリティ

<!-- 基本フレックス -->
<div class="d-flex">...</div>
<div class="d-inline-flex">...</div>

<!-- 方向 -->
<div class="d-flex flex-row">横並び</div>
<div class="d-flex flex-column">縦並び</div>

<!-- 配置 -->
<div class="d-flex justify-content-start">左揃え</div>
<div class="d-flex justify-content-center">中央揃え</div>
<div class="d-flex justify-content-end">右揃え</div>
<div class="d-flex justify-content-between">両端揃え</div>

<!-- 垂直配置 -->
<div class="d-flex align-items-start">上揃え</div>
<div class="d-flex align-items-center">中央揃え</div>
<div class="d-flex align-items-end">下揃え</div>

影（シャドウ）

<div class="shadow-none">影なし</div>
<div class="shadow-sm">小さい影</div>
<div class="shadow">通常の影</div>
<div class="shadow-lg">大きい影</div>

ボーダー

<!-- ボーダー追加 -->
<div class="border">全辺にボーダー</div>
<div class="border-top">上のみ</div>
<div class="border-end">右のみ</div>
<div class="border-bottom">下のみ</div>
<div class="border-start">左のみ</div>

<!-- ボーダー色 -->
<div class="border border-primary">Primary border</div>
<div class="border border-success">Success border</div>

<!-- 角丸 -->
<div class="rounded">角丸</div>
<div class="rounded-circle">円形</div>
<div class="rounded-pill">ピル型</div>

リストグループ

<!-- 基本リスト -->
<ul class="list-group">
  <li class="list-group-item">項目1</li>
  <li class="list-group-item active">項目2（アクティブ）</li>
  <li class="list-group-item">項目3</li>
</ul>

<!-- カラーバリエーション -->
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
</ul>

実践Tips

グリッドレイアウトのコツ

• 合計が12になるように列を配分
• レスポンシブは小さい画面から設計（モバイルファースト）
• 余白は.gx-*や.gy-*で調整（例: .gx-4）

カスタマイズ

• カスタムCSSは必ずBootstrapの後に読み込む
• !importantは極力避け、詳細度で上書き
• CSS変数（--bs-primary等）で色をカスタマイズ

パフォーマンス

• 本番環境ではmin版を使用（bootstrap.min.css）
• 使わないコンポーネントは読み込まない（カスタムビルド）
• CDNを利用してキャッシュを活用

よくある落とし穴

• JavaScriptが必要なコンポーネントはJSの読み込み必須
• .containerの中に.containerはネストしない
• .rowの直下には必ず.colを配置