{"id":91212,"date":"2025-10-05T00:04:11","date_gmt":"2025-10-04T17:04:11","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=91212"},"modified":"2025-10-05T00:04:14","modified_gmt":"2025-10-04T17:04:14","slug":"huong-dan-su-dung-badge-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/","title":{"rendered":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Badge_Bootstrap_la_gi\" >Badge Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Cac_nhom_dinh_dang_Badge_trong_Bootstrap_kem_vi_du\" >C\u00e1c nh\u00f3m \u0111\u1ecbnh d\u1ea1ng Badge trong Bootstrap (k\u00e8m v\u00ed d\u1ee5)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Cac_cach_tuy_chinh_Badge_Bootstrap\" >C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh Badge Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Tong_hop_cac_cu_phap_thao_tac_voi_Badge_Bootstrap\" >T\u1ed5ng h\u1ee3p c\u00e1c c\u00fa ph\u00e1p thao t\u00e1c v\u1edbi Badge Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Mot_so_truong_hop_su_dung_Badge_Bootstrap\" >M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Badge Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Nhung_dieu_luu_y_khi_su_dung_Badge_Bootstrap\" >Nh\u1eefng \u0111i\u1ec1u l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Badge Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Cac_cau_hoi_thuong_gap_ve_Badge_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Badge Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, badge l\u00e0 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng v\u00f4 c\u00f9ng h\u1eefu \u00edch: t\u1eeb hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o, tr\u1ea1ng th\u00e1i ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ebfn vi\u1ec7c g\u1eafn nh\u00e3n ph\u1ee5 cho button hay heading. Nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng class c\u00f3 s\u1eb5n, Bootstrap gi\u00fap b\u1ea1n t\u1ea1o badge nhanh ch\u00f3ng, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n v\u00e0 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh theo nhu c\u1ea7u.\u00a0<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u ngay:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Badge trong Bootstrap l\u00e0 g\u00ec v\u00e0 vai tr\u00f2 c\u1ee7a n\u00f3 trong thi\u1ebft k\u1ebf web<\/li>\n\n\n\n<li>C\u00e1c ki\u1ec3u badge ph\u1ed5 bi\u1ebfn<\/li>\n\n\n\n<li>C\u00e1ch t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng cho Badge<\/li>\n\n\n\n<li>C\u00e1c tr\u01b0\u1eddng h\u1ee3p \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap l\u00e0 g\u00ec? 7 t\u00ednh n\u0103ng c\u1ea7n bi\u1ebft trong Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-badge-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Badge_Bootstrap_la_gi\"><\/span><strong>Badge Bootstrap l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vai-tro-c\u1ee7a-badge-trong-thi\u1ebft-k\u1ebf-web\"><strong>Vai tr\u00f2 c\u1ee7a Badge trong thi\u1ebft k\u1ebf web<\/strong><\/h3>\n\n\n\n<p>Badge (nh\u00e3n hi\u1ec3n th\u1ecb) l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n nh\u1ecf trong giao di\u1ec7n web, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ph\u1ee5 ng\u1eafn g\u1ecdn nh\u01b0 s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i ho\u1eb7c nh\u00e3n ph\u00e2n lo\u1ea1i. V\u00ed d\u1ee5 ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o ch\u01b0a \u0111\u1ecdc<\/li>\n\n\n\n<li>G\u1eafn nh\u00e3n \u201cNew\u201d cho m\u1ed9t s\u1ea3n ph\u1ea9m ho\u1eb7c b\u00e0i vi\u1ebft<\/li>\n\n\n\n<li>Th\u1ec3 hi\u1ec7n tr\u1ea1ng th\u00e1i ng\u01b0\u1eddi d\u00f9ng (Online \/ Offline)<\/li>\n<\/ul>\n\n\n\n<p>M\u1eb7c d\u00f9 nh\u1ecf g\u1ecdn, nh\u01b0ng badge gi\u00fap giao di\u1ec7n tr\u1ef1c quan h\u01a1n, \u0111\u1ed3ng th\u1eddi t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng khi h\u1ecd c\u00f3 th\u00eam th\u00f4ng tin nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n \u0111i s\u00e2u v\u00e0o n\u1ed9i dung chi ti\u1ebft.<\/p>\n\n\n\n<p>H\u00ecnh \u1ea3nh v\u00ed d\u1ee5 v\u1ec1 badge:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"276\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-12.png\" alt=\"\" class=\"wp-image-91213\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-12.png 636w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-12-300x130.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-12-200x87.png 200w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-dung-badge-bootstrap\"><strong>T\u1ea1i sao n\u00ean d\u00f9ng Badge Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Khi x\u00e2y d\u1ef1ng giao di\u1ec7n web, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u1ef1 vi\u1ebft CSS \u0111\u1ec3 t\u1ea1o badge b\u1eb1ng c\u00e1ch th\u00eam m\u1ed9t th\u1ebb &lt;span&gt; r\u1ed3i style th\u1ee7 c\u00f4ng v\u1edbi background-color, border-radius, padding&#8230; Tuy nhi\u00ean, c\u00e1ch n\u00e0y v\u1eeba t\u1ed1n th\u1eddi gian, v\u1eeba d\u1ec5 d\u1eabn \u0111\u1ebfn t\u00ecnh tr\u1ea1ng thi\u1ebfu \u0111\u1ed3ng b\u1ed9 trong to\u00e0n b\u1ed9 d\u1ef1 \u00e1n.<\/p>\n\n\n\n<p>\u0110\u00e2y ch\u00ednh l\u00e0 l\u00fd do Badge Bootstrap ra \u0111\u1eddi. Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n m\u1ed9t component badge v\u1edbi \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m c\u00f4ng s\u1ee9c m\u00e0 v\u1eabn \u0111\u1ea3m b\u1ea3o giao di\u1ec7n chuy\u00ean nghi\u1ec7p:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nhanh ch\u00f3ng: ch\u1ec9 c\u1ea7n v\u00e0i d\u00f2ng class (.badge, bg-*, rounded-pill\u2026) l\u00e0 c\u00f3 th\u1ec3 t\u1ea1o ngay m\u1ed9t badge \u0111\u1eb9p m\u1eaft<\/li>\n\n\n\n<li>\u0110\u1ed3ng b\u1ed9 giao di\u1ec7n: badge k\u1ebf th\u1eeba h\u1ec7 th\u1ed1ng m\u00e0u s\u1eafc, font ch\u1eef v\u00e0 spacing t\u1eeb Bootstrap, \u0111\u1ea3m b\u1ea3o nh\u1ea5t qu\u00e1n tr\u00ean to\u00e0n b\u1ed9 website<\/li>\n\n\n\n<li>D\u1ec5 t\u00f9y ch\u1ec9nh: c\u00f3 s\u1eb5n nhi\u1ec1u bi\u1ebfn th\u1ec3 m\u00e0u, d\u1ea1ng pill (bo tr\u00f2n), ho\u1eb7c m\u1edf r\u1ed9ng d\u1ec5 d\u00e0ng b\u1eb1ng CSS ri\u00eang<\/li>\n\n\n\n<li>Th\u00e2n thi\u1ec7n responsive: badge t\u1ef1 \u0111\u1ed9ng co gi\u00e3n theo c\u1ee1 ch\u1eef ho\u1eb7c button ch\u1ee9a n\u00f3, kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam media query<\/li>\n<\/ul>\n\n\n\n<p>\u0110\u1ec3 th\u1ea5y r\u00f5 s\u1ef1 kh\u00e1c bi\u1ec7t, h\u00e3y c\u00f9ng so s\u00e1nh c\u00e1ch g\u1eafn nh\u00e3n \u201cM\u1edbi\u201d v\u00e0o ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft b\u1eb1ng hai ph\u01b0\u01a1ng ph\u00e1p: t\u1ef1 vi\u1ebft CSS th\u1ee7 c\u00f4ng v\u00e0 s\u1eed d\u1ee5ng class c\u00f3 s\u1eb5n trong Bootstrap.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>T\u1ef1 vi\u1ebft th\u1ee7 c\u00f4ng<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft &lt;span class=\"custom-badge\"&gt;New&lt;\/span&gt;&lt;\/h2&gt;\n&lt;style&gt;\n .custom-badge {\n   display: inline-block;\n   padding: 0.25em 0.6em;\n   font-size: 0.75em;\n   font-weight: 600;\n   background-color: #dc3545;\n   color: #fff;\n   border-radius: 0.25rem;\n }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>D\u00f9ng Badge Bootstrap<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft &lt;span <em>class<\/em>=\"badge badge-sm bg-danger\"&gt;New&lt;\/span&gt;&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb gi\u1ed1ng nhau:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"186\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13.png\" alt=\"\" class=\"wp-image-91214\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13.png 780w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13-300x72.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13-640x153.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13-200x48.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-13-768x183.png 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n\n\n\n<p>Nh\u01b0 ch\u00fang ta th\u1ea5y, vi\u1ec7c s\u1eed d\u1ee5ng Badge Bootstrap gi\u00fap vi\u1ec7c tri\u1ec3n khai m\u00e3 nhanh ch\u00f3ng v\u00e0 \u0111\u01a1n gi\u1ea3n h\u01a1n so v\u1edbi vi\u1ec7c th\u1ef1c hi\u1ec7n th\u1ee7 c\u00f4ng. M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn trong th\u1ef1c t\u1ebf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>G\u1eafn nh\u00e3n \u201cM\u1edbi\u201d v\u00e0o ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft<\/li>\n\n\n\n<li>Hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o trong n\u00fat \u201cNotification\u201d<\/li>\n\n\n\n<li>Th\u1ec3 hi\u1ec7n tr\u1ea1ng th\u00e1i \u201c\u0110ang ho\u1ea1t \u0111\u1ed9ng \/ T\u1ea1m ng\u01b0ng\u201d cho ng\u01b0\u1eddi d\u00f9ng trong h\u1ec7 th\u1ed1ng qu\u1ea3n tr\u1ecb<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstra<\/a><\/strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\"><strong>p<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-nhom-d\u1ecbnh-d\u1ea1ng-badge-trong-bootstrap-kem-vi-d\u1ee5\"><span class=\"ez-toc-section\" id=\"Cac_nhom_dinh_dang_Badge_trong_Bootstrap_kem_vi_du\"><\/span><strong>C\u00e1c nh\u00f3m \u0111\u1ecbnh d\u1ea1ng Badge trong Bootstrap (k\u00e8m v\u00ed d\u1ee5)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap cung c\u1ea5p nhi\u1ec1u c\u00e1ch tri\u1ec3n khai badge tu\u1ef3 theo ng\u1eef c\u1ea3nh s\u1eed d\u1ee5ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ba tr\u01b0\u1eddng h\u1ee3p th\u01b0\u1eddng g\u1eb7p nh\u1ea5t:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-badge-trong-heading\"><strong>Badge trong Heading<\/strong><\/h3>\n\n\n\n<p>Badge trong heading th\u01b0\u1eddng g\u1eafn v\u00e0o c\u00e1c th\u1ebb ti\u00eau \u0111\u1ec1 t\u1eeb &lt;h1&gt; \u0111\u1ebfn &lt;h6&gt;. Nh\u1edd vi\u1ec7c d\u00f9ng \u0111\u01a1n v\u1ecb <strong>em<\/strong>, badge trong Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng co gi\u00e3n theo k\u00edch th\u01b0\u1edbc ch\u1eef c\u1ee7a heading.<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p chung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;hN&gt;N\u1ed9i dung ti\u00eau \u0111\u1ec1 &lt;span class=\"badge bg-&#91;m\u00e0u]\"&gt;N\u1ed9i dung badge&lt;\/span&gt;&lt;\/hN&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N l\u00e0 c\u1ea5p heading t\u1eeb 1 \u0111\u1ebfn 6<\/li>\n\n\n\n<li>bg-[m\u00e0u] ch\u1ecdn m\u00e0u n\u1ec1n cho badge (v\u00ed d\u1ee5: bg-primary, bg-danger)<\/li>\n<\/ul>\n\n\n\n<p>Badge th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong ti\u00eau \u0111\u1ec1 \u0111\u1ec3 nh\u1ea5n m\u1ea1nh m\u1ed9t nh\u00e3n ph\u1ee5 nh\u01b0 \u201cM\u1edbi\u201d ho\u1eb7c \u201cHot\u201d.&nbsp; V\u00ed d\u1ee5: g\u1eafn nh\u00e3n \u201cM\u1edbi\u201d v\u00e0o ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;h1&gt;B\u00e0i vi\u1ebft n\u1ed5i b\u1eadt &lt;span class=\"badge bg-success\"&gt;M\u1edbi&lt;\/span&gt;&lt;\/h1&gt;\n\n   &lt;h3&gt;Chuy\u00ean m\u1ee5c &lt;span class=\"badge bg-warning text-dark\"&gt;Hot&lt;\/span&gt;&lt;\/h3&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>V\u1edbi &lt;h1&gt;, badge to h\u01a1n, c\u00e2n \u0111\u1ed1i v\u1edbi ti\u00eau \u0111\u1ec1 ch\u00ednh<\/li>\n\n\n\n<li>V\u1edbi &lt;h3&gt;, badge nh\u1ecf l\u1ea1i t\u01b0\u01a1ng \u1ee9ng, kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam CSS<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"247\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14.png\" alt=\"\" class=\"wp-image-91215\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14-300x93.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14-640x198.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14-200x62.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-14-768x237.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-badge-trong-button\"><strong>Badge trong Button<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t tr\u01b0\u1eddng h\u1ee3p ph\u1ed5 bi\u1ebfn kh\u00e1c l\u00e0 d\u00f9ng badge \u0111\u1ec3 hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng, v\u00ed d\u1ee5 s\u1ed1 th\u00f4ng b\u00e1o ch\u01b0a \u0111\u1ecdc. Khi g\u1eafn badge v\u00e0o button, ch\u1ec9 c\u1ea7n th\u00eam badge \u0111\u1eb7t ngay sau text c\u1ee7a button. Badge s\u1ebd t\u1ef1 \u0111\u1ed9ng c\u0103n ch\u1ec9nh chi\u1ec1u cao \u0111\u1ec3 \u0111\u1ed3ng b\u1ed9 v\u1edbi n\u00fat.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: badge hi\u1ec3n th\u1ecb s\u1ed1 th\u00f4ng b\u00e1o trong n\u00fat Notification:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button type=\"button\" class=\"btn btn-primary\"&gt;\n     Th\u00f4ng b\u00e1o &lt;span class=\"badge bg-light text-dark\"&gt;4&lt;\/span&gt;\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"170\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-15.png\" alt=\"\" class=\"wp-image-91216\" style=\"width:424px;height:auto\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-15.png 424w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-15-300x120.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-15-200x80.png 200w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Button Bootstrap l\u00e0 g\u00ec? C\u00e1ch s\u1eed d\u1ee5ng Button v\u00e0 Button Group<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-badge-d\u1ecbnh-v\u1ecb-positioned-badge\"><strong>Badge \u0111\u1ecbnh v\u1ecb (Positioned Badge)<\/strong><\/h3>\n\n\n\n<p>T\u1eeb Bootstrap 5.3, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh v\u1ecb badge \u1edf m\u1ed9t g\u00f3c c\u1ee5 th\u1ec3 c\u1ee7a button ho\u1eb7c icon. Tr\u01b0\u1eddng h\u1ee3p n\u00e0y th\u01b0\u1eddng d\u00f9ng khi mu\u1ed1n badge \u201cn\u1ed5i\u201d l\u00ean tr\u00ean th\u00e0nh ph\u1ea7n ch\u00ednh (gi\u1ed1ng nh\u01b0 s\u1ed1 tin nh\u1eafn tr\u00ean bi\u1ec3u t\u01b0\u1ee3ng \u1ee9ng d\u1ee5ng). V\u00ed d\u1ee5: badge hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng \u1edf g\u00f3c tr\u00ean b\u00ean ph\u1ea3i button:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button type=\"button\" class=\"btn btn-primary position-relative\"&gt;\n     H\u1ed9p th\u01b0\n     &lt;span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger\"&gt;\n       99+\n       &lt;span class=\"visually-hidden\"&gt;unread messages&lt;\/span&gt;\n     &lt;\/span&gt;\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>position-relative<\/strong> \u0111\u1eb7t cho button l\u00e0m g\u1ed1c \u0111\u1ecbnh v\u1ecb<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng<strong> position-absolute<\/strong> <strong>top-0 start-100 translate-middle<\/strong> \u0111\u1ec3 \u0111\u01b0a badge ra g\u00f3c tr\u00ean b\u00ean ph\u1ea3i<\/li>\n\n\n\n<li><strong>rounded-pill bg-danger<\/strong> l\u00e0m badge tr\u00f2n v\u00e0 c\u00f3 n\u1ec1n \u0111\u1ecf<\/li>\n\n\n\n<li><strong>visually-hidden<\/strong> th\u00eam m\u00f4 t\u1ea3 \u1ea9n \u0111\u1ec3 h\u1ed7 tr\u1ee3 screen reader<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"182\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-16.png\" alt=\"\" class=\"wp-image-91217\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-16.png 392w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-16-300x139.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-16-200x93.png 200w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cach-tuy-ch\u1ec9nh-badge-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cach_tuy_chinh_Badge_Bootstrap\"><\/span><strong>C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh Badge Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-mau-n\u1ec1n\"><strong>T\u00f9y ch\u1ec9nh m\u00e0u n\u1ec1n<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Bootstrap cung c\u1ea5p s\u1eb5n m\u1ed9t h\u1ec7 th\u1ed1ng class ti\u1ec7n l\u1ee3i \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a badge. Ch\u1ec9 c\u1ea7n k\u1ebft h\u1ee3p class<strong> .badge<\/strong> v\u1edbi<strong> .bg-*<\/strong> l\u00e0 b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 ph\u00e2n lo\u1ea1i ho\u1eb7c nh\u1ea5n m\u1ea1nh badge theo tr\u1ea1ng th\u00e1i mong mu\u1ed1n.<\/p>\n\n\n\n<p>B\u1ea3ng h\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng c\u00e1c m\u00e0u n\u1ec1n th\u00f4ng d\u1ee5ng cho Badge Bootstrap:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class m\u00e0u n\u1ec1n<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><td><strong>C\u00fa ph\u00e1p Badge<\/strong><\/td><td><strong>Hi\u1ec3n th\u1ecb<\/strong><\/td><\/tr><tr><td><strong>.bg-primary<\/strong><\/td><td>xanh d\u01b0\u01a1ng, th\u01b0\u1eddng d\u00f9ng cho tr\u1ea1ng th\u00e1i ch\u00ednh<\/td><td>&lt;span class=&#8221;badge bg-primary&#8221;&gt;Primary&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/90041ff1-4ba6-488b-b6bf-39cc295eddb4\" width=\"142\" height=\"57\"><\/td><\/tr><tr><td><strong>.bg-secondary<\/strong><\/td><td>x\u00e1m, d\u00f9ng cho nh\u00e3n trung t\u00ednh<\/td><td>&lt;span class=&#8221;badge bg-secondary&#8221;&gt;Secondary&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/f1b6d33f-6e42-4cfe-9489-c55d4ca6ea21\" width=\"142\" height=\"60\"><\/td><\/tr><tr><td><strong>.bg-success<\/strong><\/td><td>xanh l\u00e1, bi\u1ec3u th\u1ecb th\u00e0nh c\u00f4ng ho\u1eb7c tr\u1ea1ng th\u00e1i t\u1ed1t<\/td><td>&lt;span class=&#8221;badge bg-success&#8221;&gt;Success&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/4175c610-bdbf-46a4-b67a-16fa4faea530\" width=\"142\" height=\"64\"><\/td><\/tr><tr><td><strong>.bg-danger<\/strong><\/td><td>\u0111\u1ecf, bi\u1ec3u th\u1ecb l\u1ed7i ho\u1eb7c c\u1ea3nh b\u00e1o nghi\u00eam tr\u1ecdng<\/td><td>&lt;span class=&#8221;badge bg-danger&#8221;&gt;Danger&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/4e51bd21-9749-4285-83ee-8cab138e79dc\" width=\"142\" height=\"67\"><\/td><\/tr><tr><td><strong>.bg-warning<\/strong><\/td><td>v\u00e0ng, bi\u1ec3u th\u1ecb c\u1ea3nh b\u00e1o nh\u1eb9, n\u00ean k\u1ebft h\u1ee3p v\u1edbi text-dark \u0111\u1ec3 d\u1ec5 \u0111\u1ecdc<\/td><td>&lt;span class=&#8221;badge bg-warning text-dark&#8221;&gt;Warning&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/1d3ade00-3190-4347-a33c-cba550d4ec56\" width=\"142\" height=\"61\"><\/td><\/tr><tr><td><strong>.bg-info<\/strong><\/td><td>xanh nh\u1ea1t, d\u00f9ng cho th\u00f4ng tin b\u1ed5 sung<\/td><td>&lt;span class=&#8221;badge bg-info text-dark&#8221;&gt;Info&lt;\/span&gt;<\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"blob:https:\/\/itviec.com\/5f2356c9-d10a-4c16-b029-0ef686b1e39d\" width=\"142\" height=\"77\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-bo-goc-pill-badge\"><strong>T\u00f9y ch\u1ec9nh bo g\u00f3c (Pill Badge)<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i d\u1ea1ng badge m\u1eb7c \u0111\u1ecbnh c\u00f3 bo g\u00f3c vu\u00f4ng nh\u1eb9, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 d\u1ea1ng <strong>pill<\/strong> (vi\u00ean thu\u1ed1c) \u0111\u1ec3 hi\u1ec3n th\u1ecb badge bo tr\u00f2n m\u1ec1m m\u1ea1i h\u01a1n. \u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n badge n\u1ed5i b\u1eadt h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng l\u1edbn (v\u00ed d\u1ee5 99+). C\u00fa ph\u00e1p: ch\u1ec9 c\u1ea7n th\u00eam class <strong>.rounded-pill<\/strong> v\u00e0o badge.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;span class=\"badge bg-primary rounded-pill\"&gt;Primary&lt;\/span&gt;\n   &lt;span class=\"badge bg-success rounded-pill\"&gt;8&lt;\/span&gt;\n   &lt;span class=\"badge bg-danger rounded-pill\"&gt;99+&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"116\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-17.png\" alt=\"\" class=\"wp-image-91219\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-17.png 376w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-17-300x93.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-17-200x62.png 200w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-d\u1ecbnh-d\u1ea1ng-rieng-b\u1eb1ng-css\"><strong>T\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng ri\u00eang b\u1eb1ng CSS<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c d\u00f9 Bootstrap cung c\u1ea5p s\u1eb5n nhi\u1ec1u class ti\u1ec7n l\u1ee3i nh\u01b0 .bg-*, .rounded-pill, hay .text-bg-*, trong th\u1ef1c t\u1ebf s\u1ebd c\u00f3 nh\u1eefng l\u00fac b\u1ea1n c\u1ea7n badge c\u00f3 \u0111\u1ecbnh d\u1ea1ng ri\u00eang nh\u01b0: to h\u01a1n, nh\u1ecf h\u01a1n, n\u1ec1n gradient, ch\u1eef \u0111\u1eadm h\u01a1n, ho\u1eb7c th\u1eadm ch\u00ed ch\u1ec9 l\u00e0 m\u1ed9t ch\u1ea5m tr\u00f2n b\u00e1o tr\u1ea1ng th\u00e1i. Bootstrap 5 cho ph\u00e9p b\u1ea1n tu\u1ef3 bi\u1ebfn badge theo hai c\u00e1ch:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tu\u1ef3-ch\u1ec9nh-nhanh-b\u1eb1ng-css-variables-c\u1ee7a-badge\"><strong>Tu\u1ef3 ch\u1ec9nh nhanh b\u1eb1ng CSS variables c\u1ee7a badge<\/strong><\/h4>\n\n\n\n<p>K\u1ec3 t\u1eeb Bootstrap 5.2, badge \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 m\u1ed9t s\u1ed1 bi\u1ebfn CSS c\u1ee5c b\u1ed9, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9nh tr\u1ef1c ti\u1ebfp m\u00e0 kh\u00f4ng c\u1ea7n bi\u00ean d\u1ecbch Sass. C\u00e1c bi\u1ebfn ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8211;bs-badge-padding-x, &#8211;bs-badge-padding-y<\/strong>: \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng \u0111\u1ec7m<\/li>\n\n\n\n<li><strong>&#8211;bs-badge-font-size<\/strong>: \u0111i\u1ec1u ch\u1ec9nh k\u00edch c\u1ee1 ch\u1eef<\/li>\n\n\n\n<li><strong>&#8211;bs-badge-font-weight<\/strong>: \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 \u0111\u1eadm c\u1ee7a n\u00e9t ch\u1eef<\/li>\n\n\n\n<li><strong>&#8211;bs-badge-color<\/strong>: t\u00f9y ch\u1ec9nh m\u00e0u ch\u1eef<\/li>\n\n\n\n<li><strong>&#8211;bs-badge-border-radius<\/strong>: \u0111i\u1ec1u ch\u1ec9nh bo g\u00f3c<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng variable \u0111\u1ec3 t\u1ea1o ra 2 bi\u1ebfn th\u1ec3 badge c\u00f3 k\u00edch c\u1ee1 kh\u00e1c nhau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;span class=\"badge badge-lg text-bg-primary\"&gt;Large&lt;\/span&gt;\n   &lt;span class=\"badge badge-thin text-bg-secondary\"&gt;Thin&lt;\/span&gt;\n  \n   &lt;style&gt;\n     .badge-lg {\n       --bs-badge-font-size: .9em;\n       --bs-badge-padding-y: .5em;\n       --bs-badge-padding-x: .8em;\n       --bs-badge-font-weight: 600;\n     }\n  \n     .badge-thin {\n       --bs-badge-padding-y: .2em;\n       --bs-badge-padding-x: .5em;\n       --bs-badge-font-weight: 500;\n     }\n   &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"136\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-18.png\" alt=\"\" class=\"wp-image-91220\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-18.png 346w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-18-300x118.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-18-200x79.png 200w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-t\u1ea1o-gradient-badge\"><strong>T\u1ea1o gradient badge<\/strong><\/h4>\n\n\n\n<p>Ngo\u00e0i vi\u1ec7c tinh ch\u1ec9nh bi\u1ebfn c\u00f3 s\u1eb5n, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft CSS th\u1ee7 c\u00f4ng \u0111\u1ec3 t\u1ea1o phong c\u00e1ch ri\u00eang. M\u1ed9t s\u1ed1 v\u00ed d\u1ee5 ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Badge gradient \u2013 n\u1ec1n chuy\u1ec3n m\u00e0u n\u1ed5i b\u1eadt: T\u1ea1o class custom CSS v\u1edbi thu\u1ed9c t\u00ednh <strong>background<\/strong> s\u1eed d\u1ee5ng <strong>linear-gradient<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;span class=\"badge badge-gradient\"&gt;Premium&lt;\/span&gt;\n\n\n   &lt;style&gt;\n     .badge-gradient {\n       background: linear-gradient(45deg, #0d6efd, #6610f2);\n       color: #fff;\n       font-weight: 600;\n       border-radius: .5rem;\n       padding: .45em .75em;\n     }\n   &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"126\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-19.png\" alt=\"\" class=\"wp-image-91222\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-19.png 248w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-19-200x102.png 200w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Badge vi\u1ec1n (outline badge) n\u1ec1n trong su\u1ed1t, c\u00f3 vi\u1ec1n theo m\u00e0u ch\u1eef:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;span class=\"badge badge-outline text-success\"&gt;Success&lt;\/span&gt;\n\n\n   &lt;style&gt;\n     .badge-outline {\n       background-color: transparent;\n       border: 1px solid currentColor;\n       padding: .35em .7em;\n       font-weight: 600;\n       border-radius: .375rem;\n     }\n   &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"98\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-20.png\" alt=\"\" class=\"wp-image-91224\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-20.png 216w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-20-200x91.png 200w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b\u1ea3ng-so-sanh-hai-cach-tu\u1ef3-ch\u1ec9nh-badge-bootstrap\"><strong>B\u1ea3ng so s\u00e1nh hai c\u00e1ch tu\u1ef3 ch\u1ec9nh Badge Bootstrap<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>CSS variables<\/strong><\/td><td><strong>CSS th\u1ee7 c\u00f4ng<\/strong><\/td><\/tr><tr><td><strong>\u01afu \u0111i\u1ec3m<\/strong><\/td><td>Ng\u1eafn g\u1ecdn, ch\u1ec9 thay \u0111\u1ed5i \u0111\u00fang ph\u1ea7n c\u1ea7n thi\u1ebft.<br>V\u1eabn d\u1ef1a tr\u00ean style g\u1ed1c c\u1ee7a Bootstrap, n\u00ean gi\u1eef \u0111\u01b0\u1ee3c s\u1ef1 \u0111\u1ed3ng b\u1ed9 to\u00e0n h\u1ec7 th\u1ed1ng.<br>D\u1ec5 b\u1ea3o tr\u00ec: khi Bootstrap update badge, ph\u1ea7n c\u00f2n l\u1ea1i kh\u00f4ng b\u1ecb l\u1ed7i.<\/td><td>V\u00f4 c\u00f9ng linh ho\u1ea1t, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o badge ho\u00e0n to\u00e0n m\u1edbi (gradient, outline, dot, shadow&#8230;).<br>Kh\u00f4ng b\u1ecb gi\u1edbi h\u1ea1n trong ph\u1ea1m vi c\u00e1c bi\u1ebfn Bootstrap.<br>Ph\u00f9 h\u1ee3p khi c\u1ea7n hi\u1ec7u \u1ee9ng \u0111\u1eb7c bi\u1ec7t ho\u1eb7c thi\u1ebft k\u1ebf \u0111\u1ed9c \u0111\u00e1o v\u01b0\u1ee3t ngo\u00e0i preset c\u1ee7a Bootstrap.<\/td><\/tr><tr><td><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong><\/td><td>Gi\u1edbi h\u1ea1n trong nh\u1eefng bi\u1ebfn m\u00e0 Bootstrap \u0111\u00e3 \u0111\u1ecbnh ngh\u0129a (font-size, padding, color, radius&#8230;)<\/td><td>Vi\u1ebft nhi\u1ec1u CSS h\u01a1n, d\u1ec5 l\u1eb7p l\u1ea1i code.<br>N\u1ebfu Bootstrap thay \u0111\u1ed5i c\u1ea5u tr\u00fac .badge trong phi\u00ean b\u1ea3n m\u1edbi d\u1eabn \u0111\u1ebfn CSS th\u1ee7 c\u00f4ng c\u00f3 th\u1ec3 b\u1ecb l\u1ed7i<\/td><\/tr><tr><td><strong>Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/strong><\/td><td>&#8211; Khi mu\u1ed1n tinh ch\u1ec9nh nh\u1ecf: t\u0103ng\/gi\u1ea3m padding, font-size, \u0111\u1ed9 \u0111\u1eadm ch\u1eef, bo g\u00f3c&#8230;- Mu\u1ed1n gi\u1eef \u0111\u1ed3ng b\u1ed9 t\u1ed1i \u0111a v\u1edbi theme Bootstrap.<\/td><td>&#8211; Khi c\u1ea7n badge \u0111\u1eb7c bi\u1ec7t: gradient, pastel, outline, ch\u1ea5m tr\u00f2n b\u00e1o tr\u1ea1ng th\u00e1i&#8230;- Khi y\u00eau c\u1ea7u thi\u1ebft k\u1ebf \u0111\u1eb7c bi\u1eb9t, kh\u00f4ng gi\u1edbi h\u1ea1n b\u1edfi preset m\u1eb7c \u0111\u1ecbnh.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-h\u1ee3p-cac-cu-phap-thao-tac-v\u1edbi-badge-bootstrap\"><span class=\"ez-toc-section\" id=\"Tong_hop_cac_cu_phap_thao_tac_voi_Badge_Bootstrap\"><\/span><strong>T\u1ed5ng h\u1ee3p c\u00e1c c\u00fa ph\u00e1p thao t\u00e1c v\u1edbi Badge Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ch\u1ee9c n\u0103ng<\/strong><\/td><td><strong>C\u00fa ph\u00e1p\/Class<\/strong><\/td><td><strong>Ghi ch\u00fa<\/strong><\/td><\/tr><tr><td>Badge c\u01a1 b\u1ea3n<\/td><td><code>&lt;span class=\"badge bg-primary\"&gt;<\/code><\/td><td>K\u1ebft h\u1ee3p .badge v\u00e0 .bg-* \u0111\u1ec3 t\u1ea1o badge c\u00f3 m\u00e0u n\u1ec1n.<\/td><\/tr><tr><td>Badge trong heading<\/td><td><code>&lt;hN&gt;...&lt;span class=\"badge ...\"&gt;...&lt;\/span&gt;&lt;\/hN&gt;<\/code><\/td><td>Badge co gi\u00e3n theo c\u1ee1 ch\u1eef c\u1ee7a heading.<\/td><\/tr><tr><td>Badge trong button<\/td><td><code>&lt;button&gt;...&lt;span class=\"badge ...\"&gt;...&lt;\/span&gt;&lt;\/button&gt;<\/code><\/td><td>Th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o.<\/td><\/tr><tr><td>Badge \u0111\u1ecbnh v\u1ecb (positioned)<\/td><td>D\u00f9ng <strong>.position-absolute<\/strong> v\u1edbi badge, k\u1ebft h\u1ee3p <strong>.position-relative<\/strong> cho ph\u1ea7n t\u1eed cha<\/td><td>T\u1ea1o hi\u1ec7u \u1ee9ng \u201cbadge n\u1ed5i \u1edf g\u00f3c\u201d gi\u1ed1ng th\u00f4ng b\u00e1o tr\u00ean icon.<\/td><\/tr><tr><td>Pill Badge (bo tr\u00f2n)<\/td><td><code>&lt;span class=\"badge rounded-pill\"&gt;<\/code><\/td><td>L\u00e0m badge tr\u00f2n h\u01a1n, ph\u00f9 h\u1ee3p cho s\u1ed1 \u0111\u1ebfm.<\/td><\/tr><tr><td>Badge m\u00e0u s\u1eafc \u0111\u1eb7c bi\u1ec7t<\/td><td><code>&lt;span class=\"badge text-bg-*&gt;<\/code><\/td><td>Ph\u1ed1i m\u00e0u ch\u1eef v\u00e0 n\u1ec1n \u0111\u1ec3 t\u1ea1o \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n<\/td><\/tr><tr><td>Badge d\u1ea1ng link<\/td><td><code>&lt;a href=\"#\" class=\"badge bg-secondary\"&gt;...&lt;\/a&gt;<\/code><\/td><td>T\u1ea1o badge c\u00f3 th\u1ec3 click v\u00e0 c\u00f3 hi\u1ec7u \u1ee9ng hover\/click c\u1ee7a th\u1ebb a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-tr\u01b0\u1eddng-h\u1ee3p-s\u1eed-d\u1ee5ng-badge-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_truong_hop_su_dung_Badge_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Badge Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Badge l\u00e0 th\u00e0nh ph\u1ea7n nh\u1ecf nh\u01b0ng xu\u1ea5t hi\u1ec7n trong r\u1ea5t nhi\u1ec1u t\u00ecnh hu\u1ed1ng c\u1ee7a giao di\u1ec7n web. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng tr\u01b0\u1eddng h\u1ee3p ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ngay trong d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hi\u1ec3n-th\u1ecb-s\u1ed1-l\u01b0\u1ee3ng-thong-bao-ho\u1eb7c-tin-nh\u1eafn\"><strong>Hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o ho\u1eb7c tin nh\u1eafn<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch d\u00f9ng ph\u1ed5 bi\u1ebfn nh\u1ea5t. Badge xu\u1ea5t hi\u1ec7n c\u1ea1nh n\u00fat b\u1ea5m ho\u1eb7c icon \u0111\u1ec3 hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o, tin nh\u1eafn ch\u01b0a \u0111\u1ecdc. V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb s\u1ed1 th\u00f4ng b\u00e1o m\u1edbi tr\u00ean thanh navbar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;nav class=\"navbar bg-body-tertiary px-3\"&gt;\n     &lt;a class=\"navbar-brand\" href=\"#\"&gt;ITViec Blog&lt;\/a&gt;\n     &lt;button class=\"btn btn-outline-secondary position-relative\" aria-label=\"Xem th\u00f4ng b\u00e1o\"&gt;\n       &lt;i class=\"bi bi-bell\"&gt;&lt;\/i&gt;\n       &lt;span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger\"&gt;\n         7\n         &lt;span class=\"visually-hidden\"&gt;th\u00f4ng b\u00e1o ch\u01b0a \u0111\u1ecdc&lt;\/span&gt;\n       &lt;\/span&gt;\n     &lt;\/button&gt;\n   &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: ng\u01b0\u1eddi d\u00f9ng ngay l\u1eadp t\u1ee9c bi\u1ebft m\u00ecnh c\u00f3 4 th\u00f4ng b\u00e1o m\u1edbi m\u00e0 kh\u00f4ng c\u1ea7n m\u1edf th\u00eam trang.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"113\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21-640x113.png\" alt=\"\" class=\"wp-image-91225\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21-640x113.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21-300x53.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21-200x35.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21-768x136.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-21.png 800w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-g\u1eafn-nhan-tr\u1ea1ng-thai-status-label\"><strong>G\u1eafn nh\u00e3n tr\u1ea1ng th\u00e1i (status label)<\/strong><\/h3>\n\n\n\n<p>Badge gi\u00fap l\u00e0m r\u00f5 tr\u1ea1ng th\u00e1i c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng (Active, Pending, Banned, Success, Error&#8230;).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"d-flex gap-2 align-items-center\"&gt;\n     &lt;span&gt;Nguyen van A&lt;\/span&gt;\n     &lt;span class=\"badge rounded-pill text-bg-secondary\"&gt;Inactive&lt;\/span&gt;\n   &lt;\/div&gt;\n\n\n   &lt;div class=\"d-flex gap-2 align-items-center\"&gt;\n     &lt;span&gt;Nguyen van B&lt;\/span&gt;\n     &lt;span class=\"badge rounded-pill text-bg-primary\"&gt;Active&lt;\/span&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"138\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-22.png\" alt=\"\" class=\"wp-image-91226\" style=\"width:464px;height:auto\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-22.png 464w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-22-300x89.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-22-200x59.png 200w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hi\u1ec3n-th\u1ecb-s\u1ed1-l\u01b0\u1ee3ng-s\u1ea3n-ph\u1ea9m-trong-gi\u1ecf-hang\"><strong>Hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng s\u1ea3n ph\u1ea9m trong gi\u1ecf h\u00e0ng<\/strong><\/h3>\n\n\n\n<p>Badge r\u1ea5t h\u1eefu \u00edch khi mu\u1ed1n nh\u1ea5n m\u1ea1nh m\u1ed9t nh\u00e3n ph\u1ee5 ngay trong ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft ho\u1eb7c th\u00f4ng tin s\u1ea3n ph\u1ea9m. C\u00e1ch n\u00e0y gi\u00fap ng\u01b0\u1eddi d\u00f9ng nhanh ch\u00f3ng nh\u1eadn ra \u0111\u00e2u l\u00e0 n\u1ed9i dung m\u1edbi, n\u1ed5i b\u1eadt ho\u1eb7c \u0111ang gi\u1ea3m gi\u00e1. V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb nh\u00e3n \u201cSale\u201d v\u00e0 \u201c-30%\u201d trong t\u00ean s\u1ea3n ph\u1ea9m:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-primary position-relative\"&gt;\n     &lt;i class=\"bi bi-cart\"&gt;&lt;\/i&gt; Gi\u1ecf h\u00e0ng\n     &lt;span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark\"&gt;\n       3\n       &lt;span class=\"visually-hidden\"&gt;s\u1ea3n ph\u1ea9m trong gi\u1ecf&lt;\/span&gt;\n     &lt;\/span&gt;\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"142\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-23.png\" alt=\"\" class=\"wp-image-91228\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-23.png 374w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-23-300x114.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-23-200x76.png 200w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1o-di\u1ec3m-nh\u1ea5n-trong-tieu-d\u1ec1-n\u1ed9i-dung\"><strong>T\u1ea1o \u0111i\u1ec3m nh\u1ea5n trong ti\u00eau \u0111\u1ec1\/n\u1ed9i dung<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t tr\u01b0\u1eddng h\u1ee3p r\u1ea5t ph\u1ed5 bi\u1ebfn trong th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed l\u00e0 badge \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb <strong>s\u1ed1 l\u01b0\u1ee3ng s\u1ea3n ph\u1ea9m trong gi\u1ecf h\u00e0ng<\/strong>. Badge th\u01b0\u1eddng n\u1eb1m \u1edf g\u00f3c n\u00fat ho\u1eb7c icon gi\u1ecf, gi\u00fap ng\u01b0\u1eddi d\u00f9ng lu\u00f4n bi\u1ebft m\u00ecnh \u0111\u00e3 th\u00eam bao nhi\u00eau s\u1ea3n ph\u1ea9m. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;h5 class=\"mb-1\"&gt;\n     Tai nghe X100\n     &lt;span class=\"badge text-bg-warning\"&gt;Sale&lt;\/span&gt;\n     &lt;span class=\"badge text-bg-danger\"&gt;-30%&lt;\/span&gt;\n   &lt;\/h5&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"120\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-25.png\" alt=\"\" class=\"wp-image-91229\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-25.png 576w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-25-300x63.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-25-200x42.png 200w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"nhung-dieu-luu-y-khi-su-dung-badge-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_dieu_luu_y_khi_su_dung_Badge_Bootstrap\"><\/span><strong>Nh\u1eefng \u0111i\u1ec1u l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Badge Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 badge l\u00e0 m\u1ed9t component nh\u1ecf v\u00e0 r\u1ea5t d\u1ec5 d\u00f9ng, nh\u01b0ng n\u1ebfu tri\u1ec3n khai kh\u00f4ng \u0111\u00fang c\u00e1ch, ch\u00fang c\u00f3 th\u1ec3 g\u00e2y r\u1ed1i m\u1eaft, kh\u00f3 \u0111\u1ecdc ho\u1eb7c k\u00e9m th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng b\u1ea1n c\u1ea7n n\u1eafm:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Badge ch\u1ec9 n\u00ean d\u00f9ng \u0111\u1ec3 b\u1ed5 sung th\u00f4ng tin ng\u1eafn g\u1ecdn:<\/strong> Badge kh\u00f4ng ph\u1ea3i l\u00e0 th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a giao di\u1ec7n, m\u00e0 ch\u1ec9 \u0111\u00f3ng vai tr\u00f2 nh\u1ea5n m\u1ea1nh ho\u1eb7c b\u1ed5 sung. N\u1ebfu b\u1ea1n nh\u1ed3i qu\u00e1 nhi\u1ec1u n\u1ed9i dung v\u00e0o badge, n\u00f3 s\u1ebd l\u00e0m m\u1ea5t \u00fd ngh\u0129a c\u1ee7a th\u00e0nh ph\u1ea7n n\u00e0y.<\/li>\n\n\n\n<li><strong>Ch\u00fa \u00fd \u0111\u1ebfn kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb:<\/strong> M\u1ed9t s\u1ed1 m\u00e0u n\u1ec1n s\u00e1ng (v\u00ed d\u1ee5: .bg-warning, .bg-light) c\u00f3 th\u1ec3 khi\u1ebfn ch\u1eef kh\u00f3 \u0111\u1ecdc n\u1ebfu \u0111\u1ec3 m\u1eb7c \u0111\u1ecbnh. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, h\u00e3y b\u1ed5 sung text-dark \u0111\u1ec3 t\u0103ng \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n.&nbsp;<\/li>\n\n\n\n<li><strong>Kh\u00f4ng n\u00ean l\u1ea1m d\u1ee5ng badge:<\/strong> N\u1ebfu tr\u00ean c\u00f9ng m\u1ed9t trang b\u1ea1n g\u1eafn qu\u00e1 nhi\u1ec1u badge (nhi\u1ec1u m\u00e0u s\u1eafc, nhi\u1ec1u s\u1ed1 \u0111\u1ebfm), giao di\u1ec7n s\u1ebd tr\u1edf n\u00ean r\u1ed1i r\u1eafm. Badge ch\u1ec9 n\u00ean d\u00f9ng \u0111\u1ec3 highlight th\u00f4ng tin quan tr\u1ecdng nh\u1ea5t.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-badge-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Badge_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Badge Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-nh\u1ea5t-thi\u1ebft-ph\u1ea3i-dung-th\u1ebb-lt-span-gt-d\u1ec3-t\u1ea1o-badge-khong\"><strong>C\u00f3 nh\u1ea5t thi\u1ebft ph\u1ea3i d\u00f9ng th\u1ebb &lt;span&gt; \u0111\u1ec3 t\u1ea1o badge kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Badge c\u1ee7a Bootstrap l\u00e0 m\u1ed9t l\u1edbp giao di\u1ec7n (.badge), kh\u00f4ng ph\u1ee5 thu\u1ed9c c\u1ee9ng v\u00e0o th\u1ebb HTML c\u1ee5 th\u1ec3. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng v\u1edbi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;span&gt;: ph\u1ed5 bi\u1ebfn nh\u1ea5t, c\u00f3 \u0111\u1ecbnh d\u1ea1ng inline, g\u1ecdn g\u00e0ng<\/li>\n\n\n\n<li>&lt;a&gt;: khi mu\u1ed1n t\u1ea1o badge c\u00f3 th\u1ec3 click \u0111\u01b0\u1ee3c<\/li>\n\n\n\n<li>&lt;button&gt;: hi\u1ec3n th\u1ecb s\u1ed1 \u0111\u1ebfm, tr\u1ea1ng th\u00e1i ngay tr\u00ean n\u00fat<\/li>\n<\/ul>\n\n\n\n<p>L\u01b0u \u00fd: D\u00f9 b\u1ea1n d\u00f9ng th\u1ebb n\u00e0o, v\u1eabn ph\u1ea3i c\u00f3 class <strong>.badge<\/strong> th\u00ec m\u1edbi ra t\u1ea1o \u0111\u01b0\u1ee3c badge trong Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mu\u1ed1n-badge-la-m\u1ed9t-link-co-th\u1ec3-click-d\u01b0\u1ee3c-thi-lam-th\u1ebf-nao\"><strong>Mu\u1ed1n badge l\u00e0 m\u1ed9t link c\u00f3 th\u1ec3 click \u0111\u01b0\u1ee3c th\u00ec l\u00e0m th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o badge c\u00f3 th\u1ec3 click \u0111\u01b0\u1ee3c, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m theo hai c\u00e1ch ch\u00ednh:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-kh\u1edfi-t\u1ea1o-badge-tren-th\u1ebb-lt-a\">Kh\u1edfi t\u1ea1o badge tr\u00ean th\u1ebb &lt;a><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;a <em>href<\/em>=\"#\" <em>class<\/em>=\"badge text-bg-info\"&gt;Click me&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"232\" height=\"102\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-24.png\" alt=\"\" class=\"wp-image-91227\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-24.png 232w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-24-200x88.png 200w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-d\u1eb7t-ph\u1ea7n-t\u1eed-badge-trong-ph\u1ea7n-t\u1eed-lt-a\">\u0110\u1eb7t ph\u1ea7n t\u1eed badge trong ph\u1ea7n t\u1eed &lt;a><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;a href=\"\/cart\" class=\"btn btn-primary position-relative\"&gt;\n     Gi\u1ecf h\u00e0ng\n     &lt;span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-warning text-dark\"&gt;\n       3\n       &lt;span class=\"visually-hidden\"&gt;s\u1ea3n ph\u1ea9m trong gi\u1ecf&lt;\/span&gt;\n     &lt;\/span&gt;\n   &lt;\/a&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"142\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-26.png\" alt=\"\" class=\"wp-image-91230\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-26.png 326w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-26-300x131.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-26-200x87.png 200w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-badge-khong-hi\u1ec7n-dung-mau-trong-bootstrap-5\"><strong>T\u1ea1i sao badge kh\u00f4ng hi\u1ec7n \u0111\u00fang m\u00e0u trong Bootstrap 5?<\/strong><\/h3>\n\n\n\n<p>Khi badge c\u1ee7a b\u1ea1n kh\u00f4ng hi\u1ec3n th\u1ecb \u0111\u00fang m\u00e0u nh\u01b0 \u00fd mu\u1ed1n, c\u00f3 th\u1ec3 do m\u1ed9t nguy\u00ean nh\u00e2n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00f9ng nh\u1ea7m class c\u1ee7a Bootstrap 4:<\/strong> \u1ede Bootstrap 4, c\u00fa ph\u00e1p c\u1ea5u h\u00ecnh m\u00e0u cho badge c\u00f3 d\u1ea1ng <strong>.badge-primary, .badge-danger,&#8230; <\/strong>Tuy nhi\u00ean \u1edf Bootstrap 5, \u0111\u00e3 c\u00f3 s\u1ef1 thay \u0111\u1ed5i v\u1ec1 c\u00fa ph\u00e1p, c\u1ee5 th\u1ec3 l\u00e0<strong> .bg-primary, .bg-danger ho\u1eb7c .text-bg-primary, .text-bg-danger,&#8230;<\/strong><\/li>\n\n\n\n<li><strong>Thi\u1ebfu class .badge:<\/strong> Ch\u1ec9 d\u00f9ng .bg-* m\u00e0 qu\u00ean .badge th\u00ec ph\u1ea7n t\u1eed s\u1ebd \u0111\u1ed5i m\u00e0u n\u1ec1n nh\u01b0ng kh\u00f4ng mang ki\u1ec3u d\u00e1ng badge (padding, bo g\u00f3c\u2026)<\/li>\n\n\n\n<li><strong>Xung \u0111\u1ed9t CSS t\u00f9y ch\u1ec9nh:<\/strong> Ki\u1ec3m tra l\u1ea1i c\u00e1c CSS t\u00f9y ch\u1ec9nh trong m\u00e3 ngu\u1ed3n c\u1ee7a b\u1ea1n \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh xem c\u00f3 CSS n\u00e0o \u0111ang ghi \u0111\u00e8 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a badge hay kh\u00f4ng.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Badge Bootstrap l\u00e0 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng h\u1eefu \u00edch, gi\u00fap b\u1ea1n hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i ho\u1eb7c nh\u00e3n ph\u1ee5 m\u1ed9t c\u00e1ch tr\u1ef1c quan m\u00e0 kh\u00f4ng t\u1ed1n nhi\u1ec1u c\u00f4ng s\u1ee9c. V\u1edbi c\u00e1c class c\u00f3 s\u1eb5n nh\u01b0 .badge, .bg-*, .rounded-pill, Bootstrap gi\u00fap b\u1ea1n b\u1ea1n d\u1ec5 d\u00e0ng t\u1ea1o badge \u0111\u1eb9p m\u1eaft, \u0111\u1ed3ng b\u1ed9 v\u00e0 responsive. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng \u0111\u00e3 gi\u00fap b\u1ea1n n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch s\u1eed d\u1ee5ng badge trong nhi\u1ec1u ng\u1eef c\u1ea3nh (heading, button, icon, card\u2026) v\u00e0 c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng v\u00e0o d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n \u0111\u1ec3 t\u0103ng t\u00ednh tr\u1ef1c quan v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, badge l\u00e0 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng v\u00f4 c\u00f9ng h\u1eefu \u00edch: t\u1eeb hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o, tr\u1ea1ng th\u00e1i ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ebfn vi\u1ec7c g\u1eafn nh\u00e3n ph\u1ee5 cho button hay heading. Nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng class c\u00f3 s\u1eb5n, Bootstrap gi\u00fap b\u1ea1n t\u1ea1o badge nhanh ch\u00f3ng, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":91989,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-91212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Badge trong Bootstrap hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i v\u00e0 nh\u00e3n ph\u1ee5. H\u01b0\u1edbng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 t\u1eeb kh\u1edfi t\u1ea1o \u0111\u1ebfn t\u00f9y ch\u1ec9nh k\u00e8m v\u00ed d\u1ee5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf\" \/>\n<meta property=\"og:description\" content=\"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, badge l\u00e0 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng v\u00f4 c\u00f9ng h\u1eefu \u00edch: t\u1eeb hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o, tr\u1ea1ng th\u00e1i ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ebfn vi\u1ec7c g\u1eafn nh\u00e3n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-04T17:04:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-04T17:04:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Badge trong Bootstrap hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i v\u00e0 nh\u00e3n ph\u1ee5. H\u01b0\u1edbng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 t\u1eeb kh\u1edfi t\u1ea1o \u0111\u1ebfn t\u00f9y ch\u1ec9nh k\u00e8m v\u00ed d\u1ee5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf","og_description":"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, badge l\u00e0 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng v\u00f4 c\u00f9ng h\u1eefu \u00edch: t\u1eeb hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng th\u00f4ng b\u00e1o, tr\u1ea1ng th\u00e1i ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ebfn vi\u1ec7c g\u1eafn nh\u00e3n","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-10-04T17:04:11+00:00","article_modified_time":"2025-10-04T17:04:14+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf","datePublished":"2025-10-04T17:04:11+00:00","dateModified":"2025-10-04T17:04:14+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/"},"wordCount":3661,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/","name":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png","datePublished":"2025-10-04T17:04:11+00:00","dateModified":"2025-10-04T17:04:14+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Badge trong Bootstrap hi\u1ec3n th\u1ecb s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i v\u00e0 nh\u00e3n ph\u1ee5. H\u01b0\u1edbng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 t\u1eeb kh\u1edfi t\u1ea1o \u0111\u1ebfn t\u00f9y ch\u1ec9nh k\u00e8m v\u00ed d\u1ee5.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/badge-bootstrap-scaled.png","width":800,"height":421,"caption":"badge bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=91212"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91212\/revisions"}],"predecessor-version":[{"id":91990,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91212\/revisions\/91990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/91989"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=91212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=91212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=91212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}