Bootstrap 5 ตรา

สัญลักษณ์

สัญลักษณ์ (Badges) ใช้เพื่อเพิ่มข้อมูลเพิ่มเติมให้กับเนื้อหา:

ใน <span> ใช้ในองค์ประกอบ .badge คลาสและคลาสเนื่องกับโดเมน (เช่น .bg-secondary）เพื่อสร้างสัญลักษณ์แบบสี่เหลี่ยมเรียบ ๆ โปรดจำได้ว่า สัญลักษณ์จะขยายตัวเพื่อตรงกับขนาดขององค์ประกอบพ่อ (ถ้ามี):

ตัวอย่าง

<h1>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h1>
<h2>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h2>
<h3>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h3>
<h4>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h4>
<h5>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h5>
<h6>หัวข้อตัวอย่าง <span class="badge bg-secondary">ใหม่</span></h6>

ทดสอบเองเลย

สัญลักษณ์ของโดเมน

ใช้คลาสเนื่องกับโดเมน (.bg-*) มีการเปลี่ยนสีสัญลักษณ์:

ตัวอย่าง

<span class="badge bg-primary">หลัก</span>
<span class="badge bg-secondary">ขั้นต่ำ</span>
<span class="badge bg-success">สำเร็จ</span>
<span class="badge bg-danger">อันตราย</span>
<span class="badge bg-warning">คำเตือน</span>
<span class="badge bg-info">ข้อมูล</span>
<span class="badge bg-light">ขาว</span>
<span class="badge bg-dark">เข้ม</span>

ทดสอบเองเลย

สัญลักษณ์แบบหุ้มหลอด

ใช้ .rounded-pill คลาสทำให้สัญลักษณ์เรียบเรียงเป็นทรงกลม:

ตัวอย่าง

<span class="badge rounded-pill bg-primary">หลัก</span>
<span class="badge rounded-pill bg-secondary">รอง</span>
<span class="badge rounded-pill bg-success">สำเร็จ</span>
<span class="badge rounded-pill bg-danger">อันตราย</span>
<span class="badge rounded-pill bg-warning">คำเตือน</span>
<span class="badge rounded-pill bg-info">ข้อมูล</span>
<span class="badge rounded-pill bg-light">ขาว</span>
<span class="badge rounded-pill bg-dark">เข้ม</span>

ทดสอบเองเลย

สัญลักษณ์ที่อยู่ด้านในองค์ประกอบ

ตัวอย่างใช้สัญลักษณ์ที่อยู่ด้านในปุ่ม

ตัวอย่าง

<button type="button" class="btn btn-primary">
  ข้อความ <span class="badge bg-danger">4</span>
</button>

ทดสอบเองเลย