목차
Button Group 수평형 (= 버튼가로나열) Button Group 크기 (= 큰버튼그룹/작은버튼그룹) Button Group 수직형 (= 버튼세로나열) Button Group 옆으로 나란히 배치 Button Group 드롭다운버튼 (= 중첩버튼그룹)
※ BS4와 대체로 유사하나, 버튼 그룹 중첩 시 드롭다운 위한 속성이 바뀜.
Button Group 수평형 (= 버튼가로나열)
<div class="btn-group">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
※ BS4와 동일
Button Group 크기 (= 큰버튼그룹/작은버튼그룹)
<div class=" btn-group btn-group-lg ">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
<div class=" btn-group btn-group-sm ">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
※ BS4와 동일
Button Group 수직형 (= 버튼세로나열)
<div class="btn-group-vertical ">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
※ BS4와 동일
Button Group 옆으로 나란히 배치
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">2012</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<button type="button" class="btn btn-primary">JS</button>
</div>
</div>
결과보기
※ 버튼그룹은 인라인이라 부모요소 너비 충분히 클 때, 옆으로 나란히 배치됨.
※ BS4와 동일
Button Group 드롭다운버튼 (= 중첩버튼그룹)
<div class="btn-group ">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<div class="btn-group" >
<button type="button" class="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown" >
코딩언어
</button>
<div class="dropdown-menu ">
<a class="dropdown-item " href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
</div>
</div>
결과보기
cf. BS4 경우, BUTTON 요소에 data-toggle="dropdown" 속성 사용.
※ BS5 경우, .caret 클래스 제거됨.
