Bootstrap

BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。

概要

Bootstrap
公式サイト https://getbootstrap.com/
開発者 Twitter, Inc.
ライセンス MIT
グリッド 12列
GitHub stars 159k
Twitter @getbootstrap
Bootstrap v5.2.1
モジュールサイズ
bootstrap.min.css190KB
bootstrap.bundle.min.js78.5KB

チートシート

基本テンプレート

Bootstrap CSSフレームワークを使うときの基本テンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
  </head>
  <body>
    <!--
      content
    -->
    <script src="/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

CDN

Bootstrap CSSフレームワークはCDN (Contents Delivery Network) を通じて導入できる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
      crossorigin="anonymous">
  </head>
  <body>
    <!--
      content
    -->
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
      crossorigin="anonymous">
    </script>
  </body>
</html>

.card

Bootstrap でカードを作成するには、card クラスを指定する。

<div class="card">
  <div class="card-body">カード</div>
</div>
カード

.card-title

Bootstrap でカードにタイトルを付けるには、card-title クラスを指定する。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p>カード</p>
  </div>
</div>
タイトル

カード

.card-header

Bootstrap でカードにヘッダを付けるには、card-header クラスを指定する。

<div class="card">
  <div class="card-header">ヘッダ</div>
  <div class="card-body">カード</div>
</div>
ヘッダ
カード

Bootstrap でカードにフッタを付けるには、card-footer クラスを指定する。

<div class="card">
  <div class="card-body">カード</div>
  <div class="card-footer">フッタ</div>
</div>
カード

.card-img-top

Bootstrap でカードに画像を付けるには、card-img-top クラスを指定する。

<div class="card" style="width:20rem;">
  <img src="card.png" class="card-img-top">
  <div class="card-body">カード</div>
</div>
card
カード

.d-none

Bootstrapを使って要素を非表示にするには、d-none クラスを指定する。

<p class="d-none">このテキストは表示されません。</p>

このテキストは表示されません。

サフィックス(接尾辞)にブレークポイントを指定することもできる。

<p class="d-none-sm">画面サイズがsmの場合、このテキストは表示されません。</p>
<p class="d-none-md">画面サイズがmdの場合、このテキストは表示されません。</p>
<p class="d-none-lg">画面サイズがlgの場合、このテキストは表示されません。</p>
<p class="d-none-xl">画面サイズがxlの場合、このテキストは表示されません。</p>
<p class="d-none-xxl">画面サイズがxxlの場合、このテキストは表示されません。</p>

.container

Bootstrap で左右に適切な余白を持たせるには、container クラスを指定する。

<div class="container">
  初春の令月にして、気淑よく風和やわらぎ、
  梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。

.col-*

Bootstrap を使って12列グリッドレイアウトを作成するには、次に示すクラスを指定する。

<div class="row mt-1">
  <div class="col-1 bg-info">col-1</div>
  <div class="col-11 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-2 bg-info">col-2</div>
  <div class="col-10 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-3 bg-info">col-3</div>
  <div class="col-9 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-4 bg-info">col-4</div>
  <div class="col-8 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-5 bg-info">col-5</div>
  <div class="col-7 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-6 bg-info">col-6</div>
  <div class="col-6 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-7 bg-info">col-7</div>
  <div class="col-5 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-8 bg-info">col-8</div>
  <div class="col-4 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-9 bg-info">col-9</div>
  <div class="col-3 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-10 bg-info">col-10</div>
  <div class="col-2 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-11 bg-info">col-11</div>
  <div class="col-1 bg-light"></div>
</div">
<div class="row mt-1">
  <div class="col-12 bg-info">col-12</div>
</div">
col-1
col-2
col-3
col-4
col-5
col-6
col-5
col-8
col-9
col-10
col-11
col-12

.col-xs-{n}

Bootstrap では、画面の横幅が Extra Small (<576px) の場合の列幅を col-xs-1 から col-xs-12 までのクラスで指定できる。

<div class="row">
  <div class="col-6 col-xs-12">1</div>
  <div class="col-6 col-xs-12">2</div>
</div>
1
2

.col-sm-{n}

Bootstrap では、画面の横幅が Small (≥576px) の場合の列幅を col-sm-1 から col-sm-12 までのクラスで指定できる。

<div class="row">
  <div class="col-12 col-sm-6">1</div>
  <div class="col-12 col-sm-6">2</div>
</div>
1
2

.col-md-{n}

Bootstrap では、画面の横幅が Medium (≥768px) の場合の列幅を col-md-1 から col-md-12 までのクラスで指定できる。

<div class="row">
  <div class="col-12 col-md-4">1</div>
  <div class="col-12 col-md-4">2</div>
  <div class="col-12 col-md-4">3</div>
</div>
1
2
3

.col-lg-{n}

Bootstrap では、画面の横幅が Large (≥992px) の場合の列幅を col-lg-1 から col-lg-12 までのクラスで指定できる。

