Bootstrap 5 のボタンの基本：種類・サイズ・色・アイコンの使い方まとめ

1. Bootstrap 5のボタンの基本の形

1. Bootstrap 5のボタンの基本の形

Bootstrapでは、ボタンを作るときにbtnというクラスを使います。このクラスをボタンにつけるだけで、見た目が整ったボタンになります。

<button class="btn btn-primary">送信する</button>

2. ボタンの種類と意味

2. ボタンの種類と意味

ボタンの色や意味は、クラス名を変えることで簡単に指定できます。例えばbtn-primaryは「主な操作ボタン」、btn-dangerは「注意が必要な操作」のように意味があります。

<button class="btn btn-primary">登録</button>
<button class="btn btn-danger">削除</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">お知らせ</button>

3. ボタンの大きさを変えるには？

3. ボタンの大きさを変えるには？

ボタンの大きさは、btn-lgやbtn-smを使うことで変更できます。lgは「ラージ（大きい）」、smは「スモール（小さい）」の意味です。

<button class="btn btn-primary btn-lg">大きなボタン</button>
<button class="btn btn-primary btn-sm">小さなボタン</button>

4. アイコンを使ってわかりやすく

4. アイコンを使ってわかりやすく

Bootstrap Iconsを使えば、ボタンの中にアイコンを入れることができます。これにより、何のボタンかが一目でわかりやすくなります。

<button class="btn btn-success">
    <i class="bi bi-check-circle me-1"></i> 保存する
</button>

<button class="btn btn-danger">
    <i class="bi bi-trash me-1"></i> 削除する
</button>

5. ボタンに枠だけつける方法（アウトライン）

5. ボタンに枠だけつける方法（アウトライン）

色を塗らずに、枠だけを表示するボタンを作りたいときは、btn-outline-○○を使います。例えばbtn-outline-primaryなら、青い枠のボタンになります。

<button class="btn btn-outline-primary">枠だけ</button>
<button class="btn btn-outline-danger">削除枠</button>

6. ボタンを横並び・縦並びにする方法

6. ボタンを横並び・縦並びにする方法

複数のボタンを一列に並べたり、縦に並べたりすることもできます。横並びにしたいときはbtn-groupを、縦に並べたいときはbtn-group-verticalを使います。

<div class="btn-group">
    <button class="btn btn-primary">左</button>
    <button class="btn btn-primary">中央</button>
    <button class="btn btn-primary">右</button>
</div>

7. 使ってはいけないボタンの例

7. 使ってはいけないボタンの例

ボタンには役割があります。見た目だけボタンに見せて、実際はリンクのような使い方をすると、検索エンジンにもユーザーにも良くありません。<a>タグを使うときは、必ずリンクの意味で使いましょう。

<!-- 悪い例 -->
<a class="btn btn-primary">これはリンク？ボタン？</a>

<!-- 良い例 -->
<button class="btn btn-primary">送信</button>
<a href="/next-page" class="btn btn-secondary">次のページへ</a>

まとめ

まとめ

これまで、ボタンの基本的な作り方から種類・色・サイズ・アイコンの使い方、そしてボタン同士の配置方法まで一通り確認してきました。どの設定も難しい特別な知識を必要とせず、シンプルなクラスを追加するだけで目的に合わせた見た目を自然につくれるところが大きな魅力です。とくに、ウェブページを訪れた人が操作しやすいボタンを用意することは、案内ページ、申し込みページ、購入ページ、問い合わせフォームなど、あらゆる場所で重要になります。クリックしやすい大きさ、視認性の高い色、直感的に理解できるアイコン、複数のボタンが並ぶ場面での配置バランスなど、細かな部分が積み重なることでページ全体の印象が格段に良くなります。

また、Bootstrap 5 のボタンは用途に応じた明確な役割があり、それぞれに統一されたスタイルが用意されているため、独自にデザインを作り込むより短時間で丁寧な仕上がりになります。たとえば、btn-primaryのような「主要な操作」を表すボタンは、訪問者の目に自然と入りやすく、迷わず操作してもらえる効果があります。ほかにも、削除や警告など注意を促したい場面ではbtn-dangerやbtn-warningを使用することで、意味の違いをカラーで直感的に伝えられます。

加えて、サイズ調整に使えるbtn-lgやbtn-sm、軽やかな表現ができるアウトラインボタン、スマートフォンでも扱いやすいアイコン付きボタンなど、さまざまな組み合わせが可能です。特にアイコン付きボタンは、文字だけでは伝わりにくい操作の印象を具体的なアイコンで補えるため、直感的で使いやすい動線づくりに役立ちます。また、ボタン同士のグループ化は複数の操作をまとめる場面に向いており、左右に分けた操作や選択肢を整理して見せたいページでも効果的です。

以下に、実務や学習でよく使われる要素をまとめたサンプルを掲載します。複数のボタンを組み合わせた自然な構造になっているため、ページ制作の練習にも役立ちます。

<div class="mt-4">
    <h3 class="fw-bold fs-5">操作ボタンのまとめ例</h3>
    <div class="btn-group mb-3">
        <button class="btn btn-primary btn-lg">
            <i class="bi bi-send-fill me-1"></i> 送信する
        </button>
        <button class="btn btn-outline-secondary btn-lg">
            <i class="bi bi-pencil-square me-1"></i> 下書き保存
        </button>
        <button class="btn btn-danger btn-lg">
            <i class="bi bi-x-circle me-1"></i> 取り消す
        </button>
    </div>

    <div class="btn-group-vertical">
        <button class="btn btn-success mb-1">
            <i class="bi bi-check-circle me-1"></i> 完了
        </button>
        <button class="btn btn-warning mb-1">
            <i class="bi bi-exclamation-triangle me-1"></i> 注意事項
        </button>
        <a href="/help" class="btn btn-info">
            <i class="bi bi-question-circle me-1"></i> ヘルプを見る
        </a>
    </div>
</div>

このように、Bootstrap 5 のボタンは種類も豊富で、さまざまな場面に適した組み合わせが自然と作れます。複雑なCSSを書かなくても、色・大きさ・配置・アイコンなどの調整が直感的に行えるため、初心者でも完成度の高いページを短時間で構築できます。これらの要素を理解すれば、フォーム、メニュー、案内ページなど実務の多くで応用が可能です。どのボタンが適しているかを状況に合わせて選ぶことができるようになれば、画面設計の幅が大きく広がり、訪問者にとって操作しやすい導線が自然に整っていきます。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5でボタンを作るにはどのクラスを使えばいいですか？

Bootstrap 5では「btn」クラスを使うことで、見た目が整ったボタンを簡単に作成できます。初心者でもすぐに利用できるのが特徴です。