[Bootstrap] Button Groups

1. 기본 버튼 그룹

• 여러 개의 버튼을 한 줄에 나란히 묶을 때 사용
• `div`에 `.btn-group` 클래스를 사용

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

---

2. 버튼 그룹 크기 조절

• `.btn-group-lg`: 큰 버튼 그룹
• `.btn-group-sm`: 작은 버튼 그룹
• 그룹 전체에 적용하면 개별 버튼마다 지정할 필요 없음

<div class="btn-group btn-group-lg">
  <button class="btn btn-primary">Large</button>
  ...
</div>

---

3. 수직 버튼 그룹

• `.btn-group-vertical` 클래스를 사용하면 세로 방향으로 버튼 그룹이 생성

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

---

4. 버튼 그룹 나란히 배치

• `.btn-group`은 기본적으로 inline-block이기 때문에, 여러 그룹을 나란히 배치할 수 있음

<div class="btn-group">
  <button class="btn btn-primary">Apple</button>
  ...
</div>

<div class="btn-group">
  <button class="btn btn-primary">BMW</button>
  ...
</div>

---

5. 드롭다운 포함 버튼 그룹 (중첩)

• 버튼 그룹 안에 다른 버튼 그룹을 중첩(nesting) 시켜 드롭다운 메뉴를 만들 수 있음

<div class="btn-group">
  <button class="btn btn-primary">Apple</button>
  <button class="btn btn-primary">Samsung</button>

  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>