[basic] BS5 - Badge (BS배지)

1. Badge 소개
2. Badge Color (색깔)
3. Badge pill (알약배지 = 모서리가 둥근 배지)
4. badge 예제 - 빨간색 배지

※ BS4와 유사하나, 배지 배경색 클래스와 둥근 모양 만드는 클래스가 바뀜.

Badge 소개 

 

모든 콘텐츠에 추가 정보 추가하는 데 사용.

(예) 새글표시, 새글개수표시

 

---

1. 요소 안 span 태그에 (.badge) 클래스 적용해 생성.

 

.badge {

  display: inline-block;

  padding: 0.35em 0.65em;

  font-size: 0.75em;

  font-weight: 700;

  line-height: 1;

  color: #fff;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  border-radius: 0.25rem;

}

.badge:empty {

  display: none;

}

.btn .badge {

  position: relative;

  top: -1px;

}

 

---

2. 부모요소 크기에 따라 크기가 자동조절됨.

 

<div class="container">

  <h1>Homzzang.com <span class="badge bg-secondary">New</span></h1>

  <h2>Homzzang.com <span class="badge bg-secondary">New</span></h2>

  <h3>Homzzang.com <span class="badge bg-secondary">New</span></h3>

  <h4>Homzzang.com <span class="badge bg-secondary">New</span></h4>

  <h5>Homzzang.com <span class="badge bg-secondary">New</span></h5>

  <h6>Homzzang.com <span class="badge bg-secondary">New</span></h6>

</div>

 

결과보기

※ .bg-secondary 클래스는 버튼 색깔. (cf. BS4: .badge-secondary 사용)

Badge Color (색깔)

 

<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>

 

결과보기

cf. BS4 경우, badge- 접두어 클래스 사용. (예: .badge-primary)

Badge 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>

 

결과보기

---

PS. 

 

.rounded-pill {

  border-radius: 50rem !important;

}

 

cf. BS4 경우, .badge-pill 클래스 사용.

badge 예제 - 빨간색 배지

 

<button type="button" class="btn btn-primary">

  쪽지 <span class="badge bg-danger">4</span>

</button>

 

결과보기