ホーム

はじめに

本ドキュメントは Bootstrap5 実践版ドキュメントです。 実際にプロジェクトでよく使うソースコードを中心に解説しております。 コード例は、コンポーネントページから閲覧ください。

Bootstrap5 主な変更点

jQuery の廃止

Bootstrap4 では標準で jQuery が内包されており依存する形で bootstrap.js が動いていましたが、 Bootstrap5 では jQuery が廃止 され脱jQuery となりました。 最近では、Vue.js や React.js 等が登場して jQuery 以外の JavaScript フレームワークが非常に人気を集めており、 jQuery との依存関係を無くなった事でそれらのフレームワークでも使いやすくなりました。 また、jQuery との依存関係が無くなった事でファイルサイズが軽くなりページの読み込みが高速化されました。

Bootstrap4 でのJS読み込み例

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Bootstrap5 でのJS読み込み

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

IEのサポート終了等サポートブラウザの刷新

主要なプラウザやプラットフォームの最新安定リリース版をサポートしております。 また、Bootstrap4 まではサポートされていた Internet Explorer が Bootstrap5 ではサポートが終了する事になりました。 Internet Explorer で Bootstrap を使用したい場合は Bootstrap4 を使用してください。

ブラウザのサポート状況に関しては以下です。

デスクトップ

ブラウザーBootstrap4Bootstrap5
Chrome45以上60以上
Firefox38以上60以上
Microsoft Edge12以上最新版
Safari9以上12以上
Internet Explorer10以上サポート終了

モバイル

ブラウザーBootstrap4Bootstrap5
Chrome最新版最新版
Safari最新版最新版
Firefox最新版最新版
Android Browser & WebViewv5.0以上v6.0以上

CSSカスタムプロパティの追加

IEのサポート終了によりIEで使用する事の出来なかったCSSカスタムプロパティ(CSS変数)が大幅に拡充されました。 全てのカスタムプロパティは --bs- から始まっています。 Bootstrapにはルート変数が用意されており以下が一覧となります。

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

a {
  color: var(--bs-blue);
}

1サイズ大きいブレイクポイントの追加

Bootstrap4 までの4つブレイクポイントでしたが Bootstrap5 では一つ大きいサイズ xxl が追加されて以下5つになりました。

  • 576px: Small
  • 768px: Medium
  • 992px: Large
  • 1200px: Extra Large

グリッドシステムの拡張

レスポンシブWebデザインを行う上で重要なグリッドシステムに機能拡張があり Gutters が実装されました。 Gutters (.gx-*)を使用する事でカラムの間に隙間を追加する事が可能となります。

実装例

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>