Bootstrap5サンプル検索

bootstrap5.css

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

bootstrap5.css

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

bootstrap5.css

.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}

bootstrap5.css

.btn.disabled,
.btn:disabled {
  /* 透明度は、0.0（完全に透明）～1.0（完全に不透明） */
  /* 文字を薄くしたいときに利用する */
  opacity: 0.65;
}

bootstrap5.css

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

bootstrap5.css

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

bootstrap5.css

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

bootstrap5.css

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

bootstrap5.css

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

bootstrap5.css

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

bootstrap5.css

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

bootstrap5.css

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

bootstrap5.css

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

bootstrap5.css

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

bootstrap5.css

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

bootstrap5.css

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

bootstrap5.css

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

bootstrap5.css

.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

bootstrap5.css

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

bootstrap5.css

.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

bootstrap5.css

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

bootstrap5.css

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

bootstrap5.css

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

bootstrap5.css

.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

bootstrap5.css

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

bootstrap5.css

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

bootstrap5.css

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

bootstrap5.css

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

bootstrap5.css

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

bootstrap5.css

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

bootstrap5.css

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

bootstrap5.css

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

bootstrap5.css

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

bootstrap5.css

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

bootstrap5.css

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

bootstrap5.css

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

bootstrap5.css

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

bootstrap5.css

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

bootstrap5.css

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

bootstrap5.css

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

bootstrap5.css

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

bootstrap5.css

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

bootstrap5.css

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

bootstrap5.css

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

bootstrap5.css

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

bootstrap5.css

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

bootstrap5.css

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

bootstrap5.css

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

bootstrap5.css

.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}

bootstrap5.css

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}

bootstrap5.css

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

bootstrap5.css

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

bootstrap5.css

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

bootstrap5.css

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

bootstrap5.css

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

bootstrap5.css

.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}

bootstrap5.css

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

bootstrap5.css

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

bootstrap5.css

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

bootstrap5.css

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

bootstrap5.css

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

bootstrap5.css

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

bootstrap5.css

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

bootstrap5.css

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

bootstrap5.css

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

bootstrap5.css

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

bootstrap5.css

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

bootstrap5.css

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}

bootstrap5.css

a.close.disabled {
  pointer-events: none;
}

リスト項目を無効状態にする：disabled

リスト項目1
リスト項目2
リスト項目3

  <ul class="list-group">
    <li class="list-group-item disabled">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

divとaタグでリストグループ：list-groupとlist-group-item

リスト項目1 リスト項目2 リスト項目3

  <!-- サイドメニューでリンクさせる -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>

ボタンのリストグループ：list-group-item-action

  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>

ページネーションの配置中央寄せ：justify-content-center

  <nav>
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションの配置右寄せ：justify-content-end

  <nav>
    <ul class="pagination justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

リンクの無効状態やアクティブ状態を指定する：disabled

  <nav>
    <ul class="pagination">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ：pagination-lg

  <nav>
    <ul class="pagination pagination-lg">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ：pagination-sm

  <nav>
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">前</a></li>
    </ul>
  </nav>

メニュー項目にアクティブの状態を設定する：active

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
      <a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

チェックボックスを横並びに変更する：form-check-inline

  <form>
    <!-- form-groupではなく、form-checkを使う -->
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox02" value="option1">
      <label class="form-check-label" for="checkbox02">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox03" value="option2">
      <label class="form-check-label" for="checkbox03">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox04" value="option3" disabled>
      <label class="form-check-label" for="checkbox04">3</label>
    </div>
  </form>

チェックボックスを無効にする：disabled

  <form>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" value="" id="checkbox06" disabled>
      <label class="form-check-label" for="checkbox06">チェック（無効）</label>
    </div>
  </form>

カスタムのチェックボックスとラジオボタンを無効にする

  <form>
    <!-- チェックボックスを無効にする -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="checkbox11" disabled>
      <label class="custom-control-label" for="checkbox11">
        チェック（無効）
      </label>
    </div>
    <!-- ラジオボタンを無効にする -->
    <div class="custom-control custom-radio">
      <input type="radio" name="radioDisabled" id="checkbox12" class="custom-control-input" disabled>
      <label class="custom-control-label" for="checkbox12">
        オプション（無効）
      </label>
    </div>
  </form>

一連の入力グループをまとめて無効にする：disabled

  <form>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput">無効な入力欄</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
      <div class="form-group">
        <label for="disabledSelect">無効なプルダウンメニュー</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
        <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
      </div>
      <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
    </fieldset>
  </form>

水平配置のフォームを作成する：form-groupとrowとcol

  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
            <label class="form-check-label" for="radios1">
              オプション1
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
            <label class="form-check-label" for="radios2">
              オプション2
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
            <label class="form-check-label" for="radios3">
              オプション3（無効）
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">チェックボックス</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="check1">
          <label class="form-check-label" for="check1">
            チェックする
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">サインイン</button>
      </div>
    </div>
  </form>

無効状態のリンクボタンを作成する：disabled

無効ボタン通常ボタン

  <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

無効状態のボタンを作成する：disabled

  <button class="btn btn-lg btn-primary" disabled>無効ボタン</button>
  <button class="btn btn-lg btn-primary">通常ボタン</button>

ピル型ナビゲーション：nav-pills

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション：flex

  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

ピル型ナビゲーションドロップダウン：nav-linkとdropdown-toggle

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

タブ型ナビゲーション：nav-tabs

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

タブ型ナビゲーションドロップダウン：dropdown-toggle

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション：navとnav-itemとnav-link

  <ul class="nav">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション中央寄せ：justify-content-center

  <ul class="nav justify-content-center">
    <!-- 中央寄せ -->
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション右寄せ：justify-content-end

  <ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを垂直（縦）に並べる：flex-column

  <!-- サイドメニューで使える -->
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを縦に並べる：nav要素、li使わないaのみ

  <!-- flex-columnを使うと、liと同じ効果が得られる -->
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">アクティブ</a>
    <a class="nav-link" href="#">リンク</a>
    <a class="nav-link disabled" href="#">無効</a>
  </nav>

disabled

bootstrap5.css

html bootstrap5 Sample

リスト項目を無効状態にする：disabled

divとaタグでリストグループ：list-groupとlist-group-item

ボタンのリストグループ：list-group-item-action

ページネーションの配置 中央寄せ：justify-content-center

ページネーションの配置 右寄せ：justify-content-end

リンクの無効状態やアクティブ状態を指定する：disabled

ページネーションのサイズ：pagination-lg

ページネーションのサイズ：pagination-sm

メニュー項目にアクティブの状態を設定する：active

チェックボックスを横並びに変更する：form-check-inline

チェックボックスを無効にする：disabled

カスタムのチェックボックスとラジオボタンを無効にする

一連の入力グループをまとめて無効にする：disabled

水平配置のフォームを作成する：form-groupとrowとcol

無効状態のリンクボタンを作成する：disabled

無効状態のボタンを作成する：disabled

ピル型ナビゲーション：nav-pills

ナビゲーション：flex

ピル型ナビゲーションドロップダウン：nav-linkとdropdown-toggle

タブ型ナビゲーション：nav-tabs

タブ型ナビゲーションドロップダウン：dropdown-toggle

ナビゲーション：navとnav-itemとnav-link

ナビゲーション中央寄せ：justify-content-center

ナビゲーション右寄せ：justify-content-end

ナビゲーションを垂直（縦）に並べる：flex-column

ナビゲーションを縦に並べる：nav要素、li使わないaのみ

ページネーションの配置中央寄せ：justify-content-center

ページネーションの配置右寄せ：justify-content-end