「Bootstrap4入門」ボタングループの大きさを設定する方法

2014年8月22日2020年12月29日

説明
.btn-group-lg：大きなボタングループ
.btn-group-sm ：小さなボタングループ
使用例

<div class="container">
  <h2>ボタングループの大きさ</h2>
  <p>.btn-group-lg|sm|xs でボタングループの大きさを設定。</p>
  <h3>大きなボタン:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple1</button>
    <button type="button" class="btn btn-primary">Samsung2</button>
    <button type="button" class="btn btn-primary">Sony3</button>
  </div>
  <h3>デフォルトボタン:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple1</button>
    <button type="button" class="btn btn-primary">Samsung2</button>
    <button type="button" class="btn btn-primary">Sony3</button>
  </div>
  <h3>小さいボタン:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple1</button>
    <button type="button" class="btn btn-primary">Samsung2</button>
    <button type="button" class="btn btn-primary">Sony3</button>
  </div>
</div>