Bootstrap CSSフレームワークの使い方とチートシート

概要

Bootstrap
公式サイト	https://getbootstrap.com/
開発者	Twitter, Inc.
ライセンス	MIT
グリッド	12列
GitHub stars	159k
Twitter	@getbootstrap

Bootstrap v5.2.1
モジュール	サイズ
bootstrap.min.css	190KB
bootstrap.bundle.min.js	78.5KB

チートシート

使い方

Alert

Background

Badge

Blockquote

Border

Button

Card

Display

Form control

Form check

Form select

Grid

Grid breakpoints

Height

Image

List

Margin

Margin top

Margin bottom

Margin start

Margin end

Margin X

Margin Y

Modal

Navigation

Padding

Padding top

Padding end

Padding bottom

Padding start

Padding Y

Shadow

Table

Text align

Text color

Typography

Width

基本テンプレート

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>

ヘッダ

カード

.card-footer

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>

カード

.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 クラスを指定する。

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

.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>

.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>

.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>

.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>

.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>

.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>

.img-fluid

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

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

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

max-width: 100%;
height: auto;

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

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

.rounded

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

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

.img-thumbnail

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

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

.float-start

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

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

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

.float-end

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

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

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

開始マージン

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>

表示

.nav

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>

.text-end

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

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

右寄せテキスト

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

Breakpoint	接頭辞	画面幅	用途
Extra small	xs	< 543px	スマートフォン
Small	sm	≥ 544px	タブレット
Medium	md	≥ 768px	モバイルパソコン
Large	lg	≥ 992px	ノートパソコン
Extra large	el	≥ 1120px	デスクトップパソコン

Class	Description
table	Basic class
table-dark	Dark modifier

Class	Description
table	Basic class
table-dark	Dark modifier

Class	Description
table	Basic class
table-dark	Dark modifier

Class	Description
table	Basic class
table-dark	Dark modifier

Bootstrap

概要

チートシート

使い方

Alert

Background

Badge

Blockquote

Border

Border

Button

Card

Display

Form control

Form check

Form select

Grid

Grid breakpoints

Height

Image

List

Margin

Margin top

Margin bottom

Margin start

Margin end

Margin X

Margin Y

Modal

Navigation

Padding

Padding top

Padding end

Padding start

Padding Y

Shadow

Table

Text align

Text color

Typography

Width

基本テンプレート

CDN

.card

.card-title

タイトル

.card-header

.card-footer

.card-img-top

.d-none

.container

.col-*

.col-xs-{n}

.col-sm-{n}

.col-md-{n}

.col-lg-{n}

.col-xl-{n}

.col-xxl-{n}

.img-fluid

.rounded

.img-thumbnail

.float-start

.float-end

開始マージン

.ms-5

終了マージン

.me-5

.modal

.fade

.modal-header

.modal-footer

.nav

.justify-content-center

.justify-content-end

.flex-column

.p-auto

.ps-5

.ps-auto

.table

.text-start