Bootstrap ボタンの使い方

Bootstrap CSSフレームワークはボタンの色、大きさ、配置（右寄せ、中央寄せ）及びデザイン等を指定するクラスが用意されています。これらの使い方をご紹介します。

.btn

Bootstrap CSSフレームワークを使ってボタンを作成するには、以下に示す要素に btn クラスを指定する。

• button 要素
• input 要素 (type 属性に button、submit 又は reset を指定した場合)
• link 要素

Bootstrap CSSフレームワークを使ってボタンを作成する例を以下に示す。

<button class="btn">Button</button>
<input type="submit" class="btn">
<a href="#" class="btn">Link</a>

Button Link

これだけではボタンらしいデザインにならない。ボタンに色をつけるには、以下に示すクラスのうちいずれかも指定する。

• btn-primary
• btn-secondary
• btn-success
• btn-danger
• btn-warning

Bootstrap CSSフレームワークでは、赤や青などの具体的な色を示すクラスは用意されていない。ボタンの意味を表すクラスで指定する。

.btn-primary

<button class="btn btn-primary">Button</button>
<input type="submit" class="btn btn-primary">
<a href="#" class="btn btn-primary">Link</a>

Button Link

.btn-secondary

<button class="btn btn-secondary">Button</button>
<input type="submit" class="btn btn-secondary">
<a href="#" class="btn btn-secondary">Link</a>

Button Link

.btn-success

<button class="btn btn-success">Button</button>
<input type="submit" class="btn btn-success">
<a href="#" class="btn btn-success">Link</a>

Button Link

.btn-danger

<button class="btn btn-danger">Button</button>
<input type="submit" class="btn btn-danger">
<a href="#" class="btn btn-danger">Link</a>

Button Link

.btn-warning

<button class="btn btn-warning">Button</button>
<input type="submit" class="btn btn-warning">
<a href="#" class="btn btn-warning">Link</a>

Button Link

.btn-outline-primary

<button class="btn btn-outline-primary">Button</button>
<input type="submit" class="btn btn-outline-primary">
<a href="#" class="btn btn-outline-primary">Link</a>

Button Link

.btn-outline-secondary

<button class="btn btn-outline-secondary">Button</button>
<input type="submit" class="btn btn-outline-secondary">
<a href="#" class="btn btn-outline-secondary">Link</a>

Button Link

.btn-outline-success

<button class="btn btn-outline-success">Button</button>
<input type="submit" class="btn btn-outline-success">
<a href="#" class="btn btn-outline-success">Link</a>

Button Link

.btn-outline-danger

<button class="btn btn-outline-danger">Button</button>
<input type="submit" class="btn btn-outline-danger">
<a href="#" class="btn btn-outline-danger">Link</a>

Button Link

.btn-outline-warning

<button class="btn btn-outline-warning">Button</button>
<input type="submit" class="btn btn-outline-warning">
<a href="#" class="btn btn-outline-warning">Link</a>

Button Link

.btn-lg

Bootstrap CSS フレームワークを使って大きいボタンを作成するには、btn-lg クラスを指定する。

<button class="btn btn-lg btn-primary">Button</button>
<input type="submit" class="btn btn-lg btn-primary">
<a href="#" class="btn btn-lg btn-primary">Link</a>

Button Link

.btn-sm

Bootstrap CSS フレームワークを使って小さいボタンを作成するには、btn-lg クラスを指定する。

<button class="btn btn-sm btn-primary">Button</button>
<input type="submit" class="btn btn-sm btn-primary">
<a href="#" class="btn btn-sm btn-primary">Link</a>

Button Link

.d-grid

<div class="d-grid gap-2">
  <button class="btn btn-block btn-primary">Button</button>
  <input type="submit" class="btn btn-primary">
  <a href="#" class="btn btn-primary">Link</a>
</div>

disabled

クリックできない無効なボタンを作成するには、クラスを指定するのではなく、disabled 属性を指定する。

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

Button

data-bs-toggle

Bootstrap CSS フレームワークを使ってトグル・ボタンを作成するには、data-bs-toggle 属性を指定する。なお、トグル・ボタンを作成するには、Bootstrap の JavaScript が必要になる。

<button type="button" class="btn btn-primary" data-bs-toggle="button">Button</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>

Button