BS 5.3 스타일 뱃지 CSS 구현

기본 색상

primary secondary success danger warning info light dark

Pill / Size

badge bg-info badge-pill dark badge-sm badge bg-warning badge-lg

Outline / Soft

primaryOUTLINE .badge-outline-primary
successOUTLINE .badge-outline-success
dangerOUTLINE .badge-outline-danger
primarySOFT .badge-soft-primary
successSOFT .badge-soft-success
dangerSOFT .badge-soft-danger

Counter / Dot

9 .badge-counter
99 카운터 2자리
.badge-dot
경고 점
기본 점

다양한 조합 예시

Pill Small pill + sm
Large Outline outline + lg
Soft Pill soft + pill
24 counter + pill
dot + lg
New soft + pill + lg

사용 방법

HTML 구조:

<!-- 기본 뱃지 -->
<span class="badge bg-primary">primary</span>

<!-- Pill 스타일 -->
<span class="badge bg-info badge-pill">pill</span>

<!-- 크기 조절 -->
<span class="badge bg-dark badge-sm">small</span>
<span class="badge bg-warning badge-lg">large</span>

<!-- Outline 스타일 -->
<span class="badge badge-outline-primary">outline</span>

<!-- Soft 스타일 -->
<span class="badge badge-soft-success">soft</span>

<!-- Counter -->
<span class="badge bg-danger badge-counter">9</span>

<!-- Dot -->
<span class="badge bg-success badge-dot"></span>

클래스 조합:

  • 색상: bg-primary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark
  • 크기: badge-sm, badge-lg
  • 모양: badge-pill (둥근 모양)
  • 스타일: badge-outline-*, badge-soft-*
  • 특수: badge-counter, badge-dot