Bootstrap 4 (부트스트랩) 구성요소, Badges

Badge는 게시판이나 쇼핑몰 상품목록에서 'new', 'hot'등의 표식을 달아주거나, 장바구니에 담긴 상품의 숫자 등을 표시하는 데 주로 사용된다. Badge의 크기는 적용되는 부모 요소(parent element)의 크기를 그대로 따른다.

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1>Example heading <span class="badge badge-secondary">New</span></h1>
        <h2>Example heading <span class="badge badge-secondary">New</span></h2>
        <h3>Example heading <span class="badge badge-secondary">New</span></h3>
        <h4>Example heading <span class="badge badge-secondary">New</span></h4>
        <h5>Example heading <span class="badge badge-secondary">New</span></h5>
        <h6>Example heading <span class="badge badge-secondary">New</span></h6>

          <button type="button" class="btn btn-primary">
            Notifications <span class="badge badge-light">4</span>
          </button>

      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->

Basge의 색상

Alert와 마찬가지로 Badge에도 부트스트랩에서 제공하는 8가지 색상을 부여할 수 있다.

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <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>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->

Pill badges (모서리가 둥근 Badge)

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <span class="badge badge-pill badge-primary">Primary</span>
        <span class="badge badge-pill badge-secondary">Secondary</span>
        <span class="badge badge-pill badge-success">Success</span>
        <span class="badge badge-pill badge-danger">Danger</span>
        <span class="badge badge-pill badge-warning">Warning</span>
        <span class="badge badge-pill badge-info">Info</span>
        <span class="badge badge-pill badge-light">Light</span>
        <span class="badge badge-pill badge-dark">Dark</span>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->

Badge에 링크걸기

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <a href="#" class="badge badge-primary">Primary</a>
        <a href="#" class="badge badge-secondary">Secondary</a>
        <a href="#" class="badge badge-success">Success</a>
        <a href="#" class="badge badge-danger">Danger</a>
        <a href="#" class="badge badge-warning">Warning</a>
        <a href="#" class="badge badge-info">Info</a>
        <a href="#" class="badge badge-light">Light</a>
        <a href="#" class="badge badge-dark">Dark</a>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->