{"id":91238,"date":"2025-10-05T17:15:18","date_gmt":"2025-10-05T10:15:18","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=91238"},"modified":"2025-10-05T17:15:21","modified_gmt":"2025-10-05T10:15:21","slug":"huong-dan-su-dung-bootstrap-card","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/","title":{"rendered":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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-bootstrap-card\/#Bootstrap_Card_la_gi\" >Bootstrap Card 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-bootstrap-card\/#Cac_thanh_phan_co_ban_co_trong_Card\" >C\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n c\u00f3 trong Card<\/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-bootstrap-card\/#Phan_chia_noi_dung_trong_Card_Body\" >Ph\u00e2n chia n\u1ed9i dung trong Card Body<\/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-bootstrap-card\/#Cac_cach_dinh_dang_cho_Card\" >C\u00e1c c\u00e1ch \u0111\u1ecbnh d\u1ea1ng cho Card<\/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-bootstrap-card\/#Bang_tong_hop_cac_class_de_dinh_dang_Bootstrap_Card\" >B\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c class \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng Bootstrap Card<\/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-bootstrap-card\/#Cac_truong_hop_su_dung_Bootstrap_Card\" >C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Bootstrap Card<\/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-bootstrap-card\/#Nhung_luu_y_khi_su_dung_Bootstrap_Card\" >Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Bootstrap Card<\/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-bootstrap-card\/#Cac_cau_hoi_thuong_gap_ve_Bootstrap_card\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap card<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#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, Card l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung g\u1ecdn g\u00e0ng v\u00e0 tr\u1ef1c quan. T\u1eeb s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft cho \u0111\u1ebfn dashboard, card lu\u00f4n gi\u00fap b\u1ed1 c\u1ee5c r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 \u0111\u1ecdc. Bootstrap cung c\u1ea5p component Card v\u1edbi \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng: header, footer, list group, h\u00ecnh \u1ea3nh, m\u00e0u s\u1eafc v\u00e0 responsive.<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Card trong Bootstrap l\u00e0 g\u00ec v\u00e0 v\u00ec sao n\u00ean d\u00f9ng<\/li>\n\n\n\n<li>C\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n t\u1ea1o n\u00ean m\u1ed9t Card<\/li>\n\n\n\n<li>C\u00e1ch \u0111\u1ecbnh d\u1ea1ng, s\u1eafp x\u1ebfp v\u00e0 t\u00f9y ch\u1ec9nh card<\/li>\n\n\n\n<li>Nh\u1eefng tr\u01b0\u1eddng h\u1ee3p \u1ee9ng d\u1ee5ng trong th\u1ef1c t\u1ebf<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bootstrap-card-la-gi\"><span class=\"ez-toc-section\" id=\"Bootstrap_Card_la_gi\"><\/span><strong>Bootstrap Card 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-card-trong-thi\u1ebft-k\u1ebf-web\"><strong>Vai tr\u00f2 c\u1ee7a Card trong thi\u1ebft k\u1ebf web<\/strong><\/h3>\n\n\n\n<p>Card (hay c\u00f2n g\u1ecdi l\u00e0 \u201cth\u1ebb n\u1ed9i dung\u201d) l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quen thu\u1ed9c trong giao di\u1ec7n web, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo d\u1ea1ng h\u1ed9p ch\u1eef nh\u1eadt c\u00f3 th\u1ec3 ch\u1ee9a nhi\u1ec1u lo\u1ea1i n\u1ed9i dung kh\u00e1c nhau: ti\u00eau \u0111\u1ec1, v\u0103n b\u1ea3n, h\u00ecnh \u1ea3nh, danh s\u00e1ch, li\u00ean k\u1ebft, n\u00fat b\u1ea5m\u2026.<\/p>\n\n\n\n<p>Card th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3n th\u1ecb s\u1ea3n ph\u1ea9m trong website th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed<\/li>\n\n\n\n<li>Tr\u00ecnh b\u00e0y b\u00e0i vi\u1ebft d\u1ea1ng \u201cpreview\u201d v\u1edbi \u1ea3nh thumbnail + m\u00f4 t\u1ea3 ng\u1eafn<\/li>\n\n\n\n<li>T\u1ed5 ch\u1ee9c th\u00f4ng tin ng\u01b0\u1eddi d\u00f9ng (profile, contact, status)<\/li>\n\n\n\n<li>L\u00e0m kh\u1ed1i th\u1ed1ng k\u00ea s\u1ed1 li\u1ec7u trong dashboard<\/li>\n<\/ul>\n\n\n\n<p>\u0110i\u1ec3m m\u1ea1nh c\u1ee7a Card l\u00e0 t\u00ednh module. M\u1ed7i card l\u00e0 m\u1ed9t kh\u1ed1i n\u1ed9i dung \u0111\u1ed9c l\u1eadp, d\u1ec5 d\u00e0ng s\u1eafp x\u1ebfp trong layout v\u00e0 \u0111\u1ea3m b\u1ea3o b\u1ed1 c\u1ee5c tr\u1ef1c quan, g\u1ecdn g\u00e0ng.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"316\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27.png\" alt=\"\" class=\"wp-image-91240\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27-300x118.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27-640x253.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27-200x79.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-27-768x303.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>V\u00ed d\u1ee5 v\u1ec1 Card trong thi\u1ebft k\u1ebf web<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-dung-bootstrap-card\"><strong>T\u1ea1i sao n\u00ean d\u00f9ng Bootstrap Card?<\/strong><\/h3>\n\n\n\n<p>Trong giao di\u1ec7n web, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t card b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p th\u1ebb &lt;div&gt; v\u1edbi CSS th\u1ee7 c\u00f4ng: th\u00eam border, padding, margin, box-shadow\u2026 Tuy nhi\u00ean, c\u00e1ch n\u00e0y t\u1ed1n nhi\u1ec1u th\u1eddi gian v\u00e0 c\u00f3 th\u1ec3 g\u00e2y m\u1ea5t \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n n\u1ebfu m\u1ed7i l\u1eadp tr\u00ecnh vi\u00ean vi\u1ebft CSS kh\u00e1c nhau.<\/p>\n\n\n\n<p>Bootstrap gi\u1ea3i quy\u1ebft \u0111i\u1ec1u n\u00e0y b\u1eb1ng component Card: ch\u1ec9 v\u1edbi v\u00e0i class s\u1eb5n c\u00f3, b\u1ea1n \u0111\u00e3 c\u00f3 ngay m\u1ed9t card \u0111\u1eb9p m\u1eaft, th\u1ed1ng nh\u1ea5t v\u1edbi to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf. \u0110\u1ec3 th\u1ea5y r\u00f5 s\u1ef1 kh\u00e1c bi\u1ec7t, h\u00e3y c\u00f9ng so s\u00e1nh c\u00e1ch t\u1ea1o ra m\u1ed9t card hi\u1ec3n th\u1ecb \u1ea3nh + ti\u00eau \u0111\u1ec1 + m\u00f4 t\u1ea3 + n\u00fat b\u1eb1ng hai ph\u01b0\u01a1ng ph\u00e1p:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>T\u1ef1 vi\u1ebft th\u1ee7 c\u00f4ng<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"custom-card\"&gt;\n     &lt;img src=\"https:\/\/picsum.photos\/300\/200\" alt=\"\u1ea2nh s\u1ea3n ph\u1ea9m\"&gt;\n     &lt;div class=\"custom-card-body\"&gt;\n       &lt;h3&gt;S\u1ea3n ph\u1ea9m A&lt;\/h3&gt;\n       &lt;p&gt;\u0110\u00e2y l\u00e0 m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn v\u1ec1 s\u1ea3n ph\u1ea9m.&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn\"&gt;Mua ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n  \n   &lt;style&gt;\n     .custom-card {\n       width: 18rem;\n       border: 1px solid #ddd;\n       border-radius: 0.5rem;\n       overflow: hidden;\n       box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n     }\n     .custom-card img {\n       width: 100%;\n       display: block;\n     }\n     .custom-card-body {\n       padding: 1rem;\n     }\n     .custom-card-body h3 {\n       margin-bottom: .5rem;\n       font-size: 1.25rem;\n     }\n     .custom-card-body p {\n       margin-bottom: .75rem;\n       color: #555;\n     }\n     .custom-card-body .btn {\n       display: inline-block;\n       padding: .375rem .75rem;\n       background-color: #0d6efd;\n       color: #fff;\n       border-radius: .25rem;\n       text-decoration: none;\n     }\n   &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>S\u1eed d\u1ee5ng Bootstrap<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n     &lt;img src=\"https:\/\/picsum.photos\/300\/200\" class=\"card-img-top\" alt=\"\u1ea2nh s\u1ea3n ph\u1ea9m\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;S\u1ea3n ph\u1ea9m A&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;\u0110\u00e2y l\u00e0 m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn v\u1ec1 s\u1ea3n ph\u1ea9m.&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Mua ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 c\u1ea3 hai c\u00e1ch \u0111\u1ec1u t\u1ea1o \u0111\u01b0\u1ee3c card c\u00f3 \u1ea3nh, ti\u00eau \u0111\u1ec1, m\u00f4 t\u1ea3 v\u00e0 n\u00fat b\u1ea5m nh\u01b0 nhau:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"329\" height=\"385\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-28.png\" alt=\"\" class=\"wp-image-91242\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-28.png 329w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-28-256x300.png 256w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-28-171x200.png 171w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/figure>\n\n\n\n<p>Nh\u01b0ng khi d\u00f9ng Bootstrap Card, b\u1ea1n ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c r\u1ea5t nhi\u1ec1u th\u1eddi gian v\u00ec:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng (ch\u1ec9 c\u1ea7n class .card, .card-body, .card-title\u2026)<\/li>\n\n\n\n<li>\u0110\u1ed3ng b\u1ed9 giao di\u1ec7n: card t\u1ef1 \u0111\u1ed9ng k\u1ebf th\u1eeba style chung t\u1eeb Bootstrap (font, m\u00e0u, spacing).<\/li>\n\n\n\n<li>D\u1ec5 m\u1edf r\u1ed9ng: th\u00eam header, footer, list group, nav\u2026 ch\u1ec9 b\u1eb1ng v\u00e0i class b\u1ed5 sung.<\/li>\n\n\n\n<li>Responsive m\u1eb7c \u0111\u1ecbnh: card co gi\u00e3n theo grid system, kh\u00f4ng c\u1ea7n vi\u1ebft media query.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thanh-ph\u1ea7n-c\u01a1-b\u1ea3n-co-trong-card\"><span class=\"ez-toc-section\" id=\"Cac_thanh_phan_co_ban_co_trong_Card\"><\/span><strong>C\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n c\u00f3 trong Card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap Card \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo c\u1ea5u tr\u00fac linh ho\u1ea1t bao g\u1ed3m: ph\u1ea7n body (ch\u1ee9a n\u1ed9i dung ch\u00ednh), header\/footer (th\u00eam ng\u1eef c\u1ea3nh), h\u00ecnh \u1ea3nh v\u00e0 list group. N\u1eafm r\u00f5 t\u1eebng th\u00e0nh ph\u1ea7n s\u1ebd gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng k\u1ebft h\u1ee3p \u0111\u1ec3 t\u1ea1o card ho\u00e0n ch\u1ec9nh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-n\u1ec1n-t\u1ea3ng-c\u1ee7a-card\"><strong>C\u1ea5u tr\u00fac n\u1ec1n t\u1ea3ng c\u1ee7a Card<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t card c\u01a1 b\u1ea3n trong Bootstrap g\u1ed3m 2 ph\u1ea7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u1ebb &lt;div&gt; c\u00f3 class <strong>.card<\/strong> ngo\u00e0i c\u00f9ng \u0111\u00f3ng vai tr\u00f2 l\u00e0 khung ch\u1ee9a<\/li>\n\n\n\n<li>Ph\u1ea7n n\u1ed9i dung \u0111\u01b0\u1ee3c \u0111\u1eb7t trong th\u1ebb &lt;div&gt; v\u1edbi class <strong>.card-body<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 m\u1ed9t Card v\u1edbi n\u1ed9i dung \u0111\u01a1n gi\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Ti\u00eau \u0111\u1ec1 Card&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;\u0110\u00e2y l\u00e0 \u0111o\u1ea1n m\u00f4 t\u1ea3 ng\u1eafn trong card.&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"317\" height=\"191\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-29.png\" alt=\"\" class=\"wp-image-91243\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-29.png 317w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-29-300x181.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-29-200x121.png 200w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-phan-chia-n\u1ed9i-dung-trong-card-body\"><span class=\"ez-toc-section\" id=\"Phan_chia_noi_dung_trong_Card_Body\"><\/span><strong>Ph\u00e2n chia n\u1ed9i dung trong Card Body<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Card body l\u00e0 khu v\u1ef1c n\u1ed9i dung ch\u00ednh c\u1ee7a card. B\u1ea1n \u0111\u1eb7t ti\u00eau \u0111\u1ec1, ph\u1ee5 \u0111\u1ec1, \u0111o\u1ea1n v\u0103n, li\u00ean k\u1ebft, n\u00fat\u2026 v\u00e0o trong <strong>.card-body <\/strong>\u0111\u1ec3 c\u00f3 padding chu\u1ea9n v\u00e0 kho\u1ea3ng c\u00e1ch h\u1ee3p l\u00fd. C\u00e1c kh\u1ed1i n\u1ed9i dung ph\u1ed5 bi\u1ebfn trong <strong>.card-body <\/strong>bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ti\u00eau \u0111\u1ec1: d\u00f9ng <strong>.card-title<\/strong> tr\u00ean th\u1ebb h* (h5, h6\u2026)<\/li>\n\n\n\n<li>Ph\u1ee5 \u0111\u1ec1: d\u00f9ng <strong>.card-subtitle<\/strong> (n\u00ean \u0111\u1eb7t ngay sau title)<\/li>\n\n\n\n<li>\u0110o\u1ea1n v\u0103n: d\u00f9ng <strong>.card-text<\/strong> cho ph\u1ea7n m\u00f4 t\u1ea3<\/li>\n\n\n\n<li>Li\u00ean k\u1ebft: d\u00f9ng <strong>.card-link<\/strong> \u0111\u1ec3 2\u20133 link n\u1eb1m c\u1ea1nh nhau c\u00f3 kho\u1ea3ng c\u00e1ch h\u1ee3p l\u00fd<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Ti\u00eau \u0111\u1ec1 ch\u00ednh&lt;\/h5&gt;\n       &lt;h6 class=\"card-subtitle mb-2 text-body-secondary\"&gt;Ti\u00eau \u0111\u1ec1 ph\u1ee5&lt;\/h6&gt;\n       &lt;p class=\"card-text\"&gt;\n         M\u1ed9t \u0111o\u1ea1n m\u00f4 t\u1ea3 ng\u1eafn \u0111\u1ec3 d\u1eabn d\u1eaft n\u1ed9i dung ch\u00ednh c\u1ee7a card.\n       &lt;\/p&gt;\n       &lt;a href=\"#\" class=\"card-link\"&gt;Li\u00ean k\u1ebft 1&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"card-link\"&gt;Li\u00ean k\u1ebft 2&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.card-subtitle<\/strong> hi\u1ec3n th\u1ecb m\u1ea3nh h\u01a1n <strong>.card-title<\/strong> \u0111\u1ec3 kh\u00f4ng l\u1ea5n \u00e1t ti\u00eau \u0111\u1ec1<\/li>\n\n\n\n<li><strong>.card-link<\/strong> t\u1ef1 th\u00eam kho\u1ea3ng c\u00e1ch ngang gi\u1eefa c\u00e1c link, kh\u00f4ng c\u1ea7n th\u00eam margin th\u1ee7 c\u00f4ng<\/li>\n\n\n\n<li>D\u00f9ng ti\u1ec7n \u00edch kho\u1ea3ng c\u00e1ch nh\u01b0 <strong>mb-2<\/strong>,<strong> mb-3<\/strong> \u0111\u1ec3 ch\u1ec9nh spacing theo \u00fd<\/li>\n<\/ul>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"198\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-30.png\" alt=\"\" class=\"wp-image-91244\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-30.png 308w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-30-300x193.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-30-200x129.png 200w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-header-va-footer\"><strong>Header v\u00e0 Footer<\/strong><\/h3>\n\n\n\n<p>Kh\u00f4ng ph\u1ea3i n\u1ed9i dung n\u00e0o c\u0169ng n\u00ean d\u1ed3n h\u1ebft v\u00e0o body. Nhi\u1ec1u l\u00fac b\u1ea1n c\u1ea7n m\u1ed9t \u201cnh\u00e3n\u201d \u0111\u1ec3 m\u1edf \u0111\u1ec1 (Featured, Pricing, News\u2026) v\u00e0 m\u1ed9t ch\u1ed7 nh\u1ecf cho th\u00f4ng tin b\u1ed5 sung (th\u1eddi gian c\u1eadp nh\u1eadt, tr\u1ea1ng th\u00e1i). \u0110\u00f3 l\u00e0 l\u00fac header v\u00e0 footer ph\u00e1t huy t\u00e1c d\u1ee5ng: gi\u00fap card c\u00f3 c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng, ng\u01b0\u1eddi \u0111\u1ecdc l\u01b0\u1edbt m\u1eaft l\u00e0 hi\u1ec3u ngay.<\/p>\n\n\n\n<p>C\u1ea5u tr\u00fac c\u1ee7a header v\u00e0 footer trong Card nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\"&gt;\n     &lt;div class=\"card-header\"&gt;...&lt;\/div&gt;\n     &lt;div class=\"card-body\"&gt;...&lt;\/div&gt;\n     &lt;div class=\"card-footer\"&gt;...&lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>L\u01b0u \u00fd, \u0111\u1ec3 c\u1ea3i thi\u1ec7n semantics\/SEO cho trang web, ph\u1ea7n header b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c th\u1ebb heading thay cho th\u1ebb &lt;div&gt;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;!-- Header l\u00e0 heading (t\u1ed1t cho semantics\/SEO) --&gt;\n   &lt;div class=\"card\"&gt;\n     &lt;h5 class=\"card-header\"&gt;...&lt;\/h5&gt;\n     &lt;div class=\"card-body\"&gt;...&lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"max-width: 28rem;\"&gt;\n     &lt;div class=\"card-header\"&gt;Th\u00f4ng b\u00e1o b\u1ea3o tr\u00ec&lt;\/div&gt;\n  \n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;B\u1ea3o tr\u00ec \u0111\u1ecbnh k\u1ef3 23:00\u201323:30&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;\n         Trong th\u1eddi gian tr\u00ean, m\u1ed9t s\u1ed1 t\u00ednh n\u0103ng c\u00f3 th\u1ec3 gi\u00e1n \u0111o\u1ea1n. R\u1ea5t mong b\u1ea1n th\u00f4ng c\u1ea3m.\n       &lt;\/p&gt;\n       &lt;a href=\"\/status\" class=\"btn btn-primary\"&gt;Xem tr\u1ea1ng th\u00e1i h\u1ec7 th\u1ed1ng&lt;\/a&gt;\n     &lt;\/div&gt;\n  \n     &lt;div class=\"card-footer text-body-secondary\"&gt;\n       C\u1eadp nh\u1eadt: 20:15, 26\/08\/2025\n     &lt;\/div&gt;\n   &lt;\/div&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=\"488\" height=\"289\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-31.png\" alt=\"\" class=\"wp-image-91246\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-31.png 488w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-31-300x178.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-31-200x118.png 200w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, Header\/Footer c\u00f3 n\u1ec1n v\u00e0 vi\u1ec1n ri\u00eang (theo theme c\u1ee7a card), padding \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u \u0111\u1ec3 \u0111\u00f3ng vai tr\u00f2 \u201cm\u1edf\/\u0111\u00f3ng\u201d kh\u1ed1i.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hinh-\u1ea3nh-trong-card\"><strong>H\u00ecnh \u1ea3nh trong Card<\/strong><\/h3>\n\n\n\n<p>\u1ea2nh gi\u00fap card \u201cb\u1eaft m\u1eaft\u201d v\u00e0 truy\u1ec1n t\u1ea3i th\u00f4ng tin nhanh h\u01a1n ch\u1eef. V\u1edbi Bootstrap, b\u1ea1n th\u00eam \u1ea3nh v\u00e0o card nhanh ch\u00f3ng b\u1eb1ng class<strong> .card-img<\/strong>. Card c\u00f3 h\u00ecnh \u1ea3nh th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong tr\u01b0\u1eddng h\u1ee3p ph\u1ed5 bi\u1ebfn nh\u01b0 Card s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft n\u1ed5i b\u1eadt, banner s\u1ef1 ki\u1ec7n, case study\/d\u1ef1 \u00e1n.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 th\u00eam h\u00ecnh \u1ea3nh trong Card:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 21rem;\"&gt;\n     &lt;img src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0105\/4542\/products\/tma-2.5_grande.jpg?v=1391540543\" class=\"card-img\" alt=\"\u1ea2nh Tai nghe X100\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Tai nghe X100&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;\u00c2m tr\u1ea7m m\u1ea1nh, pin 30 gi\u1edd, s\u1ea1c nhanh 15\u2019 d\u00f9ng 3 gi\u1edd.&lt;\/p&gt;\n       &lt;a href=\"\/san-pham\/tai-nghe-x100\" class=\"btn btn-primary\"&gt;Mua ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"525\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-32.png\" alt=\"\" class=\"wp-image-91248\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-32.png 367w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-32-210x300.png 210w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-32-140x200.png 140w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-danh-sach-n\u1ed9i-dung-list-group\"><strong>Danh s\u00e1ch n\u1ed9i dung (List Group)<\/strong><\/h3>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n li\u1ec7t k\u00ea nhi\u1ec1u m\u1ee5c (thu\u1ed9c t\u00ednh, quy\u1ec1n l\u1ee3i, danh m\u1ee5c\u2026) trong c\u00f9ng m\u1ed9t card. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u00e0nh ph\u1ea7n List Group c\u1ee7a Card Bootstrap. C\u00fa ph\u00e1p chu\u1ea9n bao g\u1ed3m:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\"&gt;\n     &lt;div class=\"card-header\"&gt;...&lt;\/div&gt;\n     &lt;ul class=\"list-group\"&gt;\n       &lt;li class=\"list-group-item\"&gt;...&lt;\/li&gt;\n       &lt;li class=\"list-group-item\"&gt;...&lt;\/li&gt;\n     &lt;\/ul&gt;\n     &lt;div class=\"card-footer\"&gt;...&lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.list-group<\/strong> l\u00e0 container ch\u1ee9a c\u00e1c ph\u1ea7n t\u1eed trong danh s\u00e1ch<\/li>\n\n\n\n<li><strong>.list-group-item <\/strong>l\u00e0 c\u00e1c ph\u1ea7n t\u1eed trong danh s\u00e1ch<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 20rem;\"&gt;\n     &lt;div class=\"card-header\"&gt;Th\u00f4ng tin g\u00f3i Pro&lt;\/div&gt;\n     &lt;ul class=\"list-group\"&gt;\n       &lt;li class=\"list-group-item\"&gt;Kh\u00f4ng gi\u1edbi h\u1ea1n d\u1ef1 \u00e1n&lt;\/li&gt;\n       &lt;li class=\"list-group-item\"&gt;H\u1ed7 tr\u1ee3 24\/7&lt;\/li&gt;\n       &lt;li class=\"list-group-item\"&gt;C\u1eadp nh\u1eadt mi\u1ec5n ph\u00ed&lt;\/li&gt;\n     &lt;\/ul&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"354\" height=\"191\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-33.png\" alt=\"\" class=\"wp-image-91249\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-33.png 354w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-33-300x162.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-33-200x108.png 200w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <strong>.list-group-flush<\/strong> \u0111\u1ec3 lo\u1ea1i b\u1ecf vi\u1ec1n\/\u0111\u1ec7m th\u1eeba, gi\u00fap Card tr\u00f4ng d\u1ec5 nh\u00ecn h\u01a1n. N\u1ebfu ph\u1ea7n t\u1eed l\u00e0 link, th\u00eam <strong>.list-group-item-action<\/strong> \u0111\u1ec3 c\u00f3 hover\/click \u0111\u1ed3ng nh\u1ea5t.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 20rem;\"&gt;\n     &lt;div class=\"card-header\"&gt;Th\u00f4ng tin g\u00f3i Pro&lt;\/div&gt;\n     &lt;ul class=\"list-group list-group-flush\"&gt;\n       &lt;li class=\"list-group-item list-group-item-action\"&gt;Kh\u00f4ng gi\u1edbi h\u1ea1n d\u1ef1 \u00e1n&lt;\/li&gt;\n       &lt;li class=\"list-group-item list-group-item-action\"&gt;H\u1ed7 tr\u1ee3 24\/7&lt;\/li&gt;\n       &lt;li class=\"list-group-item list-group-item-action\"&gt;C\u1eadp nh\u1eadt mi\u1ec5n ph\u00ed&lt;\/li&gt;\n     &lt;\/ul&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"185\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-34.png\" alt=\"\" class=\"wp-image-91250\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-34.png 349w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-34-300x159.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-34-200x106.png 200w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-k\u1ebft-h\u1ee3p-t\u1ea5t-c\u1ea3-thanh-ph\u1ea7n-kitchen-sink\"><strong>K\u1ebft h\u1ee3p t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n (Kitchen Sink)<\/strong><\/h3>\n\n\n\n<p>Trong d\u1ef1 \u00e1n th\u1ef1c t\u1ebf, m\u1ed9t card hi\u1ebfm khi ch\u1ec9 c\u00f3 m\u1ed7i ti\u00eau \u0111\u1ec1 v\u00e0 v\u00e0i d\u00f2ng m\u00f4 t\u1ea3. Th\u01b0\u1eddng b\u1ea1n c\u1ea7n \u1ea3nh thumbnail \u0111\u1ec3 nh\u1eadn di\u1ec7n, n\u1ed9i dung t\u00f3m t\u1eaft + n\u00fat h\u00e0nh \u0111\u1ed9ng ch\u00ednh (CTA), th\u00eam chi ti\u1ebft d\u1ea1ng g\u1ea1ch \u0111\u1ea7u d\u00f2ng cho ng\u01b0\u1eddi \u0111\u1ecdc l\u01b0\u1edbt nhanh, v\u00e0i \u0111\u01b0\u1eddng link ph\u1ee5 \u0111\u1ec3 \u201c\u0111i s\u00e2u\u201d v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 metadata (th\u1eddi gian c\u1eadp nh\u1eadt, tr\u1ea1ng th\u00e1i\u2026).<\/p>\n\n\n\n<p>\u201cKitchen Sink\u201d l\u00e0 v\u00ed d\u1ee5 t\u1ed5ng h\u1ee3p \u0111\u1ec3 cho th\u1ea5y c\u00e1ch x\u1ebfp c\u00e1c m\u1ea3nh gh\u00e9p theo \u0111\u00fang th\u1ee9 t\u1ef1 \u01b0u ti\u00ean \u0111\u1ec3 card v\u1eeba \u0111\u1ea7y \u0111\u1ee7 v\u1eeba d\u1ec5 \u0111\u1ecdc. V\u00ed d\u1ee5 x\u00e2y d\u1ef1ng 1 card v\u1ec1 th\u00f4ng tin kh\u00f3a h\u1ecdc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"max-width: 24rem;\"&gt;\n     &lt;!-- \u1ea2nh --&gt;\n     &lt;img src=\"https:\/\/picsum.photos\/640\/360\" class=\"card-img-top\" alt=\"\u1ea2nh banner kh\u00f3a h\u1ecdc ReactJS\"&gt;\n  \n     &lt;!-- N\u1ed9i dung ch\u00ednh + CTA --&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Kh\u00f3a h\u1ecdc ReactJS t\u1eeb A\u2013Z&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;6 tu\u1ea7n: t\u1eeb component c\u01a1 b\u1ea3n \u0111\u1ebfn hooks, routing &amp; t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng.&lt;\/p&gt;\n       &lt;a href=\"\/khoa-hoc\/reactjs\" class=\"btn btn-primary\"&gt;\u0110\u0103ng k\u00fd ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n  \n     &lt;!-- Chi ti\u1ebft l\u01b0\u1edbt nhanh --&gt;\n     &lt;ul class=\"list-group list-group-flush\"&gt;\n       &lt;li class=\"list-group-item\"&gt;L\u1ecbch: T\u1ed1i 2\u20134\u20136 (19:00\u201321:00)&lt;\/li&gt;\n       &lt;li class=\"list-group-item\"&gt;H\u00ecnh th\u1ee9c: H\u1ecdc online qua Zoom&lt;\/li&gt;\n       &lt;li class=\"list-group-item\"&gt;T\u1eb7ng: Slide + m\u00e3 ngu\u1ed3n m\u1eabu&lt;\/li&gt;\n     &lt;\/ul&gt;\n  \n     &lt;!-- Link ph\u1ee5 --&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;a href=\"\/khoa-hoc\/reactjs\/chuong-trinh\" class=\"card-link\"&gt;Xem ch\u01b0\u01a1ng tr\u00ecnh h\u1ecdc&lt;\/a&gt;\n       &lt;a href=\"\/khoa-hoc\/reactjs\/faq\" class=\"card-link\"&gt;C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p&lt;\/a&gt;\n     &lt;\/div&gt;\n  \n     &lt;!-- Metadata --&gt;\n     &lt;div class=\"card-footer text-body-secondary\"&gt;\n       C\u1eadp nh\u1eadt: 25\/08\/2025 \u2022 C\u00f2n 12 ch\u1ed7\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"630\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-35.png\" alt=\"\" class=\"wp-image-91251\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-35.png 419w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-35-200x300.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-35-133x200.png 133w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cach-d\u1ecbnh-d\u1ea1ng-cho-card\"><span class=\"ez-toc-section\" id=\"Cac_cach_dinh_dang_cho_Card\"><\/span><strong>C\u00e1c c\u00e1ch \u0111\u1ecbnh d\u1ea1ng cho Card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc-card\"><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc Card<\/strong><\/h3>\n\n\n\n<p>Card trong Bootstrap kh\u00f4ng c\u00f3 class ri\u00eang \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gi\u1edbi h\u1ea1n chi\u1ec1u r\u1ed9ng b\u1eb1ng inline style (<strong>style=\u201cwidth: 18rem;\u201d<\/strong>) ho\u1eb7c class ti\u1ec7n \u00edch (<strong>w-50, w-75, w-100<\/strong>).<\/li>\n\n\n\n<li>Chi\u1ec1u cao t\u1ef1 \u0111\u1ed9ng co gi\u00e3n theo n\u1ed9i dung. N\u1ebfu mu\u1ed1n c\u1ed1 \u0111\u1ecbnh chi\u1ec1u cao, h\u00e3y d\u00f9ng <strong>h-100, min-vh-50<\/strong>\u2026<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card w-50\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card 50% chi\u1ec1u r\u1ed9ng&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;Th\u1ebb n\u00e0y chi\u1ebfm n\u1eeda chi\u1ec1u ngang c\u1ee7a container.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n\n\n   &lt;div class=\"card\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card 100% chi\u1ec1u r\u1ed9ng&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;Th\u1ebb n\u00e0y chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u ngang c\u1ee7a container.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&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=\"510\" height=\"251\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-36.png\" alt=\"\" class=\"wp-image-91252\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-36.png 510w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-36-300x148.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-36-200x98.png 200w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d\u1ecbnh-d\u1ea1ng-grid-cards\"><strong>\u0110\u1ecbnh d\u1ea1ng Grid cards<\/strong><\/h3>\n\n\n\n<p>V\u1edbi grid system c\u1ee7a Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y bi\u1ebfn c\u00e1ch b\u1ed1 tr\u00ed c\u00e1c Card trong m\u1ed9t container, v\u00ed d\u1ee5 nh\u01b0 \u0111\u1eb7t nhi\u1ec1u card trong m\u1ed9t h\u00e0ng v\u00e0 t\u1ef1 \u0111\u1ed9ng co gi\u00e3n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4\"&gt;\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"card h-100\"&gt;\n         &lt;img src=\"https:\/\/picsum.photos\/300\/200\" class=\"card-img-top\" alt=\"\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Card 1&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;N\u1ed9i dung m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn.&lt;\/p&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"card h-100\"&gt;\n         &lt;img src=\"https:\/\/picsum.photos\/300\/200\" class=\"card-img-top\" alt=\"\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Card 2&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;N\u1ed9i dung m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn.&lt;\/p&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"card h-100\"&gt;\n         &lt;img src=\"https:\/\/picsum.photos\/300\/200\" class=\"card-img-top\" alt=\"\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Card 3&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;N\u1ed9i dung m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn.&lt;\/p&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 tr\u00ean Desktop:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"239\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-37.png\" alt=\"\" class=\"wp-image-91253\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-37.png 538w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-37-300x133.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-37-200x89.png 200w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<p>K\u1ebft qu\u1ea3 tr\u00ean Mobile:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"309\" height=\"640\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-38-309x640.png\" alt=\"\" class=\"wp-image-91254\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-38-309x640.png 309w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-38-145x300.png 145w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-38-97x200.png 97w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-38.png 348w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/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: <\/em><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-groups\"><strong>Card groups<\/strong><\/h3>\n\n\n\n<p>Khi c\u1ea7n nhi\u1ec1u card n\u1eb1m c\u1ea1nh nhau c\u00f3 chi\u1ec1u cao b\u1eb1ng nhau, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng <strong>.card-group<\/strong>. C\u00e1c th\u1ebb Card c\u00f9ng m\u1ed9t group s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u cao b\u1eb1ng nhau, thay \u0111\u1ed5i border \u0111\u1ec3 t\u1ea1o th\u00e0nh m\u1ed9t kh\u1ed1i \u0111\u1ed3ng b\u1ed9. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card-group\"&gt;\n     &lt;div class=\"card\"&gt;\n       &lt;img src=\"https:\/\/picsum.photos\/200\/150\" class=\"card-img-top\" alt=\"\"&gt;\n       &lt;div class=\"card-body\"&gt;\n         &lt;h5 class=\"card-title\"&gt;Card A&lt;\/h5&gt;\n         &lt;p class=\"card-text\"&gt;N\u1ed9i dung c\u1ee7a Card&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"card\"&gt;\n       &lt;img src=\"https:\/\/picsum.photos\/200\/150\" class=\"card-img-top\" alt=\"\"&gt;\n       &lt;div class=\"card-body\"&gt;\n         &lt;h5 class=\"card-title\"&gt;Card B&lt;\/h5&gt;\n         &lt;p class=\"card-text\"&gt;N\u1ed9i dung c\u1ee7a Card&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"card\"&gt;\n       &lt;img src=\"https:\/\/picsum.photos\/200\/150\" class=\"card-img-top\" alt=\"\"&gt;\n       &lt;div class=\"card-body\"&gt;\n         &lt;h5 class=\"card-title\"&gt;Card C&lt;\/h5&gt;\n         &lt;p class=\"card-text\"&gt;N\u1ed9i dung c\u1ee7a Card&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"252\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-39.png\" alt=\"\" class=\"wp-image-91255\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-39.png 500w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-39-300x151.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-39-200x101.png 200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-navigation-trong-card\"><strong>Navigation trong Card<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c th\u00e0nh ph\u1ea7n <strong>nav<\/strong> ho\u1eb7c <strong>tab<\/strong> b\u00ean trong body c\u1ee7a card \u0111\u1ec3 t\u1ed5 ch\u1ee9c n\u1ed9i dung th\u00e0nh nhi\u1ec1u ph\u1ea7n. V\u00ed d\u1ee5 card c\u00f3 tab:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card text-center\"&gt;\n     &lt;div class=\"card-header\"&gt;\n       &lt;ul class=\"nav nav-tabs card-header-tabs\"&gt;\n         &lt;li class=\"nav-item\"&gt;\n           &lt;a class=\"nav-link active\" href=\"#\"&gt;Tab 1&lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"nav-item\"&gt;\n           &lt;a class=\"nav-link\" href=\"#\"&gt;Tab 2&lt;\/a&gt;\n         &lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;N\u1ed9i dung Tab 1&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i n\u1ed9i dung theo tab.&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Xem th\u00eam&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"221\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-40.png\" alt=\"\" class=\"wp-image-91256\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-40.png 510w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-40-300x130.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-40-200x87.png 200w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/figure>\n\n\n\n<p>C\u00e1ch tri\u1ec3n khai n\u00e0y ph\u00f9 h\u1ee3p cho dashboard ho\u1eb7c profile nhi\u1ec1u th\u00f4ng tin.<\/p>\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: <\/em><a href=\"https:\/\/itviec.com\/blog\/navbar-bootstrap-la-g\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Navbar Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1ea1o Header chuy\u00ean nghi\u1ec7p cho web<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-background-color-border\"><strong>T\u00f9y ch\u1ec9nh Background, Color, Border<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t card m\u1eb7c \u0111\u1ecbnh trong Bootstrap s\u1ebd c\u00f3 n\u1ec1n tr\u1eafng, ch\u1eef t\u1ed1i v\u00e0 vi\u1ec1n x\u00e1m nh\u1ea1t. Nh\u01b0ng \u0111\u00f4i khi b\u1ea1n s\u1ebd mu\u1ed1n card n\u1ed5i b\u1eadt h\u01a1n ho\u1eb7c truy\u1ec1n t\u1ea3i tr\u1ea1ng th\u00e1i c\u1ee5 th\u1ec3 (th\u00e0nh c\u00f4ng, c\u1ea3nh b\u00e1o, l\u1ed7i\u2026). \u0110\u00e2y l\u00e0 l\u00fac ch\u00fang ta t\u1eadn d\u1ee5ng h\u1ec7 th\u1ed1ng class ti\u1ec7n \u00edch m\u00e0 Bootstrap cung c\u1ea5p.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-d\u1ed5i-n\u1ec1n-cho-card-background\"><strong>\u0110\u1ed5i n\u1ec1n cho Card (Background)<\/strong><\/h4>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c class<strong> .bg-*<\/strong> tr\u1ef1c ti\u1ebfp v\u00e0o <strong>.card<\/strong> \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u1ec1n to\u00e0n b\u1ed9 th\u1ebb. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card bg-primary text-white mb-3\" style=\"max-width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card n\u1ec1n xanh&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;Th\u01b0\u1eddng d\u00f9ng cho n\u1ed9i dung n\u1ed5i b\u1eadt ho\u1eb7c CTA.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n  \n   &lt;div class=\"card bg-warning mb-3\" style=\"max-width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card n\u1ec1n v\u00e0ng&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;Ph\u00f9 h\u1ee3p cho th\u00f4ng b\u00e1o ho\u1eb7c c\u1ea3nh b\u00e1o nh\u1eb9.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"273\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-41.png\" alt=\"\" class=\"wp-image-91257\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-41.png 322w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-41-300x254.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-41-200x170.png 200w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/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: <\/em><a href=\"https:\/\/itviec.com\/blog\/bootstrap-color-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Bootstrap color: C\u00e1ch s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng m\u00e0u trong Bootstrap<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-di\u1ec1u-ch\u1ec9nh-mau-ch\u1eef-text-color\"><strong>\u0110i\u1ec1u ch\u1ec9nh m\u00e0u ch\u1eef (Text Color)<\/strong><\/h4>\n\n\n\n<p>Khi thay \u0111\u1ed5i n\u1ec1n, b\u1ea1n c\u0169ng n\u00ean ki\u1ec3m tra \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n c\u1ee7a ch\u1eef. Bootstrap h\u1ed7 tr\u1ee3 c\u00e1c class <strong>.text-*<\/strong> \u0111\u1ec3 x\u1eed l\u00fd nhanh vi\u1ec7c thay \u0111\u1ed5i m\u00e0u ch\u1eef nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.text-white<\/strong>: ch\u1eef s\u00e1ng, d\u00f9ng tr\u00ean n\u1ec1n t\u1ed1i<\/li>\n\n\n\n<li><strong>.text-dark<\/strong>: ch\u1eef \u0111\u1eadm, d\u00f9ng tr\u00ean n\u1ec1n s\u00e1ng<\/li>\n\n\n\n<li><strong>.text-muted<\/strong>: ch\u1eef nh\u1ea1t, th\u01b0\u1eddng d\u00f9ng cho ghi ch\u00fa trong card<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card bg-dark text-white mb-3\" style=\"max-width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card n\u1ec1n t\u1ed1i&lt;\/h5&gt;\n       &lt;p class=\"card-text text-warning\"&gt;D\u00f2ng ch\u1eef n\u00e0y m\u00e0u cam \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"309\" height=\"137\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-42.png\" alt=\"\" class=\"wp-image-91258\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-42.png 309w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-42-300x133.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-42-200x89.png 200w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-vi\u1ec1n-c\u1ee7a-card-border\"><strong>T\u00f9y ch\u1ec9nh vi\u1ec1n c\u1ee7a Card (Border)<\/strong><\/h4>\n\n\n\n<p>Vi\u1ec1n l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap card ph\u00e2n t\u00e1ch v\u1edbi n\u1ed9i dung xung quanh. V\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y bi\u1ebfn \u0111\u1ecbnh d\u1ea1ng vi\u1ec1n c\u1ee7a card b\u1eb1ng h\u1ec7 th\u1ed1ng class <strong>.border-*<\/strong> nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>T\u0103ng\/gi\u1ea3m \u0111\u1ed9 \u0111\u1eadm c\u1ee7a vi\u1ec1n v\u1edbi <strong>.border-1, <\/strong>&nbsp;<strong>.border-2, <\/strong>&nbsp;<strong>.border-3,&#8230;<\/strong><\/li>\n\n\n\n<li>\u0110\u1ed5i m\u00e0u vi\u1ec1n b\u1eb1ng <strong>.border-primary, .border-success, .border-danger<\/strong>,&#8230;<\/li>\n\n\n\n<li>Ch\u1ec9 \u00e1p d\u1ee5ng vi\u1ec1n cho m\u1ed9t c\u1ea1nh: <strong>.border-top, .border-start<\/strong>,&#8230;<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5, \u0111\u1ec3 t\u1ea1o 1 card ch\u1ec9 c\u00f3 vi\u1ec1n tr\u00ean v\u00e0 vi\u1ec1n d\u01b0\u1edbi, vi\u1ec1n \u0111\u1eadm h\u01a1n v\u00e0 c\u00f3 m\u00e0u xanh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card border-0 border-top border-bottom border-5 border-primary\" style=\"max-width: 18rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Card c\u00f3 vi\u1ec1n tr\u00ean\/d\u01b0\u1edbi v\u00e0 \u0111\u1ed9 d\u00e0y 5px&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;N\u1ed9i dung c\u1ee7a Card.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"155\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-43.png\" alt=\"\" class=\"wp-image-91259\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-43.png 326w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-43-300x143.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-43-200x95.png 200w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/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: <a href=\"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-b\u1ea3ng-t\u1ed5ng-h\u1ee3p-cac-class-d\u1ec3-d\u1ecbnh-d\u1ea1ng-bootstrap-card\"><span class=\"ez-toc-section\" id=\"Bang_tong_hop_cac_class_de_dinh_dang_Bootstrap_Card\"><\/span><strong>B\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c class \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng Bootstrap Card<\/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>Class<\/strong><\/td><td><strong>\u00dd ngh\u0129a<\/strong><\/td><\/tr><tr><td><strong>.card<\/strong><\/td><td>T\u1ea1o v\u00f9ng ch\u1ee9a b\u00ean ngo\u00e0i c\u1ee7a card (c\u00f3 border, radius, shadow m\u1eb7c \u0111\u1ecbnh)<\/td><\/tr><tr><td><strong>.card-body<\/strong><\/td><td>V\u00f9ng n\u1ed9i dung ch\u00ednh c\u1ee7a card (padding chu\u1ea9n)<\/td><\/tr><tr><td><strong>.card-title<\/strong><\/td><td>\u0110\u1ecbnh d\u1ea1ng ti\u00eau \u0111\u1ec1 ch\u00ednh trong card body<\/td><\/tr><tr><td><strong>.card-subtitle<\/strong><\/td><td>\u0110\u1ecbnh d\u1ea1ng ti\u00eau \u0111\u1ec1 ph\u1ee5, n\u00ean \u0111\u1eb7t ngay sau .card-title<\/td><\/tr><tr><td><strong>.card-text<\/strong><\/td><td>\u0110o\u1ea1n v\u0103n b\u1ea3n m\u00f4 t\u1ea3 trong card body<\/td><\/tr><tr><td><strong>.card-link<\/strong><\/td><td>Li\u00ean k\u1ebft trong card, t\u1ef1 th\u00eam spacing gi\u1eefa nhi\u1ec1u link<\/td><\/tr><tr><td><strong>.card-header<\/strong><\/td><td>Ph\u1ea7n header c\u1ee7a card (nh\u00e3n m\u1edf \u0111\u1ea7u, tab, nav)<\/td><\/tr><tr><td><strong>.card-footer<\/strong><\/td><td>Ph\u1ea7n footer (th\u00f4ng tin b\u1ed5 sung, metadata)<\/td><\/tr><tr><td><strong>.card-img<\/strong><\/td><td>Ch\u00e8n \u1ea3nh full chi\u1ec1u r\u1ed9ng c\u1ee7a card (cover)<\/td><\/tr><tr><td><strong>.list-group + .list-group-item<\/strong><\/td><td>T\u00edch h\u1ee3p danh s\u00e1ch trong card<\/td><\/tr><tr><td><strong>.list-group-flush<\/strong><\/td><td>X\u00f3a border &amp; padding d\u01b0 th\u1eeba khi list group n\u1eb1m trong card<\/td><\/tr><tr><td><strong>.card-group<\/strong><\/td><td>Gom nhi\u1ec1u card \u1edf c\u1ea1nh nhau, \u0111\u1ed3ng b\u1ed9 v\u1ec1 chi\u1ec1u cao<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-tr\u01b0\u1eddng-h\u1ee3p-s\u1eed-d\u1ee5ng-bootstrap-card\"><span class=\"ez-toc-section\" id=\"Cac_truong_hop_su_dung_Bootstrap_Card\"><\/span><strong>C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Bootstrap Card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Card l\u00e0 th\u00e0nh ph\u1ea7n \u0111a n\u0103ng c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng trong nhi\u1ec1u b\u1ed1i c\u1ea3nh giao di\u1ec7n web. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 5 tr\u01b0\u1eddng h\u1ee3p ph\u1ed5 bi\u1ebfn nh\u1ea5t, n\u01a1i Bootstrap Card ph\u00e1t huy t\u1ed1i \u0111a hi\u1ec7u qu\u1ea3 c\u1ee7a n\u00f3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-s\u1ea3n-ph\u1ea9m-e-commerce-product\"><strong>Card s\u1ea3n ph\u1ea9m (E-commerce Product)<\/strong><\/h3>\n\n\n\n<p>Trong c\u00e1c website th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed, card g\u1ea7n nh\u01b0 l\u00e0 \u201cv\u1eadt b\u1ea5t ly th\u00e2n\u201d. M\u1ed7i s\u1ea3n ph\u1ea9m th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u00f3ng g\u00f3i trong m\u1ed9t card bao g\u1ed3m: \u1ea3nh thumbnail, t\u00ean s\u1ea3n ph\u1ea9m, gi\u00e1 b\u00e1n v\u00e0 n\u00fat h\u00e0nh \u0111\u1ed9ng (\u201cMua ngay\u201d, \u201cTh\u00eam v\u00e0o gi\u1ecf\u201d).<\/p>\n\n\n\n<p>\u0110i\u1ec3m m\u1ea1nh \u1edf \u0111\u00e2y l\u00e0 t\u00ednh module: b\u1ea1n c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb h\u00e0ng ch\u1ee5c, th\u1eadm ch\u00ed h\u00e0ng tr\u0103m s\u1ea3n ph\u1ea9m trong m\u1ed9t l\u01b0\u1edbi card \u0111\u1ed3ng b\u1ed9 v\u1ec1 k\u00edch th\u01b0\u1edbc v\u00e0 c\u00e1ch tr\u00ecnh b\u00e0y. Ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 c\u1ea7n l\u01b0\u1edbt m\u1eaft qua l\u00e0 \u0111\u00e3 n\u1eafm \u0111\u01b0\u1ee3c th\u00f4ng tin ch\u00ednh.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n     &lt;img src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0105\/4542\/products\/tma-2.5_grande.jpg?v=1391540543\" class=\"card-img\" alt=\"\u1ea2nh Tai nghe X100\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Tai nghe XYZ Pro&lt;\/h5&gt;\n       &lt;p class=\"card-text text-danger fw-bold\"&gt;1.590.000\u20ab&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary w-100\"&gt;Mua ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"450\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-44.png\" alt=\"\" class=\"wp-image-91260\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-44.png 316w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-44-211x300.png 211w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-44-140x200.png 140w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-bai-vi\u1ebft-blog-news-preview\"><strong>Card b\u00e0i vi\u1ebft (Blog \/ News Preview)<\/strong><\/h3>\n\n\n\n<p>V\u1edbi website tin t\u1ee9c hay blog, card \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb b\u00e0i vi\u1ebft d\u1ea1ng preview: m\u1ed9t \u1ea3nh thumbnail, ti\u00eau \u0111\u1ec1 h\u1ea5p d\u1eabn, \u0111o\u1ea1n m\u00f4 t\u1ea3 ng\u1eafn v\u00e0 metadata (ng\u00e0y \u0111\u0103ng, t\u00e1c gi\u1ea3).<\/p>\n\n\n\n<p>\u01afu \u0111i\u1ec3m c\u1ee7a c\u00e1ch tr\u00ecnh b\u00e0y n\u00e0y l\u00e0 ng\u01b0\u1eddi \u0111\u1ecdc d\u1ec5 qu\u00e9t th\u00f4ng tin. Thumbnail gi\u00fap nh\u1eadn di\u1ec7n nhanh ch\u1ee7 \u0111\u1ec1, c\u00f2n ti\u00eau \u0111\u1ec1 + m\u00f4 t\u1ea3 ng\u1eafn \u0111\u1ee7 \u0111\u1ec3 h\u1ecd quy\u1ebft \u0111\u1ecbnh c\u00f3 mu\u1ed1n click \u0111\u1ecdc ti\u1ebfp hay kh\u00f4ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"max-width: 26rem;\"&gt;\n     &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-2048x1078.png\" class=\"card-img-top\" alt=\"\u1ea2nh b\u00e0i vi\u1ebft\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n giao di\u1ec7n web, form l\u00e0 n\u01a1i ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u1ea5t, t\u1eeb vi\u1ec7c \u0111i\u1ec1n th\u00f4ng tin c\u1ee7a ng\u01b0\u1eddi d\u00f9ng\u2026&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-outline-primary btn-sm\"&gt;B\u1eaft \u0111\u1ea7u \u0111\u1ecdc (23 ph\u00fat) -&gt;&lt;\/a&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"card-footer text-body-secondary small\"&gt;\n       B\u1edfi Nguy\u1ec5n V\u0103n A \u2022 20\/08\/2025\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"481\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-45.png\" alt=\"\" class=\"wp-image-91261\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-45.png 440w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-45-274x300.png 274w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-45-183x200.png 183w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-h\u1ed3-s\u01a1-ng\u01b0\u1eddi-dung-user-profile\"><strong>Card h\u1ed3 s\u01a1 ng\u01b0\u1eddi d\u00f9ng (User Profile)<\/strong><\/h3>\n\n\n\n<p>Trong c\u00e1c m\u1ea1ng x\u00e3 h\u1ed9i, \u1ee9ng d\u1ee5ng qu\u1ea3n tr\u1ecb ho\u1eb7c h\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd ng\u01b0\u1eddi d\u00f9ng, card th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin c\u00e1 nh\u00e2n g\u1ecdn g\u00e0ng: avatar, t\u00ean, ch\u1ee9c danh, s\u1ed1 li\u1ec7u v\u00e0 c\u00e1c n\u00fat h\u00e0nh \u0111\u1ed9ng (\u201cTheo d\u00f5i\u201d, \u201cNh\u1eafn tin\u201d). \u0110i\u1ec3m m\u1ea1nh l\u00e0 card gi\u00fap c\u00e1 nh\u00e2n h\u00f3a th\u00f4ng tin nh\u01b0ng v\u1eabn gi\u1eef layout \u0111\u1ed3ng b\u1ed9 cho nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng kh\u00e1c nhau.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card\" style=\"max-width: 22rem;\"&gt;\n     &lt;div class=\"card-body d-flex align-items-center\"&gt;\n       &lt;img src=\"https:\/\/i.pravatar.cc\/80\" alt=\"Avatar\" class=\"rounded-circle me-3\" width=\"64\" height=\"64\"&gt;\n       &lt;div&gt;\n         &lt;h5 class=\"card-title mb-1\"&gt;Nguy\u1ec5n Minh Kh\u00f4i&lt;\/h5&gt;\n         &lt;p class=\"card-text small text-body-secondary mb-0\"&gt;Product Designer&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     &lt;ul class=\"list-group list-group-flush\"&gt;\n       &lt;li class=\"list-group-item d-flex justify-content-between\"&gt;D\u1ef1 \u00e1n &lt;span class=\"badge bg-secondary\"&gt;12&lt;\/span&gt;&lt;\/li&gt;\n       &lt;li class=\"list-group-item d-flex justify-content-between\"&gt;Ng\u01b0\u1eddi theo d\u00f5i &lt;span class=\"badge bg-secondary\"&gt;1.2k&lt;\/span&gt;&lt;\/li&gt;\n     &lt;\/ul&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;a href=\"#\" class=\"btn btn-outline-primary me-2\"&gt;Theo d\u00f5i&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Nh\u1eafn tin&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"273\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-46.png\" alt=\"\" class=\"wp-image-91262\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-46.png 374w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-46-300x219.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-46-200x146.png 200w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-th\u1ed1ng-ke-s\u1ed1-li\u1ec7u-dashboard-kpi\"><strong>Card th\u1ed1ng k\u00ea s\u1ed1 li\u1ec7u (Dashboard KPI)<\/strong><\/h3>\n\n\n\n<p>Trong dashboard qu\u1ea3n tr\u1ecb, card l\u00e0 gi\u1ea3i ph\u00e1p l\u00fd t\u01b0\u1edfng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c ch\u1ec9 s\u1ed1 quan tr\u1ecdng (KPI): doanh thu, s\u1ed1 \u0111\u01a1n h\u00e0ng, ng\u01b0\u1eddi d\u00f9ng m\u1edbi, ti\u1ebfn \u0111\u1ed9 d\u1ef1 \u00e1n\u2026 L\u00fd do card ph\u00f9 h\u1ee3p \u1edf \u0111\u00e2y l\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed7i KPI l\u00e0 m\u1ed9t kh\u1ed1i \u0111\u1ed9c l\u1eadp, d\u1ec5 s\u1eafp x\u1ebfp<\/li>\n\n\n\n<li>Con s\u1ed1 l\u1edbn \u0111\u1eb7t trong card gi\u00fap ng\u01b0\u1eddi qu\u1ea3n tr\u1ecb nh\u00ecn tho\u00e1ng qua l\u00e0 n\u1eafm \u0111\u01b0\u1ee3c t\u00ecnh h\u00ecnh<\/li>\n\n\n\n<li>C\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi m\u00e0u s\u1eafc, bi\u1ec3u \u0111\u1ed3 mini ho\u1eb7c progress bar \u0111\u1ec3 t\u0103ng t\u00ednh tr\u1ef1c quan<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card border-0 shadow-sm text-center\" style=\"width: 16rem;\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;p class=\"text-body-secondary mb-1\"&gt;Doanh thu h\u00f4m nay&lt;\/p&gt;\n       &lt;h3 class=\"mb-2\"&gt;42.3 tri\u1ec7u \u20ab&lt;\/h3&gt;\n       &lt;p class=\"small mb-0 text-success\"&gt;\u25b2 +12% so v\u1edbi h\u00f4m qua&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"156\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-47.png\" alt=\"\" class=\"wp-image-91263\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-47.png 294w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-47-200x106.png 200w\" sizes=\"auto, (max-width: 294px) 100vw, 294px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-thong-bao-amp-tr\u1ea1ng-thai-h\u1ec7-th\u1ed1ng\"><strong>Card th\u00f4ng b\u00e1o &amp; tr\u1ea1ng th\u00e1i h\u1ec7 th\u1ed1ng<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t \u1ee9ng d\u1ee5ng hay website hi\u1ec7n \u0111\u1ea1i th\u01b0\u1eddng c\u00f3 khu v\u1ef1c th\u00f4ng b\u00e1o (maintenance, s\u1ef1 c\u1ed1 d\u1ecbch v\u1ee5, c\u1eadp nh\u1eadt m\u1edbi\u2026). Card l\u00e0 l\u1ef1a ch\u1ecdn ph\u00f9 h\u1ee3p nh\u1edd kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb n\u1ed9i dung ng\u1eafn g\u1ecdn, ph\u00e2n bi\u1ec7t b\u1eb1ng m\u00e0u s\u1eafc n\u1ec1n (bg-success, bg-warning, bg-danger).<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card text-white bg-danger\" style=\"max-width: 28rem;\"&gt;\n     &lt;div class=\"card-header\"&gt;S\u1ef1 c\u1ed1 d\u1ecbch v\u1ee5&lt;\/div&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;Gi\u00e1n \u0111o\u1ea1n thanh to\u00e1n&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;C\u1ed5ng thanh to\u00e1n b\u00ean th\u1ee9 ba \u0111ang g\u1eb7p tr\u1ee5c tr\u1eb7c. Ch\u00fang t\u00f4i \u0111ang kh\u1eafc ph\u1ee5c.&lt;\/p&gt;\n       &lt;a href=\"\/status\" class=\"btn btn-light\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"card-footer small\"&gt;C\u1eadp nh\u1eadt: 26\/08\/2025 20:15&lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"270\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-48.png\" alt=\"\" class=\"wp-image-91264\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-48.png 472w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-48-300x172.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-48-200x114.png 200w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-bootstrap-card\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_su_dung_Bootstrap_Card\"><\/span><strong>Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Bootstrap Card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Card trong Bootstrap l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 n\u00e2ng cao ch\u1ea5t l\u01b0\u1ee3ng giao di\u1ec7n, nh\u01b0ng \u0111\u1ec3 d\u00f9ng hi\u1ec7u qu\u1ea3 v\u00e0 tr\u00e1nh g\u00e2y \u1ea3nh h\u01b0\u1edfng x\u1ea5u \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX), b\u1ea1n c\u1ea7n ch\u00fa \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m sau.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Kh\u00f4ng l\u1ea1m d\u1ee5ng Card: <\/strong>Card th\u00edch h\u1ee3p cho n\u1ed9i dung \u0111\u1ed9c l\u1eadp (s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft, profile). N\u1ebfu m\u1ecdi th\u1ee9 \u0111\u1ec1u \u0111\u1eb7t v\u00e0o card, trang s\u1ebd tr\u1edf n\u00ean n\u1eb7ng n\u1ec1 v\u00e0 r\u1ed1i m\u1eaft.<\/li>\n\n\n\n<li><strong>\u0110\u1ea3m b\u1ea3o t\u00ednh responsive: <\/strong>Tr\u00e1nh c\u1ed1 \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng card b\u1eb1ng inline style. Thay v\u00e0o \u0111\u00f3, h\u00e3y t\u1eadn d\u1ee5ng grid system (<strong>row-cols-1 row-cols-md-2<\/strong>&#8230;) \u0111\u1ec3 card t\u1ef1 co gi\u00e3n tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/li>\n\n\n\n<li><strong>Ki\u1ec3m so\u00e1t \u0111\u1ed9 d\u00e0i n\u1ed9i dung: <\/strong>Khi c\u00e1c card n\u1eb1m c\u1ea1nh nhau, n\u1ed9i dung qu\u00e1 ch\u00eanh l\u1ec7ch s\u1ebd l\u00e0m b\u1ed1 c\u1ee5c m\u1ea5t c\u00e2n \u0111\u1ed1i. H\u00e3y d\u00f9ng <strong>.card-group<\/strong> ho\u1eb7c c\u1eaft ng\u1eafn m\u00f4 t\u1ea3 \u0111\u1ec3 gi\u1eef chi\u1ec1u cao \u0111\u1ed3ng \u0111\u1ec1u.<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng \u1ea3nh h\u1ee3p l\u00fd: <\/strong>Lu\u00f4n th\u00eam alt cho \u1ea3nh \u0111\u1ec3 h\u1ed7 tr\u1ee3 SEO v\u00e0 accessibility. \u0110\u1ed3ng th\u1eddi n\u00ean ch\u1ecdn \u1ea3nh c\u00f9ng t\u1ef7 l\u1ec7 \u0111\u1ec3 card x\u1ebfp h\u00e0ng ngay ng\u1eafn, tr\u00e1nh t\u00ecnh tr\u1ea1ng \u201cl\u1ed9n x\u1ed9n\u201d chi\u1ec1u cao.<\/li>\n\n\n\n<li><strong>T\u1eadn d\u1ee5ng class ti\u1ec7n \u00edch c\u00f3 s\u1eb5n: <\/strong>Tr\u00e1nh vi\u1ebft qu\u00e1 nhi\u1ec1u CSS th\u1ee7 c\u00f4ng \u0111\u1ed1i v\u1edbi nh\u1eefng \u0111\u1ecbnh d\u1ea1ng m\u00e0 Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n nh\u01b0 \u0111\u1ecbnh d\u1ea1ng border, m\u00e0u s\u1eafc, ki\u1ec3u ch\u1eef,&#8230;<\/li>\n\n\n\n<li><strong>Gi\u1eef hierarchy r\u00f5 r\u00e0ng: <\/strong>Trong m\u1ed9t card, n\u00ean s\u1eafp x\u1ebfp theo tr\u1eadt t\u1ef1: \u1ea3nh \u2192 ti\u00eau \u0111\u1ec1 \u2192 m\u00f4 t\u1ea3 \u2192 CTA \u2192 metadata. N\u1ebfu \u0111\u1ea3o l\u1ed9n, ng\u01b0\u1eddi d\u00f9ng s\u1ebd kh\u00f3 x\u00e1c \u0111\u1ecbnh \u0111\u00e2u l\u00e0 th\u00f4ng tin quan tr\u1ecdng.<\/li>\n\n\n\n<li><strong>H\u1ea1n ch\u1ebf hi\u1ec7u \u1ee9ng b\u00f3ng v\u00e0 border: <\/strong>Card c\u00f3 th\u1ec3 n\u1ed5i b\u1eadt h\u01a1n nh\u1edd shadow ho\u1eb7c border, nh\u01b0ng n\u1ebfu d\u00f9ng tr\u00e0n lan s\u1ebd g\u00e2y r\u1ed1i m\u1eaft. Ch\u1ec9 n\u00ean nh\u1ea5n m\u1ea1nh card quan tr\u1ecdng, c\u00f2n l\u1ea1i gi\u1eef \u0111\u01a1n gi\u1ea3n.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-bootstrap-card\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Bootstrap_card\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-lo\u1ea1i-b\u1ecf-vi\u1ec1n-card-khong\"><strong>C\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf vi\u1ec1n card kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Ho\u00e0n to\u00e0n c\u00f3 th\u1ec3. Bootstrap h\u1ed7 tr\u1ee3 class .border-0 \u0111\u1ec3 lo\u1ea1i b\u1ecf to\u00e0n b\u1ed9 vi\u1ec1n card. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n ch\u1ec9 mu\u1ed1n b\u1ecf vi\u1ec1n m\u1ed9t c\u1ea1nh, c\u00f3 th\u1ec3 d\u00f9ng .border-top-0, .border-start-0&#8230; \u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n card \u201ctho\u00e1ng\u201d h\u01a1n, ch\u1ec9 n\u1ed5i b\u1eadt b\u1eb1ng b\u00f3ng \u0111\u1ed5 (shadow) thay v\u00ec vi\u1ec1n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 card kh\u00f4ng c\u00f3 vi\u1ec1n v\u00e0 s\u1eed d\u1ee5ng shadow \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"card border-0 shadow-sm\" style=\"max-width: 20rem;\"&gt;\n     &lt;img src=\"https:\/\/picsum.photos\/320\/200\" class=\"card-img-top\" alt=\"\u1ea2nh s\u1ea3n ph\u1ea9m demo\"&gt;\n     &lt;div class=\"card-body\"&gt;\n       &lt;h5 class=\"card-title\"&gt;S\u1ea3n ph\u1ea9m Demo&lt;\/h5&gt;\n       &lt;p class=\"card-text\"&gt;\u0110\u00e2y l\u00e0 m\u1ed9t card kh\u00f4ng vi\u1ec1n, ch\u1ec9 d\u00f9ng b\u00f3ng \u0111\u1ed5 nh\u1eb9 \u0111\u1ec3 ph\u00e2n t\u00e1ch v\u1edbi n\u1ec1n.&lt;\/p&gt;\n       &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Mua ngay&lt;\/a&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.border-0: b\u1ecf to\u00e0n b\u1ed9 vi\u1ec1n m\u1eb7c \u0111\u1ecbnh c\u1ee7a card<\/li>\n\n\n\n<li>.shadow-sm: th\u00eam b\u00f3ng nh\u1eb9 \u0111\u1ec3 card v\u1eabn n\u1ed5i b\u1eadt tr\u00ean n\u1ec1n tr\u1eafng<\/li>\n<\/ul>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"392\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-49.png\" alt=\"\" class=\"wp-image-91265\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-49.png 350w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-49-268x300.png 268w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-49-179x200.png 179w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-group-co-t\u1ef1-d\u1ed9ng-b\u1eb1ng-chi\u1ec1u-cao-va-chi\u1ec1u-r\u1ed9ng-khong\"><strong>Card group c\u00f3 t\u1ef1 \u0111\u1ed9ng b\u1eb1ng chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Khi \u0111\u1eb7t c\u00e1c card trong <strong>.card-group<\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed3ng b\u1ed9 chi\u1ec1u cao \u0111\u1ec3 c\u00e1c card c\u00e2n b\u1eb1ng nhau, r\u1ea5t th\u00edch h\u1ee3p khi hi\u1ec3n th\u1ecb nhi\u1ec1u card c\u00f9ng h\u00e0ng. Tuy nhi\u00ean, chi\u1ec1u r\u1ed9ng kh\u00f4ng t\u1ef1 \u0111\u1ed9ng chia \u0111\u1ec1u, n\u00f3 ph\u1ee5 thu\u1ed9c v\u00e0o grid system ho\u1eb7c container. N\u1ebfu mu\u1ed1n card b\u1eb1ng nhau c\u1ea3 v\u1ec1 chi\u1ec1u r\u1ed9ng, b\u1ea1n n\u00ean \u0111\u1eb7t <strong>.card-group<\/strong> trong <strong>row<\/strong> + <strong>col<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"row\"&gt;\n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card-group h-100\"&gt;\n         &lt;div class=\"card\"&gt;\n           &lt;img src=\"https:\/\/picsum.photos\/400\/250?1\" class=\"card-img-top\" alt=\"\u1ea2nh 1\"&gt;\n           &lt;div class=\"card-body\"&gt;\n             &lt;h5 class=\"card-title\"&gt;Card 1&lt;\/h5&gt;\n             &lt;p class=\"card-text\"&gt;\n               \u0110\u00e2y l\u00e0 card \u0111\u1ea7u ti\u00ean, n\u1ed9i dung ng\u1eafn g\u1ecdn h\u01a1n.\n             &lt;\/p&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n  \n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card-group h-100\"&gt;\n         &lt;div class=\"card\"&gt;\n           &lt;img src=\"https:\/\/picsum.photos\/400\/250?2\" class=\"card-img-top\" alt=\"\u1ea2nh 2\"&gt;\n           &lt;div class=\"card-body\"&gt;\n             &lt;h5 class=\"card-title\"&gt;Card 2&lt;\/h5&gt;\n             &lt;p class=\"card-text\"&gt;\n               Card n\u00e0y c\u00f3 ph\u1ea7n n\u1ed9i dung d\u00e0i h\u01a1n m\u1ed9t ch\u00fat \u0111\u1ec3 minh h\u1ecda vi\u1ec7c \u0111\u1ed3ng b\u1ed9 chi\u1ec1u cao gi\u1eefa c\u00e1c card trong c\u00f9ng h\u00e0ng.\n             &lt;\/p&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n  \n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card-group h-100\"&gt;\n         &lt;div class=\"card\"&gt;\n           &lt;img src=\"https:\/\/picsum.photos\/400\/250?3\" class=\"card-img-top\" alt=\"\u1ea2nh 3\"&gt;\n           &lt;div class=\"card-body\"&gt;\n             &lt;h5 class=\"card-title\"&gt;Card 3&lt;\/h5&gt;\n             &lt;p class=\"card-text\"&gt;\n               \u0110\u00e2y l\u00e0 card cu\u1ed1i c\u00f9ng, n\u1ed9i dung trung b\u00ecnh.\n             &lt;\/p&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"505\" height=\"397\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-50.png\" alt=\"\" class=\"wp-image-91266\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-50.png 505w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-50-300x236.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-50-200x157.png 200w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bootstrap-5-co-h\u1ed7-tr\u1ee3-card-deck-khong\"><strong>Bootstrap 5 c\u00f3 h\u1ed7 tr\u1ee3 .card-deck kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Kh\u00f4ng. K\u1ec3 t\u1eeb Bootstrap 5, <strong>.card-deck<\/strong> \u0111\u00e3 b\u1ecb lo\u1ea1i b\u1ecf. Thay v\u00e0o \u0111\u00f3, b\u1ea1n h\u00e3y d\u00f9ng <strong>grid system<\/strong> (row, col v\u1edbi <strong>row-cols-*<\/strong>) ho\u1eb7c .card-group \u0111\u1ec3 s\u1eafp x\u1ebfp card. C\u00e1ch n\u00e0y linh ho\u1ea1t h\u01a1n, \u0111\u1ea3m b\u1ea3o responsive t\u1ed1t h\u01a1n v\u00e0 d\u1ec5 k\u1ebft h\u1ee3p v\u1edbi c\u00e1c ti\u1ec7n \u00edch kh\u00e1c c\u1ee7a Bootstrap.<\/p>\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: <\/em><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/strong><\/em><\/a><\/p>\n<\/blockquote>\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>Bootstrap Card l\u00e0 th\u00e0nh ph\u1ea7n nh\u1ecf g\u1ecdn nh\u01b0ng c\u1ef1c k\u1ef3 h\u1eefu \u00edch, gi\u00fap b\u1ea1n tr\u00ecnh b\u00e0y n\u1ed9i dung tr\u1ef1c quan, \u0111\u1ed3ng b\u1ed9 v\u00e0 d\u1ec5 m\u1edf r\u1ed9ng. V\u1edbi c\u00e1c class s\u1eb5n c\u00f3, b\u1ea1n c\u00f3 th\u1ec3 nhanh ch\u00f3ng t\u1ea1o card t\u1eeb \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn ph\u1ee9c t\u1ea1p m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS. Qua b\u00e0i vi\u1ebft n\u00e0y, ITViec hi v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc nh\u1eefng n\u1ed9i dung b\u1ed5 \u00edch \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 n\u1eafm v\u1eefng c\u00e1ch s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 Bootstrap Card v\u00e0 \u00e1p d\u1ee5ng v\u00e0o d\u1ef1 \u00e1n c\u1ee7a b\u1ea3n th\u00e2n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Card l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung g\u1ecdn g\u00e0ng v\u00e0 tr\u1ef1c quan. T\u1eeb s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft cho \u0111\u1ebfn dashboard, card lu\u00f4n gi\u00fap b\u1ed1 c\u1ee5c r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 \u0111\u1ecdc. Bootstrap cung c\u1ea5p component Card v\u1edbi \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng: header, footer, list group, h\u00ecnh [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":92004,"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-91238","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.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Card trong Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u1ef1c quan, t\u1eeb c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n \u0111\u1ebfn t\u00f9y ch\u1ec9nh n\u00e2ng cao.\" \/>\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-bootstrap-card\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Card l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung g\u1ecdn g\u00e0ng v\u00e0 tr\u1ef1c quan. T\u1eeb s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft cho \u0111\u1ebfn dashboard, card lu\u00f4n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/\" \/>\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-05T10:15:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-05T10:15:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-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=\"21 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Card trong Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u1ef1c quan, t\u1eeb c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n \u0111\u1ebfn t\u00f9y ch\u1ec9nh n\u00e2ng cao.","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-bootstrap-card\/","og_locale":"vi_VN","og_type":"article","og_title":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap","og_description":"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Card l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung g\u1ecdn g\u00e0ng v\u00e0 tr\u1ef1c quan. T\u1eeb s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft cho \u0111\u1ebfn dashboard, card lu\u00f4n","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-10-05T10:15:18+00:00","article_modified_time":"2025-10-05T10:15:21+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-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":"21 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap","datePublished":"2025-10-05T10:15:18+00:00","dateModified":"2025-10-05T10:15:21+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/"},"wordCount":4089,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/","name":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-scaled.png","datePublished":"2025-10-05T10:15:18+00:00","dateModified":"2025-10-05T10:15:21+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Card trong Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u1ef1c quan, t\u1eeb c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n \u0111\u1ebfn t\u00f9y ch\u1ec9nh n\u00e2ng cao.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/bootstrap-card-scaled.png","width":800,"height":421,"caption":"boostrap card - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-card\/#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":"Bootstrap Card: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng th\u1ebb Card trong Bootstrap"}]},{"@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\/91238","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=91238"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91238\/revisions"}],"predecessor-version":[{"id":92006,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91238\/revisions\/92006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/92004"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=91238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=91238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=91238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}