Bootstrapボタンクラスまとめ一覧

基本のボタンスタイル

<a class="btn btn-primary">

<a class="btn btn-secondary">

<a class="btn btn-success">

<a class="btn btn-info">

<a class="btn btn-warning">

<a class="btn btn-danger">

<a class="btn btn-light">

<a class="btn btn-dark">

アウトラインボタン【btn-outline-{カラーユーティリティ}】

<a class="btn btn-outline-primary">

<a class="btn btn-outline-secondary">

<a class="btn btn-outline-success">

<a class="btn btn-outline-info">

<a class="btn btn-outline-warning">

<a class="btn btn-outline-danger">

<a class="btn btn-outline-light">

<a class="btn btn-outline-dark">

ボタンのリンクスタイルと大きさ変更【btn-link】【btn-{大きさ}】

<p class="btn btn-link">

<a class="btn btn-lg">

<a class="btn btn-sm">

アクティブ化、非アクティブ化【active】【disabled】

<a class="btn btn-primary active">
<a class="btn btn-primary">
<a class="btn btn-primary disabled">

トグルボタン【data-toggle=”button”】【aria-pressed=”true”】

<button class="btn btn-primary active" data-toggle="button" aria-pressed="true">
<button class="btn btn-primary" data-toggle="button" aria-pressed="false">

【data-toggle】はクラスではなく、属性なことに注意。

【aria-pressed】は視覚補助の属性で、「true」で「on」状態、「false」で「off」状態。

ボタンを丸くする【rounded】【rounded-0】【rounded-circle】【badge-pill】

<a class="btn rounded">

<a class="btn rounded-0">

<a class="btn rounded-circle">

<a class="btn rounded-circle">

ボタンのグループ化【チェックボックス】【ラジオボタン】

ボタン群を【btn-group】クラスと【role=”button”】属性を持つタグの中にいれてグループ化。

【role=”button”】はクラスではなく属性なので注意。

<div class="btn-group" role="button">
    <button type="button" class="btn btn-info">button</button>
    <button type="button" class="btn btn-info">button</button>
</div>

ボタングループを縦に並べるには【btn-group-vertical】をつける。

<div class="btn-group-vertical" role="buttons">
    <button type="button" class="btn btn-info">button</button>
    <button type="button" class="btn btn-info">button</button>
</div>

<div class="btn-group" data-toggle="buttons">
    <div class="btn btn-secondary">
        <input type="checkbox" id="check1" class="form-input">
        <label for="check1">check1</label>
    </div>
    <div class="btn btn-info">
        <input type="checkbox" id="check2" class="form-input">
        <label for="check2">check2</label>
    </div>
    <div class="btn btn-warning">
        <input type="checkbox" id="check3" class="form-input">
        <label for="check3">check3</label>
    </div>
</div>

<div class="btn-group" data-toggle="buttons">
    <div class="btn btn-secondary">
        <input type="radio" id="radio1" class="form-input">
        <label for="radio1">radio1</label>
    </div>
    <div class="btn btn-info">
        <input type="radio" id="radio2" class="form-input">
        <label for="radio2">radio2</label>
    </div>
    <div class="btn btn-warning">
        <input type="radio" id="radio3" class="form-input">
        <label for="radio3">radio3</label>
    </div>
</div>