Bootstrap

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

概要

Bootstrap
公式サイト https://getbootstrap.com/
開発者 Twitter, Inc.
ライセンス MIT
グリッド 12列
GitHub stars 148k
Twitter @getbootstrap
Bootstrap v5.0.0-beta2
モジュールサイズ
bootstrap.min.css149KB
bootstrap.min.js60.3KB

チートシート

使い方
Alert
Background
Badge
Blockquote
Button
Card
Color
Form
Grid
Grid breakpoints
Image
List
Margin
Margin top
Margin bottom
Margin start
Margin end
Margin X
Margin Y
Modal
Navigation
Padding
Padding top
Padding bottom
Padding start
Padding Y
Shadow
Table
Typography

基本テンプレート

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>
    <!--
      contents
    -->
    <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.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous">
  </head>
  <body>
    <!--
      contents
    -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous">
    </script>
  </body>
</html>

.alert-primary

<div class="alert alert-primary" role="alert">alert-primary</div>

.alert-secondary

<div class="alert alert-secondary" role="alert">alert-secondary</div>

.alert-success

<div class="alert alert-success" role="alert">alert-success</div>

.alert-danger

<div class="alert alert-danger" role="alert">alert-danger</div>

.alert-warning

<div class="alert alert-warning" role="alert">alert-warning</div>

.alert-info

<div class="alert alert-info" role="alert">alert-info</div>

.alert-light

<div class="alert alert-light" role="alert">alert-light</div>

.alert-dark

<div class="alert alert-dark" role="alert">alert-dark</div>

.alert-heading

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">警告</h4>
  <p>パスワードが違います。</p>
</div>

.bg-primary

<div class="bg-primary">bg-primary</div>
bg-primary

.bg-secondary

<div class="bg-secondary">bg-secondary</div>
bg-secondary

.bg-success

<div class="bg-success">bg-success</div>
bg-success

.bg-danger

<div class="bg-danger">bg-danger</div>
bg-danger

.bg-warning

<div class="bg-warning">bg-warning</div>
bg-warning

.bg-info

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

.bg-light

<div class="bg-light">bg-light</div>
bg-light

.bg-dark

<div class="bg-dark">bg-dark</div>
bg-dark

.bg-white

<div class="bg-white">bg-white</div>
bg-white

.bg-transparent

<div class="bg-transparent">bg-transparent</div>
bg-transparent

.btn-primary

<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="ボタン">
<input type="submit" class="btn btn-primary">
<input type="reset" class="btn btn-primary">
<a href="#" class="btn btn-primary" role="button">Link</a>

Link

.btn-secondary

<button type="button" class="btn btn-secondary">Button</button>

.btn-success

<input type="button" class="btn btn-success" value="Input">

.btn-danger

<input type="submit" class="btn btn-danger" value="Submit">

.btn-warning

<input type="reset" class="btn btn-warning" value="Reset">

.btn-outline-primary

<button type="button" class="btn btn-outline-primary">Button</button>
<input type="button" class="btn btn-outline-primary" value="ボタン">
<input type="submit" class="btn btn-outline-primary">
<input type="reset" class="btn btn-outline-primary">
<a href="#" class="btn btn-outline-primary" role="button">Link</a>

Link

.btn-outline-secondary

<button type="button" class="btn btn-outline-secondary">Button</button>
<input type="button" class="btn btn-outline-secondary" value="ボタン">
<input type="submit" class="btn btn-outline-secondary">
<input type="reset" class="btn btn-outline-secondary">
<a href="#" class="btn btn-outline-secondary" role="button">Link</a>

Link

.btn-outline-success

<button type="button" class="btn btn-outline-success">Button</button>
<input type="button" class="btn btn-outline-success" value="ボタン">
<input type="submit" class="btn btn-outline-success">
<input type="reset" class="btn btn-outline-success">
<a href="#" class="btn btn-outline-success" role="button">Link</a>

Link

.btn-outline-danger

<button type="button" class="btn btn-outline-danger">Button</button>
<input type="button" class="btn btn-outline-danger" value="ボタン">
<input type="submit" class="btn btn-outline-danger">
<input type="reset" class="btn btn-outline-danger">
<a href="#" class="btn btn-outline-danger" role="button">Link</a>

Link

.btn-outline-warning

