ㄧ.標籤字體大小

<div class="component" id="demo">
  <h1><span class="badge badge-secondary">new</span></h1>
  <h2><span class="badge badge-secondary">new</span></h2>
  <h3><span class="badge badge-secondary">new</span></h3>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.套用h1不同字體大小的標題，badge也會隨著父元素一樣字體大

二.膠囊標籤

<div class="component" id="demo">
   <span class="badge badge-primary badge-pill">new</span>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.badge-pill幫標籤加圓角形成膠囊標籤

三.按鈕計數器

<div class="component" id="demo">
   <button class="btn btn-primary">
  Hello~ 
  <span class="badge badge-light">1</span>
 </button>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.按鈕計數器，父元素包裝成btn的樣式，子元素為badge

四.a連結標籤

<div class="component" id="demo">
    <a href="#" class="badge badge-primary">1</a>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.a也可以套用badge

codepen
參考：bootstrap4