<div class="row">
  <div class="col-12 col-lg-3">1</div>
  <div class="col-12 col-lg-3">2</div>
  <div class="col-12 col-lg-3">3</div>
  <div class="col-12 col-lg-3">4</div>
</div>
1
2
3
4

.col-xl-{n}

Bootstrap では、画面の横幅が Extra Large (≥1200px) の場合の列幅を col-xl-1 から col-xl-12 までのクラスで指定できる。

<div class="row">
  <div class="col-12 col-xl-2">1</div>
  <div class="col-12 col-xl-2">2</div>
  <div class="col-12 col-xl-2">3</div>
  <div class="col-12 col-xl-2">4</div>
  <div class="col-12 col-xl-2">5</div>
  <div class="col-12 col-xl-2">6</div>
</div>
1
2
3
4
5
6

.col-xxl-{n}

Bootstrap では、画面の横幅が Extra Extra Large (≥1400px) の場合の列幅を col-xxl-1 から col-xxl-12 までのクラスで指定できる。

<div class="row">
  <div class="col-6 col-xxl-1">1</div>
  <div class="col-6 col-xxl-1">2</div>
  <div class="col-6 col-xxl-1">3</div>
  <div class="col-6 col-xxl-1">4</div>
  <div class="col-6 col-xxl-1">5</div>
  <div class="col-6 col-xxl-1">6</div>
  <div class="col-6 col-xxl-1">7</div>
  <div class="col-6 col-xxl-1">8</div>
  <div class="col-6 col-xxl-1">9</div>
  <div class="col-6 col-xxl-1">10</div>
  <div class="col-6 col-xxl-1">11</div>
  <div class="col-6 col-xxl-1">12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

.img-fluid

Bootstrapで画像をレスポンシブにするには、img 要素に img-fluid クラスを指定する。

※fluidとは「流動的」という意味

レスポンシブな画像には、次のCSSプロパティが設定される。

これにより、親要素の幅に合わせて画像が拡大・縮小する。

<img class="img-fluid" src="1280x720.png">
fluid image

.rounded

Bootstrapで画像の角を丸くするには、img 要素に rounded クラスを指定する。

<img class="rounded" src="portrait.webp">
rounded image

.img-thumbnail

Bootstrapでサムネイル画像を表示するには、img 要素に img-thumbnail クラスを指定する。

<img class="img-thumbnail" src="portrait.webp">
thumbnail

.float-start

Bootstrapで画像を左寄せにするには、img 要素に float-start クラスを指定する。

float-start は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix クラスを指定する。

<div class="clearfix">
  <img class="float-start" src="portrait.webp">
</div>
float image

.float-end

Bootstrapで画像を右寄せにするには、img 要素に float-end クラスを指定する。

float-end は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix クラスを指定する。

<div class="clearfix">
  <img class="float-end" src="portrait.webp">
</div>
float end image

開始マージン

Bootstrap では、開始マージン (margin start) を ms-0 から mt-5 までの6段階で指定できる。

デフォルトの開始マージンと画面の横幅が large(992px 以上)のときの開始マージンの両方を指定する。

<div class="ms-0 ms-lg-1 mt-1 bg-info">ms-lg-1</div>
<div class="ms-0 ms-lg-2 mt-1 bg-info">ms-lg-2</div>
<div class="ms-0 ms-lg-3 mt-1 bg-info">ms-lg-3</div>
<div class="ms-0 ms-lg-4 mt-1 bg-info">ms-lg-4</div>
<div class="ms-0 ms-lg-5 mt-1 bg-info">ms-lg-5</div>
ms-lg-1
ms-lg-2
ms-lg-3
ms-lg-4
ms-lg-5

.ms-5

<div class="ms-sm-5 bg-info">ms-sm-5</div>
<div class="ms-md-5 bg-info">ms-md-5</div>
<div class="ms-lg-5 bg-info">ms-lg-5</div>
<div class="ms-xl bg-info">ms-xl-5</div>
<div class="ms-xxl bg-info">ms-xxl-5</div>
ms-sm-5
ms-md-5
ms-lg-5
ms-xl-5
ms-xxl-5

終了マージン

Bootstrap では、終了マージン (margin emd) を me-0 から me-5 までの6段階で指定できる。

.me-5

<div class="me-sm-5 bg-info">me-sm-5</div>
<div class="me-md-5 bg-info">me-md-5</div>
<div class="me-lg-5 bg-info">me-lg-5</div>
<div class="me-xl-5 bg-info">me-xl-5</div>
<div class="me-xxl-5 bg-info">me-xxl-5</div>
me-sm-5
me-md-5
me-lg-5
me-xl-5
me-xxl-5

Bootstrapはモーダルダイアログのコンポーネントを提供している。

<a data-bs-toggle="modal" data-bs-target="#MODAL1" class="btn btn-primary">表示</a>

<div class="modal" id="MODAL1" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">ダイアログの外をクリックすると消えます。</div>
    </div>
  </div>