<button type="button" class="btn btn-outline-warning">Button</button>
<input type="button" class="btn btn-outline-warning" value="ボタン">
<input type="submit" class="btn btn-outline-warning">
<input type="reset" class="btn btn-outline-warning">
<a href="#" class="btn btn-outline-warning" role="button">Link</a>

Link

disabled

<button type="button" class="btn btn-primary" disabled>Button</button>

.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
カード

text-primary

<div class="text-primary">text-primary</div>
text-primary

text-secondary

<div class="text-secondary">text-secondary</div>
text-secondary

text-success

<div class="text-success">text-success</div>
text-success

text-danger

<div class="text-danger">text-danger</div>
text-danger

text-warning

<div class="text-warning">text-warning</div>
text-warning

text-info

<div class="text-info">text-info</div>
text-info

text-light

<div class="text-light bg-dark">text-light</div>
text-light

text-dark

<div class="text-dark">text-dark</div>
text-dark

text-body

<div class="text-body">text-body</div>
text-body

text-muted

<div class="text-muted">text-muted</div>
text-muted

text-white

<div class="text-white bg-dark">text-white</div>
text-white

text-black-50

<div class="text-black-50">text-black-50</div>
text-black-50

text-white-50

<div class="text-white-50 bg-dark">text-white-50</div>
text-white-50

.container

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

.col-xs-{n}

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

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

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

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

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

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

.form-control

<form>
  <div class="form-group">
    <label for="last_name">Last name</label>
    <input type="text" class="form-control" id="last_name">
  </div>
</form>

.form-control-lg

<form>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control form-control-lg" id="password">
  </div>
</form>

.form-control-sm

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control form-control-sm" id="email">
  </div>
</form>

.form-control-range

<form>
  <div class="form-group">
    <label for="brightness">Brightness</label>
    <input type="range" class="form-control-range" id="brightness">
  </div>
</form>

.form-check

<form>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="ca">
    <label class="form-check-label" for="ca">当座預金</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="sa">
    <label class="form-check-label" for="sa">普通預金</label>
  </div>
</form>

.form-check-inline

<form>
  <div class="form-check form-check-inline">
    <input type="radio" name="account" class="form-check-input" id="c">
    <label class="form-check-label" for="c">当座預金</label>
  </div>
  <div class="form-check form-check-inline">
    <input type="radio" name="account" class="form-check-input" id="s">
    <label class="form-check-label" for="s">普通預金</label>
  </div>
</form>

.m-0

<div class="m-0 bg-info">m-0</div>
m-0

.m-1

<div class="m-1 bg-info">m-1</div>
m-1

.m-2

<div class="m-2 bg-info">m-2</div>
m-2

.m-3

<div class="m-3 bg-info">m-3</div>
m-3

.m-4

<div class="m-4 bg-info">m-4</div>
m-4

.m-5

<div class="m-5 bg-info">m-5</div>
m-5

.m-auto

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

.ms-0

<div class="ms-0 bg-info">ms-0</div>
ms-0

.ms-1

<div class="ms-1 bg-info">ms-1</div>
ms-1

.ms-2

<div class="ms-2 bg-info">ms-2</div>
ms-2

.ms-3

<div class="ms-3 bg-info">ms-3</div>
ms-3

.ms-4

<div class="ms-4 bg-info">ms-4</div>
ms-4

.ms-5

<div class="ms-5 bg-info">ms-5</div>
<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-5
ms-sm-5
ms-md-5
ms-lg-5
ms-xl-5
ms-xxl-5

.ms-auto

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

.me-0

<div class="me-0 bg-info">me-0</div>
me-0

.me-1

<div class="me-1 bg-info">me-1</div>
me-1

.me-2

<div class="me-2 bg-info">me-2</div>
me-2

.me-3

<div class="me-3 bg-info">me-3</div>
me-3

.me-4

<div class="me-4 bg-info">me-4</div>
me-4

.me-5

<div class="me-5 bg-info">me-5</div>
<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-5
me-sm-5
me-md-5
me-lg-5
me-xl-5
me-xxl-5

.me-auto

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

.mx-auto

<div class="mx-auto bg-info" style="width: 300px;">mx-auto</div>
mx-auto

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

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

.p-1

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

.p-2

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

.p-3

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

.p-4

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

.p-5

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

.p-auto

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

.ps-0

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

.ps-1

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

.ps-2

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

.ps-3

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

.ps-4

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

.ps-5

<div class="ps-5 bg-info">ps-5</div>
<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-5
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