Front/CSS

[css][bootstrap] 버튼그룹

오선지♬ 2022. 6. 18. 20:54
728x90
반응형

버튼그룹으로  만들고 싶은 태그를 부모  div태그로 감싸고 "btn-group" 클래스를 부여하면 된다.

1. button 태그에 적용시킬 때

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

 

2. a 태그에 적용시킬 때

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

 

 

https://getbootstrap.com/docs/5.0/components/button-group/

 

Button group

Group a series of buttons together on a single line or stack them in a vertical column.

getbootstrap.com

 

 

 

728x90
반응형

'Front > CSS' 카테고리의 다른 글

[css] 이미지를 화면 중간에 위치  (0) 2022.07.01
[CSS] div겹치기  (0) 2022.06.20
[css] float 속성 flex 와 의 차이  (0) 2022.06.03
[css] 다양한 버튼 디자인 참고  (0) 2022.05.29
[css] 투명색 코드  (0) 2022.05.17