배지는 컨텐츠에 추가 정보를 제공하는데 사용됩니다. 직사격형 모양의 배지를 만들려면 <span>요소에 .badge클래스와 문맥에 맞는 클래스(예: .badge-info)를 함께 사용하면 됩니다.

배지는 부모 요소가 있는 경우, 부모 요소의 크기와 일치하도록 배율이 자동 조정됩니다.

<h1>실전홈페이지제작강좌 <span class="badge badge-info">인기</span></h1>
<h2>실전홈페이지제작강좌 <span class="badge badge-info">50</span></h2>
<h3>실전홈페이지제작강좌 <span class="badge badge-info">5011</span></h3>
<h4>실전홈페이지제작강좌 <span class="badge badge-info">추천</span></h4>
<h5>실전홈페이지제작강좌 <span class="badge badge-info">705</span></h5>
<h6>실전홈페이지제작강좌 <span class="badge badge-info">4300</span></h6>

문맥 배지 (Contextual)

문백 클래스(.badge-*)를 사용하여 배지의 색상을 설정할 수 있습니다.

<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-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Pill 배지 (모서리 라운드 형태)

.badge-pill클래스를 추가하면 배지 모서리 부분을 둥글게 할 수 있습니다.

<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Succeess</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>

요소 내부에 배지 두기

<button type="button" class="btn btn-primary">
    실전홈페이지제작강좌 <span class="badge badge-light">7000</span>
</button>
<button type="button" class="btn btn-success">
    CSS Grid강좌 <span class="badge badge-light">400</span>
</button>