btn-lg

bootstrap5.css

bootstrap5.css
.btn-lg,
.btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
.btn-lg + .dropdown-toggle-split,
.btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

html bootstrap5 Sample

ボタンサイズを変更する:btn-lg:btn-sm


  <button class="btn btn-primary btn-lg">大サイズ</button>
  <button class="btn btn-primary">通常サイズ</button>
  <button class="btn btn-primary btn-sm">小サイズ</button>

アクティブ状態のボタン:active


  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">アクティブボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

ブロックのボタン:btn-block


  <!-- ブロックにすることで、高さの調整も出来るようになる -->
  <button class="btn btn-primary btn-lg btn-block">ブロックレベルボタン</button>

無効状態のリンクボタンを作成する: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>