</div>
表示

.fade

モーダルに fade クラスを指定すると、開くときにフェードイン、閉じるときにフェードアウトのアニメーション効果がつく。

<a data-bs-toggle="modal" data-bs-target="#MODAL2" class="btn btn-primary">表示</a>

<div class="modal fade" id="MODAL2" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">ダイアログの外をクリックすると消えます。</div>
    </div>
  </div>
</div>
表示

モーダルダイアログにヘッダをつけることができる。

<a data-bs-toggle="modal" data-bs-target="#MODAL3" class="btn btn-primary">表示</a>

<div class="modal" id="MODAL3" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-header">
      <h5 class="modal-title">タイトル</h5>
      <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      <button>
    </div>
    <div class="modal-body">右上のクローズボタンをクリックすると消えます。</div>
  </div>
</div>
表示

モーダルダイアログにフッタをつけることができる。

<a data-bs-toggle="modal" data-bs-target="#MODAL4" class="btn btn-primary">表示</a>

<div class="modal" id="MODAL4" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-body">右下のクローズボタンをクリックすると消えます。</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
        Close
      <button>
    </div>
  </div>
</div>
表示

Bootstrapでナビゲーション・メニューを作成するには、nav クラスを指定する。

<nav class="nav">
  <a class="nav-link" href="/css/bulma/">Bulma</a>
  <a class="nav-link" href="/css/materialize/">Materialize</a>
</nav>

.justify-content-center

Bootstrapでコンテンツを中央寄せにするには、justify-content-center クラスを指定する。

<nav class="nav justify-content-center">
  <a class="nav-link" href="/css/milligram/">Milligram</a>
  <a class="nav-link" href="/css/primer/">Primer CSS</a>
</nav>

.justify-content-end

Bootstrapでコンテンツを右寄せにするには、justify-content-end クラスを指定する。

<nav class="nav justify-content-end">
  <a class="nav-link" href="/css/pure/">Pure.css</a>
  <a class="nav-link" href="/css/semantic/">Semantic UI</a>
</nav>

.flex-column

Bootstrapで垂直ナビゲーション・メニューを作成するには、flex-column クラスを指定する。

<nav class="nav flex-column">
  <a class="nav-link" href="/css/skeleton/">Skeleton</a>
  <a class="nav-link" href="/css/spectre/">Spectre.css</a>
</nav>

.p-auto

<div class="p-auto bg-info">p-auto</div>
p-auto

.ps-5

<div class="ps-sm-5 bg-info">ps-sm-5</div>
<div class="ps-md-5 bg-info">ps-md-5</div>
<div class="ps-lg-5 bg-info">ps-lg-5</div>
<div class="ps-xl-5 bg-info">ps-xl-5</div>
<div class="ps-xxl-5 bg-info">ps-xxl-5</div>
ps-sm-5
ps-md-5
ps-lg-5
ps-xl-5
ps-xxl-5

.ps-auto

<div class="ps-auto bg-info">ps-auto</div>
ps-auto

.table

Bootstrapで表をスタイリングするには、<table> タグに table クラスを指定する。

<table class="table">
  <caption>ブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>接中辞</th>
      <th>寸法</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>x-small</td>
      <td>なし</td>
      <td><576px</td>
    </tr>
    <tr>
      <td>small</td>
      <td>sm</td>
      <td>≥576px</td>
    </tr>
    <tr>
      <td>medium</td>
      <td>md</td>
      <td>≥768px</td>
    </tr>
    <tr>
      <td>large</td>
      <td>lg</td>
      <td>≥992px</td>
    </tr>
    <tr>
      <td>extra large</td>
      <td>xl</td>
      <td>≥1200px</td>
    </tr>
    <tr>
      <td>extra extra large</td>
      <td>xxl</td>
      <td>≥1400px</td>
    </tr>
  </tbody>
</table>
ブレークポイント
ブレークポイント 接中辞 寸法
x-small なし <576px
small sm ≥576px
medium md ≥768px
large lg ≥992px
extra large xl ≥1200px
extra extra large xxl ≥1400px

.text-start

Bootstrapを使ってテキストや画像を左寄せにするには、テキストや画像を含むブロックレベル要素に text-start クラスを指定する。

<p class="text-start">左寄せテキスト</p>

左寄せテキスト

.text-center

Bootstrapを使ってテキストや画像を中央揃えにするには、テキストや画像を含むブロックレベル要素に text-center クラスを指定する。

<p class="text-center">中央揃えテキスト</p>

中央揃えテキスト

<div class="text-center">
  <img src="portrait.webp">
</div>
image

.text-end

Bootstrapを使ってテキストや画像を右寄せにするには、テキストや画像を含むブロックレベル要素に text-end クラスを指定する。

<p class="text-end">右寄せテキスト</p>

右寄せテキスト

<div class="text-end">
  <img src="portrait.webp">
</div>
image