Badge มีไว้สำหรับแสดงข้อมูลเพิ่มเติมต่อจากข้อมูลหลัก เช่น แสดงจำนวนตัวเลขการแจ้งเตือนใหม่ เป็นต้น หรือใช้งานอย่างอื่นในลักษณะเป็นป้าย
การสร้าง Badge สามารถทำได้โดยการใช้คลาส .badge ร่วมกับเอลิเมนต์ <span> นอกจากนี้ยังสามารถกำหนดสีพื้นหลังให้ Badge โดยการใช้ contextual classes (.bg-*) เพื่อกำหนดสีพื้นหลังให้ Badge ได้อีกด้วย
<h1>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-secondary">ส่วนนี้คือ Badge</span></h1>
<h2>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-primary">ส่วนนี้คือ Badge</span></h2>
<h3>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-success">ส่วนนี้คือ Badge</span></h3>
<h4>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-warning">ส่วนนี้คือ Badge</span></h4>
<h4>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-danger">ส่วนนี้คือ Badge</span></h4>
<h6>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-info">ส่วนนี้คือ Badge</span></h6>
จากตัวอย่างด้านบน เราจะได้ป้าย Badge เป็นกรอบสี่เหลี่ยม แต่ถ้าต้องการให้ Badge เป็นแบบมุมมน ก็สามารถทำได้โดยเพิ่มคลาส .rounded-pill เข้าไป
<span class="badge rounded-pill bg-primary">This Is Badge</span>
<span class="badge rounded-pill bg-secondary">This Is Badge</span>
<span class="badge rounded-pill bg-success">This Is Badge</span>
<span class="badge rounded-pill bg-danger">This Is Badge</span>
<span class="badge rounded-pill bg-warning">This Is Badge</span>
<span class="badge rounded-pill bg-info">This Is Badge</span>
<span class="badge rounded-pill bg-light">This Is Badge</span>
<span class="badge rounded-pill bg-dark">This Is Badge</span>
เราสามารถใช้งาน Badge ภายในเอลิเมนต์อื่นได้ เช่น ปุ่มกด เป็นต้น
<button type="button" class="btn btn-success">
การแจ้งเตือนใหม่ <span class="badge bg-danger">10</span>
</button>
