
Bootstrap 5 การสร้าง Badge
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>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples