오늘은 부트스트랩에서 사용하는 Badges 대해 알아보고자 한다. 본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다.
적용모습
Example heading New
소스코드
<h6>Example heading <span class="badge badge-secondary">New</span></h6>이와 같이 badge class를 사용하게 되면 글옆에 배지를 표시 할 수 있다. 본 예제에서는 Example heading 옆에 new 라는 배지가 출력됨을 볼 수 있다.
badge class 종류를 보면 다음과 같다.
- badge-pill
- badge-primary
- badge-secondary
- badge-success
- badge-info
- badge-warning
- badge-danger
- badge-light
- badge-dark
- alert-link
- alert-dismissible
- alert-heading
앞에서 사용한 alert 하위에 적용해주면 소스가 반영된다. 반영된 모습을 보자.
badge class 사용
적용모습
badge-pill Primary Secondary Success Info Warning Danger Light Dark소스코드
<span class="badge badge-primary badge-pill">badge-pill</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>badge-pill 클래스는 나머지 badge-* 클래스와 함께 사용하셔야 합니다.
글옆에 배지를 출력해서 보다 멋진 웹 문서를 만들어 보세요. ^^
