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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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가지 색상을 부여할 수 있다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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에 링크걸기

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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