[Bootstrap] Badges

1. 배지란?

6.1 badge

• 추가 정보를 강조하거나 표시하기 위해 사용
• 텍스트 옆에 붙는 작은 라벨 형태의 요소
• 예: “New”, “3개 알림”, “Hot” 등

---

2. 기본 사용법

• `span` 요소에 `.badge` + 색상 클래스(`.bg-*`) 조합
• 텍스트 크기(heading 등)에 따라 자동 크기 조절됨

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

---

3. 필 형태 배지 (Pill Badges)

• `.rounded-pill` 클래스를 사용해 둥근 끝처리 배지 생성

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

---

 4. 버튼 안의 배지

• 버튼 내부에 배지를 삽입해 알림 수 등을 표현할 수 있음

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-danger">4</span>
</button>