Bootstrap 5 메달

벨트

벨트（Badges）는 내용에 추가 정보를 추가하는 데 사용됩니다：

에서 <span> 요소에서 사용 .badge 클래스와 상황 클래스（예를 들어 .bg-secondary）를 사용하여 사각 벨트를 만들어주세요. 부모 요소의 크기에 맞게 벨트가 조정됩니다（있을 경우）：

예제

<h1>예제 제목 <span class="badge bg-secondary">신규</span></h1>
<h2>예제 제목 <span class="badge bg-secondary">신규</span></h2>
<h3>예제 제목 <span class="badge bg-secondary">신규</span></h3>
<h4>예제 제목 <span class="badge bg-secondary">신규</span></h4>
<h5>예제 제목 <span class="badge bg-secondary">신규</span></h5>
<h6>예제 제목 <span class="badge bg-secondary">신규</span></h6>

직접 시험해보세요

상황 벨트

아무런 상황 클래스를 사용하세요 (.bg-*) 색상을 변경하려면：

예제

<span class="badge bg-primary">주요</span>
<span class="badge bg-secondary">보조</span>
<span class="badge bg-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>

직접 시험해보세요

胶囊 벨트

사용 .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>

직접 시험해보세요

요소 내의 벨트

버튼 내에 벨트를 사용하는 예제:

예제

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

직접 시험해보세요