---
title: "Bootstrapのグリッドやコンポーネントが崩れるときの対処"
description: "Bootstrapでカラムが揃わない、モーダルやタブが反応しないというトラブルに悩む開発者向け。読み込み順やHTML構造の崩れ、バージョン間の仕様変更が原因かどうかを素早く切り分けられます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/bootstrap-grid-not-aligning"
markdown: "https://giga-site.com/articles/bootstrap-grid-not-aligning/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Bootstrapのグリッドやコンポーネントが崩れるときの対処

Bootstrapで「カラムが揃わない」「モーダルやタブが反応しない」というトラブルは、多くがCSS/JSの読み込み順やHTML構造の崩れに起因します。コンテナとrow、colの入れ子ルールやバージョン間の仕様変更を押さえると、原因の大半は素早く特定できます。

> Source HTML: https://giga-site.com/articles/bootstrap-grid-not-aligning
> Article index: https://giga-site.com/articles/index.md

## グリッドはcontainer-row-colの入れ子が基本

Bootstrapのグリッドはcontainer（またはcontainer-fluid）の中にrow、そのrowの直下にcolを置く構造が前提です。この入れ子が崩れると、想定の余白や折り返しが効かなくなります。

よくある失敗は、rowを挟まずにcontainerの直下へcolを置く、あるいはcolの中に直接別のcolを入れてしまうケースです。colはrowの直接の子であるべきで、さらに分割したいときはcol内に新しいrowを作ってからcolを並べます。

rowには左右に負のマージンが設定されており、colの内側余白と相殺して整列します。rowを省略するとこの相殺が働かず、端がはみ出したり余白がずれたりします。

## CSSとJSの読み込み順を確認する

BootstrapのCSSはhead内で、なるべく自前CSSより前に読み込みます。逆にしてしまうと自分の上書きがBootstrapに打ち消されることがあります。JSはbodyの閉じタグ直前に置くのが定石です。

ドロップダウンやモーダル、トグルなどの動的コンポーネントはJavaScriptに依存します。バージョン5系ではjQueryが不要になり、代わりにPopperを含むバンドルJSが必要なケースがあります。JSが読み込まれていない、または順序が誤っていると、これらが無反応になります。

## 症状別チェック表

Bootstrapのグリッドやコンポーネントが崩れるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## バージョン差による違いに注意

Bootstrapは4系と5系でクラス名や仕様が変わっています。たとえば余白系のクラスで左右を表す接尾辞が変更され、フォーム関連のマークアップも見直されました。古いテンプレートを5系の読み込みで使うと崩れます。

また、data属性の名前も5系ではプレフィックスが付く形に変わっています。コピー元のサンプルと読み込んでいるBootstrapのバージョンが一致しているかを最初に確認してください。

## 崩れたときの切り分け手順

原因を順に潰していくと特定が早まります。

1. 読み込んでいるBootstrapのバージョンを確認する
2. CSSがhead内、JSがbody末尾にあり、自前CSSとの順序が正しいか見る
3. container-row-colの入れ子が崩れていないかHTMLを点検する
4. 動的コンポーネントが効かないならコンソールでJSエラーを確認する
5. サンプルコードのクラス名や属性名がバージョンに合っているか照合する

## レビュー共有で崩れを見せ合う

Bootstrapの崩れは画面幅やブラウザによって出方が変わるため、文章だけでは伝わりにくいことがあります。実際の表示を関係者が同じ環境で見られると、原因の合意が早まります。

ギガサイト便にHTMLとCSS/JSをまとめたZIPをドロップすれば、その場で共有URLが発行され、CDNのエッジ配信で各自の端末から素早く確認できます。修正後は同じURLのままファイルを差し替えられるので、崩れ箇所の確認とレビューのやり取りを一つのリンクで完結できます。

## よくある質問

### カラムが横に並ばず縦になってしまいます。

colをrowで包んでいない、またはcontainerの直下にcolを置いている可能性があります。container内にrow、rowの直接の子としてcolを配置する基本構造を確認してください。

### モーダルやドロップダウンが反応しません。

これらはJavaScriptに依存します。BootstrapのJSがbody末尾で読み込まれているか、5系ではPopperを含むバンドルが必要かを確認し、コンソールのエラーも見てください。

### サンプル通りに書いたのに崩れます。

サンプルのバージョンと読み込んでいるBootstrapのバージョンが食い違っている恐れがあります。4系と5系ではクラス名やdata属性が変わっているため、両者を一致させてください。

### 自前のCSSがBootstrapに打ち消されます。

BootstrapのCSSを自前CSSより前に読み込むと、後から書いた自分のスタイルが優先されやすくなります。読み込み順を見直し、必要なら詳細度を上げてください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [scriptのdefer/asyncで読み込み順が崩れて動かないときの対処](https://giga-site.com/articles/defer-async-script-order/index.md)
- [CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処](https://giga-site.com/articles/grid-layout-collapses/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Bootstrapのグリッドやコンポーネントが崩れるときの対処",
  "description": "Bootstrapでカラムが揃わない、モーダルやタブが反応しないというトラブルに悩む開発者向け。読み込み順やHTML構造の崩れ、バージョン間の仕様変更が原因かどうかを素早く切り分けられます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/bootstrap-grid-not-aligning",
  "url": "https://giga-site.com/articles/bootstrap-grid-not-aligning",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "カラムが横に並ばず縦になってしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "colをrowで包んでいない、またはcontainerの直下にcolを置いている可能性があります。container内にrow、rowの直接の子としてcolを配置する基本構造を確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルやドロップダウンが反応しません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "これらはJavaScriptに依存します。BootstrapのJSがbody末尾で読み込まれているか、5系ではPopperを含むバンドルが必要かを確認し、コンソールのエラーも見てください。"
      }
    },
    {
      "@type": "Question",
      "name": "サンプル通りに書いたのに崩れます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "サンプルのバージョンと読み込んでいるBootstrapのバージョンが食い違っている恐れがあります。4系と5系ではクラス名やdata属性が変わっているため、両者を一致させてください。"
      }
    },
    {
      "@type": "Question",
      "name": "自前のCSSがBootstrapに打ち消されます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "BootstrapのCSSを自前CSSより前に読み込むと、後から書いた自分のスタイルが優先されやすくなります。読み込み順を見直し、必要なら詳細度を上げてください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```