부트스트랩4은 버튼그룹을 이용하여 한 줄에 여러 버튼을 그룹화할 수 있습니다.

버튼을 그룹화하려면 <div>요소안에 .btn-group클래스를 추가하면 됩니다.

<div class="btn-group">
    <button type="button" class="btn btn-info">실전홈페이지제작강좌</button>
    <button type="button" class="btn btn-info">CSS Grid강좌</button>
    <button type="button" class="btn btn-info">PHP5와 그누보드5강좌</button>
</div>

** 그룹내 모든 버튼에 버튼 크기를 적용하는 대신 큰 버튼 그룹에는 .btn-group-lg클래스를 사용하고 작은 버튼 그룹에는 .btn-ground-sm클래스를 사용하면 됩니다.

<h3>큰 버튼:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-info">실전홈페이지제작강좌</button>
    <button type="button" class="btn btn-info">CSS Grid강좌</button>
    <button type="button" class="btn btn-info">PHP5와 그누보드5강좌</button>
  </div>
  <h3>기본 버튼:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-info">실전홈페이지제작강좌</button>
    <button type="button" class="btn btn-info">CSS Grid강좌</button>
    <button type="button" class="btn btn-info">PHP5와 그누보드5강좌</button>
  </div>
  <h3>작은 버튼:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-info">실전홈페이지제작강좌</button>
    <button type="button" class="btn btn-info">CSS Grid강좌</button>
    <button type="button" class="btn btn-info">PHP5와 그누보드5강좌</button>
  </div>

세로 버튼 그룹(Vertical)

부트스트랩4는 세로버튼그룹을 지원합니다.

.btn-group-vertical클래스를 추가하면 됩니다.

<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">실전홈페이지제작강좌</button>
    <button type="button" class="btn btn-info">CSS Grid강좌</button>
    <button type="button" class="btn btn-info">PHP5와 그누보드5강좌</button>
</div>

버튼 그룹 중첩 및 드롭다운 메뉴

뒷부분에 자세하게 언급한 드롭다운 메뉴를 위해 버튼 그룹을 중첩해야 합니다.

<div class="btn-group">
    <button type="button" class="btn btn-info">강좌소개</button>
    <button type="button" class="btn btn-info">무료강좌</button>
    <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      유료강좌
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">실전홈페이지제작</a>
        <a class="dropdown-item" href="#">CSS Grid</a>
      </div>
    </div>
  </div>

버튼 드롭다운 분할

.dropdown-toggle-split클래스를 사용합니다.

<div class="btn-group">
    <button type="button" class="btn btn-info">유료강좌</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid</a>
    </div>
  </div>

드롭다운메뉴가 포함된 세로 버튼 그룹

<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">강좌소개</button>
    <button type="button" class="btn btn-info">무료강좌</button>
    <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        유료강좌
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">실전홈페이지제작강좌</a>
        <a class="dropdown-item" href="#">CSS Grid강좌</a>
      </div>
    </div>
  </div>