{"id":88599,"date":"2025-07-10T16:18:28","date_gmt":"2025-07-10T09:18:28","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=88599"},"modified":"2025-07-10T16:18:32","modified_gmt":"2025-07-10T09:18:32","slug":"huong-dan-su-dung-bootstrap-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/","title":{"rendered":"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi 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-css\/#Tong_quan_ve_Bootstrap_CSS\" >T\u1ed5ng quan v\u1ec1 Bootstrap CSS<\/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-css\/#So_sanh_giua_CSS_thuan_va_CSS_Bootstrap\" >So s\u00e1nh gi\u1eefa CSS thu\u1ea7n v\u00e0 CSS Bootstrap<\/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-css\/#He_thong_cac_nhom_lop_CSS_trong_Bootstrap\" >H\u1ec7 th\u1ed1ng c\u00e1c nh\u00f3m l\u1edbp CSS trong 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-bootstrap-css\/#2_cach_tuy_chinh_CSS_trong_Bootstrap\" >2 c\u00e1ch t\u00f9y ch\u1ec9nh CSS trong 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-bootstrap-css\/#Cac_ky_thuat_toi_uu_hoa_va_quan_ly_CSS_trong_Bootstrap\" >C\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a v\u00e0 qu\u1ea3n l\u00fd CSS trong 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-bootstrap-css\/#Cau_hoi_thuong_gap_ve_Bootstrap_CSS\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap CSS<\/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-css\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, CSS l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t gi\u00fap t\u1ea1o n\u00ean giao di\u1ec7n \u0111\u1eb9p m\u1eaft v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t. V\u1edbi Bootstrap, vi\u1ec7c \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n r\u1ea5t nhi\u1ec1u nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng c\u00e1c l\u1edbp (class) \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n, linh ho\u1ea1t v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng.<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5 v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS trong Bootstrap l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>T\u1ed5ng quan v\u1ec1 c\u00e1c nh\u00f3m l\u1edbp CSS trong Bootstrap<\/li>\n\n\n\n<li>C\u00e1ch t\u00f9y ch\u1ec9nh CSS trong Bootstrap v\u1edbi CSS Variables v\u00e0 Sass<\/li>\n\n\n\n<li>C\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a v\u00e0 qu\u1ea3n l\u00fd CSS hi\u1ec7u qu\u1ea3<\/li>\n\n\n\n<li>Nh\u1eefng l\u1ed7i ph\u1ed5 bi\u1ebfn v\u00e0 l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c v\u1edbi CSS trong Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-quan-v\u1ec1-bootstrap-css\"><span class=\"ez-toc-section\" id=\"Tong_quan_ve_Bootstrap_CSS\"><\/span><strong>T\u1ed5ng quan v\u1ec1 Bootstrap CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-trong-bootstrap-la-gi\"><strong>CSS trong Bootstrap l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Bootstrap l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn, gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n x\u00e2y d\u1ef1ng giao di\u1ec7n web m\u1ed9t c\u00e1ch nhanh ch\u00f3ng v\u00e0 hi\u1ec7u qu\u1ea3. M\u1ed9t ph\u1ea7n c\u1ed1t l\u00f5i c\u1ee7a Bootstrap ch\u00ednh l\u00e0 h\u1ec7 th\u1ed1ng CSS (Cascading Style Sheets), \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 cung c\u1ea5p c\u00e1c l\u1edbp (classes) \u0111\u00e3 \u0111\u01b0\u1ee3c vi\u1ebft s\u1eb5n, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u d\u00e1ng, b\u1ed1 c\u1ee5c v\u00e0 hi\u1ec7u \u1ee9ng cho website m\u00e0 kh\u00f4ng c\u1ea7n t\u1ef1 vi\u1ebft qu\u00e1 nhi\u1ec1u CSS t\u1eeb \u0111\u1ea7u.<\/p>\n\n\n\n<p>CSS trong Bootstrap bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c class ti\u1ec7n \u00edch (utility classes) cho b\u1ed1 c\u1ee5c, m\u00e0u s\u1eafc, c\u0103n ch\u1ec9nh,&#8230;<\/li>\n\n\n\n<li>C\u00e1c th\u00e0nh ph\u1ea7n UI c\u00f3 s\u1eb5n (buttons, forms, tables\u2026)<\/li>\n\n\n\n<li>C\u00e1c bi\u1ebfn CSS (CSS variables) gi\u00fap d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh giao di\u1ec7n.<\/li>\n\n\n\n<li>H\u1ed7 tr\u1ee3 cho c\u00e1c k\u1ef9 thu\u1eadt hi\u1ec7n \u0111\u1ea1i nh\u01b0 Flexbox, Grid Layout, Sass,&#8230;<\/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\/css-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 CSS \u0111\u1ec3 thi\u1ebft k\u1ebf web<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vai-tro-c\u1ed1t-loi-c\u1ee7a-css-trong-bootstrap\"><strong>Vai tr\u00f2 c\u1ed1t l\u00f5i c\u1ee7a CSS trong Bootstrap<\/strong><\/h3>\n\n\n\n<p>CSS \u0111\u00f3ng vai tr\u00f2 then ch\u1ed1t trong to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng c\u1ee7a Bootstrap. C\u00f3 th\u1ec3 n\u00f3i, CSS ch\u00ednh l\u00e0 \u201cx\u01b0\u01a1ng s\u1ed1ng\u201d gi\u00fap framework n\u00e0y tr\u1edf th\u00e0nh c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 ph\u00e1t tri\u1ec3n giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng vai tr\u00f2 c\u1ed1t l\u00f5i c\u1ee7a CSS trong Bootstrap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gi\u00fap website c\u00f3 giao di\u1ec7n \u0111\u1ed3ng nh\u1ea5t: <\/strong>Nh\u1edd c\u00f3 nh\u1eefng quy t\u1eafc CSS \u0111\u01b0\u1ee3c vi\u1ebft s\u1eb5n, c\u00e1c ph\u1ea7n c\u1ee7a trang web nh\u01b0 ti\u00eau \u0111\u1ec1, n\u00fat b\u1ea5m, b\u1ea3ng bi\u1ec3u, bi\u1ec3u m\u1eabu\u2026 s\u1ebd c\u00f3 ki\u1ec3u d\u00e1ng nh\u1ea5t qu\u00e1n, kh\u00f4ng b\u1ecb ch\u1ed7 to ch\u1ed7 nh\u1ecf, ho\u1eb7c m\u00e0u s\u1eafc l\u1ed9n x\u1ed9n.<\/li>\n\n\n\n<li><strong>R\u00fat ng\u1eafn th\u1eddi gian l\u00e0m giao di\u1ec7n: <\/strong>Thay v\u00ec ph\u1ea3i vi\u1ebft nhi\u1ec1u d\u00f2ng m\u00e3 CSS th\u1ee7 c\u00f4ng, ng\u01b0\u1eddi l\u00e0m web ch\u1ec9 c\u1ea7n \u00e1p d\u1ee5ng c\u00e1c class c\u00f3 s\u1eb5n trong Bootstrap v\u00e0o th\u1ebb HTML, l\u00e0 \u0111\u00e3 c\u00f3 th\u1ec3 t\u1ea1o ra giao di\u1ec7n nhanh ch\u00f3ng.<\/li>\n\n\n\n<li><strong>H\u1ed7 tr\u1ee3 responsive t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb: <\/strong>Bootstrap CSS \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf v\u1edbi t\u01b0 duy \u201cmobile-first\u201d, k\u1ebft h\u1ee3p v\u1edbi h\u1ec7 th\u1ed1ng breakpoints, gi\u00fap giao di\u1ec7n t\u1ef1 \u0111\u1ed9ng th\u00edch \u1ee9ng v\u1edbi c\u00e1c \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh kh\u00e1c nhau: t\u1eeb \u0111i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng, m\u00e1y t\u00ednh b\u1ea3ng cho \u0111\u1ebfn desktop.<\/li>\n\n\n\n<li><strong>D\u1ec5 s\u1eeda v\u00e0 d\u1ec5 n\u00e2ng c\u1ea5p: <\/strong>Khi mu\u1ed1n ch\u1ec9nh s\u1eeda m\u00e0u s\u1eafc, ki\u1ec3u ch\u1eef hay kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n, ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i ho\u1eb7c th\u00eam b\u1edbt m\u1ed9t v\u00e0i l\u1edbp CSS l\u00e0 \u0111\u1ee7, kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9nh s\u1eeda qu\u00e1 nhi\u1ec1u m\u00e3.<\/li>\n\n\n\n<li><strong>Gi\u00fap website hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t: <\/strong>CSS c\u1ee7a Bootstrap \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m th\u1eed \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o c\u00e1c trang web s\u1ebd hi\u1ec3n th\u1ecb \u0111\u00fang tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn, tr\u00e1nh t\u00ecnh tr\u1ea1ng l\u1ed7i hi\u1ec3n th\u1ecb khi m\u1edf trang web b\u1eb1ng c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau.<\/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-5-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap 5 l\u00e0 g\u00ec? Nh\u1eefng thay \u0111\u1ed5i n\u1ed5i b\u1eadt \u1edf Bootstrap 5<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-so-sanh-gi\u1eefa-css-thu\u1ea7n-va-css-bootstrap\"><span class=\"ez-toc-section\" id=\"So_sanh_giua_CSS_thuan_va_CSS_Bootstrap\"><\/span><strong>So s\u00e1nh gi\u1eefa CSS thu\u1ea7n v\u00e0 CSS Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>CSS thu\u1ea7n v\u00e0 CSS Bootstrap \u0111\u1ec1u gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean ki\u1ec3m so\u00e1t b\u1ed1 c\u1ee5c, m\u00e0u s\u1eafc, ki\u1ec3u ch\u1eef, kho\u1ea3ng c\u00e1ch v\u00e0 kh\u1ea3 n\u0103ng responsive tr\u00ean trang web. Tuy nhi\u00ean, c\u00e1ch l\u00e0m v\u00e0 hi\u1ec7u qu\u1ea3 th\u1ef1c t\u1ebf gi\u1eefa CSS thu\u1ea7n v\u00e0 Bootstrap l\u1ea1i c\u00f3 nhi\u1ec1u \u0111i\u1ec3m kh\u00e1c bi\u1ec7t. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng so s\u00e1nh chi ti\u1ebft:<\/p>\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 thu\u1ea7n<\/strong><\/td><td><strong>CSS Bootstrap<\/strong><\/td><\/tr><tr><td><strong>Th\u1eddi gian ph\u00e1t tri\u1ec3n<\/strong><\/td><td>C\u1ea7n t\u1ef1 vi\u1ebft t\u1eebng d\u00f2ng<\/td><td>C\u1ef1c nhanh, d\u00f9ng class c\u00f3 s\u1eb5n<\/td><\/tr><tr><td><strong>S\u1ef1 nh\u1ea5t qu\u00e1n<\/strong><\/td><td>Ph\u1ee5 thu\u1ed9c v\u00e0o l\u1eadp tr\u00ecnh vi\u00ean<\/td><td>Lu\u00f4n \u0111\u1ed3ng nh\u1ea5t nh\u1edd d\u00f9ng chung class<\/td><\/tr><tr><td><strong>T\u00ednh linh ho\u1ea1t<\/strong><\/td><td>R\u1ea5t linh ho\u1ea1t, ho\u00e0n to\u00e0n t\u1ef1 do<\/td><td>Linh ho\u1ea1t nh\u01b0ng trong khu\u00f4n m\u1eabu s\u1eb5n c\u00f3<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng responsive<\/strong><\/td><td>Ph\u1ea3i t\u1ef1 vi\u1ebft c\u00e1c \u0111o\u1ea1n CSS cho t\u1eebng thi\u1ebft b\u1ecb<\/td><td>C\u00f3 s\u1eb5n h\u1ec7 th\u1ed1ng responsive d\u1ec5 d\u00f9ng<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng t\u00e1i s\u1eed d\u1ee5ng, b\u1ea3o tr\u00ec<\/strong><\/td><td>C\u00f3 th\u1ec3 kh\u00f3 t\u00e1i s\u1eed d\u1ee5ng gi\u1eefa d\u1ef1 \u00e1n<\/td><td>R\u1ea5t d\u1ec5 t\u00e1i s\u1eed d\u1ee5ng v\u00e0 m\u1edf r\u1ed9ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5: T\u1ea1o 1 n\u00fat n\u1ec1n m\u00e0u xanh v\u1edbi ch\u1eef tr\u1eafng, c\u00e1c g\u00f3c bo tr\u00f2n v\u00e0 padding \u0111\u1ec1u.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Khi s\u1eed d\u1ee5ng CSS thu\u1ea7n<\/strong>: Ph\u1ea3i t\u1ef1 vi\u1ebft c\u00e1c d\u00f2ng CSS \u0111\u1ec3 t\u1ea1o ki\u1ec3u cho n\u00fat: m\u00e0u n\u1ec1n, m\u00e0u ch\u1eef, padding, bo tr\u00f2n&#8230;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button class=\"btn-green\"&gt;N\u00fat d\u00f9ng CSS thu\u1ea7n&lt;\/button&gt;\n&lt;style&gt;\n&nbsp;.btn-green {\n&nbsp;&nbsp;&nbsp;background-color: #0d6efd;\n&nbsp;&nbsp;&nbsp;color: white;\n&nbsp;&nbsp;&nbsp;padding: 10px 20px;\n&nbsp;&nbsp;&nbsp;border: none;\n&nbsp;&nbsp;&nbsp;border-radius: 6px;\n&nbsp;&nbsp;&nbsp;cursor: pointer;\n&nbsp;}\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=\"239\" height=\"85\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-17.png\" alt=\"\" class=\"wp-image-89295\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-17.png 239w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-17-200x71.png 200w\" sizes=\"auto, (max-width: 239px) 100vw, 239px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Khi s\u1eed d\u1ee5ng Bootstrap CSS<\/strong>: Ch\u1ec9 c\u1ea7n 2 class c\u00f3 s\u1eb5n: <strong>.btn<\/strong> (\u0111\u1ecbnh ngh\u0129a n\u00fat) v\u00e0 <strong>.btn-primary<\/strong> (n\u00fat m\u00e0u xanh). Kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam CSS.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button <em>class<\/em>=\"btn btn-primary\"&gt;N\u00fat d\u00f9ng Bootstrap&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=\"217\" height=\"72\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-18.png\" alt=\"\" class=\"wp-image-89296\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-18.png 217w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-18-200x66.png 200w\" sizes=\"auto, (max-width: 217px) 100vw, 217px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ec7-th\u1ed1ng-cac-nhom-l\u1edbp-css-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"He_thong_cac_nhom_lop_CSS_trong_Bootstrap\"><\/span><strong>H\u1ec7 th\u1ed1ng c\u00e1c nh\u00f3m l\u1edbp CSS trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ec7 th\u1ed1ng CSS c\u1ee7a Bootstrap kh\u00f4ng ch\u1ec9 m\u1ea1nh nh\u1edd t\u00ednh d\u1ec5 d\u00f9ng, m\u00e0 c\u00f2n b\u1edfi c\u1ea5u tr\u00fac r\u1ea5t r\u00f5 r\u00e0ng. C\u00e1c class CSS trong Bootstrap \u0111\u01b0\u1ee3c ph\u00e2n chia th\u00e0nh t\u1eebng nh\u00f3m ch\u1ee9c n\u0103ng nh\u01b0: b\u1ed1 c\u1ee5c, m\u00e0u s\u1eafc, typography, UI&#8230; Vi\u1ec7c n\u1eafm \u0111\u01b0\u1ee3c c\u00e1c nh\u00f3m n\u00e0y gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean d\u1ec5 tra c\u1ee9u, \u00e1p d\u1ee5ng v\u00e0 t\u1ed1i \u01b0u giao di\u1ec7n m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c nh\u00f3m CSS ch\u00ednh trong Bootstrap m\u00e0 b\u1ea1n n\u00ean bi\u1ebft:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Nh\u00f3m CSS<\/strong><\/td><td><strong>C\u00f4ng d\u1ee5ng<\/strong><\/td><td><strong>V\u00ed d\u1ee5<\/strong><\/td><\/tr><tr><td><strong>B\u1ed1 c\u1ee5c &amp; c\u0103n ch\u1ec9nh (Grid &amp; Flexbox)<\/strong><\/td><td>T\u1ea1o layout, chia c\u1ed9t, c\u0103n ch\u1ec9nh ph\u1ea7n t\u1eed<\/td><td>.row, .col-md-6, .d-flex, .justify-content-center<\/td><\/tr><tr><td><strong>Giao di\u1ec7n (UI Elements)<\/strong><\/td><td>\u0110\u1ecbnh d\u1ea1ng c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 button, dropdown, table<\/td><td>.btn-primary, .dropdown-menu, .table-striped<\/td><\/tr><tr><td><strong>Typography &amp; Text<\/strong><\/td><td>Ki\u1ec3u ch\u1eef, \u0111\u1ed9 \u0111\u1eadm, c\u0103n ch\u1ec9nh v\u0103n b\u1ea3n<\/td><td>.h1, .lead, .fw-bold, .text-center<\/td><\/tr><tr><td><strong>Bi\u1ec3u t\u01b0\u1ee3ng (Icon)<\/strong><\/td><td>Ch\u00e8n icon minh ho\u1ea1 t\u1eeb b\u1ed9 Bootstrap Icons<\/td><td>.bi-alarm, .bi-heart-fill<\/td><\/tr><tr><td><strong>Spacing (Padding &amp; Margin)<\/strong><\/td><td>\u0110i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch trong \/ ngo\u00e0i ph\u1ea7n t\u1eed<\/td><td>.p-3, .mt-4, .mx-auto<\/td><\/tr><tr><td><strong>M\u00e0u s\u1eafc &amp; N\u1ec1n (Colors &amp; Backgrounds)<\/strong><\/td><td>\u0110\u1ed5i m\u00e0u ch\u1eef, m\u00e0u n\u1ec1n, th\u00eam gradient<\/td><td>.text-primary, .bg-success, .bg-gradient<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nhom-css-v\u1ec1-b\u1ed1-c\u1ee5c-va-can-ch\u1ec9nh-grid-va-flexbox\"><strong>Nh\u00f3m CSS v\u1ec1 b\u1ed1 c\u1ee5c v\u00e0 c\u0103n ch\u1ec9nh (Grid v\u00e0 Flexbox)<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng th\u1ebf m\u1ea1nh l\u1edbn nh\u1ea5t c\u1ee7a CSS trong Bootstrap ch\u00ednh l\u00e0 kh\u1ea3 n\u0103ng gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean d\u1ec5 d\u00e0ng s\u1eafp x\u1ebfp v\u00e0 c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c c\u1ee7a trang web. Bootstrap k\u1ebft h\u1ee3p hai c\u00f4ng ngh\u1ec7 CSS r\u1ea5t m\u1ea1nh l\u00e0 Grid System v\u00e0 Flexbox utilities \u0111\u1ec3 h\u1ed7 tr\u1ee3 vi\u1ec7c x\u00e2y d\u1ef1ng layout:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-system\"><strong>Grid System<\/strong><\/h4>\n\n\n\n<p>\u0110\u00e2y l\u00e0 h\u1ec7 th\u1ed1ng l\u01b0\u1edbi d\u1ef1a tr\u00ean 12 c\u1ed9t, cho ph\u00e9p b\u1ea1n chia khung trang th\u00e0nh c\u00e1c ph\u1ea7n theo t\u1ef7 l\u1ec7 mong mu\u1ed1n. M\u1ed7i c\u1ed9t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u1ec3 co gi\u00e3n ho\u1eb7c c\u1ed1 \u0111\u1ecbnh t\u00f9y theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh.<\/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: <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<p>H\u00ecnh \u1ea3nh minh h\u1ecda v\u1ec1 h\u1ec7 th\u1ed1ng c\u1ed9t trong Grid:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"212\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19.png\" alt=\"\" class=\"wp-image-89297\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19-300x79.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19-640x169.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19-200x53.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-19-768x203.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t h\u00e0ng c\u00f3 hai c\u1ed9t b\u1eb1ng c\u00e1ch d\u00f9ng <strong><code>.col-6<\/code><\/strong>, ho\u1eb7c ba c\u1ed9t b\u1eb1ng <strong><code>.col-4<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"row\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"bg-secondary border col-6\"&gt;C\u1ed9t 1&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"bg-secondary border col-6\"&gt;C\u1ed9t 2&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"row\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"bg-secondary border col-4\"&gt;C\u1ed9t 1&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"bg-secondary border col-4\"&gt;C\u1ed9t 2&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"bg-secondary border col-4\"&gt;C\u1ed9t 3&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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=\"470\" height=\"86\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-20.png\" alt=\"\" class=\"wp-image-89298\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-20.png 470w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-20-300x55.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-20-200x37.png 200w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-flexbox-utilities\"><strong>Flexbox utilities<\/strong><\/h4>\n\n\n\n<p>Ngo\u00e0i grid, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 s\u1eb5n nhi\u1ec1u l\u1edbp CSS gi\u00fap \u0111i\u1ec1u ch\u1ec9nh b\u1ed1 c\u1ee5c b\u1eb1ng Flexbox. V\u1edbi c\u00e1c l\u1edbp nh\u01b0 <strong><code>.d-flex<\/code><\/strong>, <strong><code>.justify-content-center<\/code><\/strong>, <strong><code>.align-items-start<\/code><\/strong>, b\u1ea1n c\u00f3 th\u1ec3 c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed theo chi\u1ec1u ngang, chi\u1ec1u d\u1ecdc, gi\u00e3n c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft Flexbox CSS th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5, s\u1eed d\u1ee5ng Flexbox Bootstrap \u0111\u1ec3 c\u0103n gi\u1eefa v\u00e0 gi\u00e3n c\u00e1ch 3 ph\u1ea7n t\u1eed trong m\u1ed9t h\u00e0ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex justify-content-center gap-3 m-3 border\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-3 bg-primary text-white\"&gt;Kh\u1ed1i 1&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-3 bg-primary text-white\"&gt;Kh\u1ed1i 2&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-3 bg-primary text-white\"&gt;Kh\u1ed1i 3&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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=\"418\" height=\"98\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-21.png\" alt=\"\" class=\"wp-image-89299\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-21.png 418w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-21-300x70.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-21-200x47.png 200w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/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\/huong-dan-su-dung-flexbox-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nhom-css-v\u1ec1-giao-di\u1ec7n-ui-elements\"><strong>Nh\u00f3m CSS v\u1ec1 giao di\u1ec7n (UI Elements)<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t \u0111i\u1ec3m m\u1ea1nh n\u1ed5i b\u1eadt kh\u00e1c c\u1ee7a Bootstrap ch\u00ednh l\u00e0 vi\u1ec7c cung c\u1ea5p s\u1eb5n m\u1ed9t b\u1ed9 c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI Elements) \u0111\u1eb9p m\u1eaft, d\u1ec5 d\u00f9ng, c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ngay ch\u1ec9 b\u1eb1ng c\u00e1ch th\u00eam class CSS v\u00e0o th\u1ebb HTML.<\/p>\n\n\n\n<p>Nh\u1edd c\u00f3 c\u00e1c l\u1edbp CSS n\u00e0y, ng\u01b0\u1eddi l\u00e0m web kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ef1 thi\u1ebft k\u1ebf hay t\u1ef1 vi\u1ebft CSS cho nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0 n\u00fat b\u1ea5m, b\u1ea3ng bi\u1ec3u, bi\u1ec3u m\u1eabu (form), menu dropdown\u2026<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n giao di\u1ec7n ph\u1ed5 bi\u1ebfn m\u00e0 Bootstrap cung c\u1ea5p s\u1eb5n nh\u01b0:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-nut-b\u1ea5m-button\"><strong>N\u00fat b\u1ea5m (Button)<\/strong><\/h4>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n nhi\u1ec1u ki\u1ec3u n\u00fat kh\u00e1c nhau v\u1ec1 m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, vi\u1ec1n bo g\u00f3c\u2026 \u0110\u1ec3 t\u1ea1o n\u00fat, b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam class <strong>.btn<\/strong> k\u00e8m v\u1edbi m\u1ed9t class variant nh\u01b0 <strong><code>.btn-primary<\/code><\/strong>, <strong><code>.btn-secondary<\/code><\/strong>\u2026<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary\"&gt;N\u00fat ch\u00ednh&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary\"&gt;N\u00fat ph\u1ee5&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-outline-success\"&gt;N\u00fat vi\u1ec1n xanh&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-danger btn-lg\"&gt;N\u00fat l\u1edbn m\u00e0u \u0111\u1ecf&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=\"572\" height=\"87\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-22.png\" alt=\"\" class=\"wp-image-89300\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-22.png 572w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-22-300x46.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-22-200x30.png 200w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/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 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Button trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropdown\"><strong>Dropdown<\/strong><\/h4>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c ki\u1ec3u menu dropdown gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng t\u1ea1o ra c\u00e1c danh s\u00e1ch l\u1ef1a ch\u1ecdn s\u1ed5 xu\u1ed1ng. \u0110\u1ec3 t\u1ea1o dropdown, b\u1ea1n ch\u1ec9 c\u1ea7n k\u1ebft h\u1ee3p c\u00e1c class nh\u01b0 <strong><code>.dropdown<\/code><\/strong>, <strong><code>.dropdown-toggle<\/code><\/strong> v\u00e0 <strong><code>.dropdown-menu<\/code><\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 \u0111\u1ec3 t\u1ea1o ra danh s\u00e1ch menu g\u1ed3m 3 l\u1ef1a ch\u1ecdn:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ch\u1ecdn m\u1ee5c\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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=\"254\" height=\"195\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-23.png\" alt=\"\" class=\"wp-image-89301\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-23.png 254w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-23-200x154.png 200w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/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 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dropdown Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-b\u1ea3ng-table\"><strong>B\u1ea3ng (Table)<\/strong><\/h4>\n\n\n\n<p>Trong Bootstrap, \u0111\u1ec3 t\u1ea1o m\u1ed9t b\u1ea3ng b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam class <code>.table<\/code> v\u00e0o th\u1ebb <code>&lt;table&gt;<\/code> \u0111\u1ec3 \u00e1p d\u1ee5ng style chu\u1ea9n. Ngo\u00e0i ra, c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p th\u00eam c\u00e1c class nh\u01b0 <strong><code>.table-striped<\/code><\/strong>, <strong><code>.table-hover<\/code><\/strong>, <strong><code>.table-bordered<\/code><\/strong>&#8230; \u0111\u1ec3 t\u1ea1o c\u00e1c hi\u1ec7u \u1ee9ng nh\u01b0 k\u1ebb d\u00f2ng, hover, c\u00f3 vi\u1ec1n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 \u0111\u1ec3 t\u1ea1o m\u1ed9t b\u1ea3ng trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table class=\"table table-striped table-hover\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;#&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;T\u00ean&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Email&lt;\/th&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;1&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Nguy\u1ec5n V\u0103n A&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;a@example.com&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;L\u00ea Th\u1ecb B&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;b@example.com&lt;\/td&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/table&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=\"800\" height=\"142\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24.png\" alt=\"\" class=\"wp-image-89302\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24-300x53.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24-640x113.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24-200x35.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-24-768x136.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.table<\/code>: \u00e1p d\u1ee5ng style b\u1ea3ng c\u01a1 b\u1ea3n<\/li>\n\n\n\n<li><code>.table-striped<\/code>: k\u1ebb m\u00e0u n\u1ec1n xen k\u1ebd gi\u1eefa c\u00e1c d\u00f2ng<\/li>\n\n\n\n<li><code>.table-hover<\/code>: khi r\u00ea chu\u1ed9t qua d\u00f2ng s\u1ebd c\u00f3 hi\u1ec7u \u1ee9ng hover<\/li>\n\n\n\n<li>C\u00f3 th\u1ec3 th\u00eam <code>.table-bordered<\/code> n\u1ebfu mu\u1ed1n b\u1ea3ng c\u00f3 vi\u1ec1n<\/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 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Table Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-bi\u1ec3u-m\u1eabu-form\"><strong>Bi\u1ec3u m\u1eabu (Form)<\/strong><\/h4>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n nhi\u1ec1u class \u0111\u1ec3 gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng t\u1ea1o ra c\u00e1c bi\u1ec3u m\u1eabu (form) \u0111\u1eb9p, r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng. \u0110\u1ec3 t\u1ea1o form, b\u1ea1n ch\u1ec9 c\u1ea7n k\u1ebft h\u1ee3p c\u00e1c class nh\u01b0 <strong><code>.form-control<\/code><\/strong>, <strong><code>.form-label<\/code><\/strong>, <strong><code>.form-check<\/code><\/strong>, <strong><code>.form-select<\/code><\/strong>&#8230; v\u00e0o c\u00e1c th\u1ebb HTML t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 t\u1ea1o m\u1ed9t bi\u1ec3u m\u1eabu trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=\"name\" class=\"form-label\"&gt;H\u1ecd v\u00e0 t\u00ean&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"text\" class=\"form-control\" id=\"name\" placeholder=\"Nh\u1eadp h\u1ecd t\u00ean\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=\"email\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"email\" class=\"form-control\" id=\"email\" placeholder=\"Nh\u1eadp email\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=\"country\" class=\"form-label\"&gt;Qu\u1ed1c gia&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select class=\"form-select\" id=\"country\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&gt;Vi\u1ec7t Nam&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&gt;Hoa K\u1ef3&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&gt;Nh\u1eadt B\u1ea3n&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/select&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"form-check mb-3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input class=\"form-check-input\" type=\"checkbox\" id=\"agree\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-check-label\" for=\"agree\"&gt;\u0110\u1ed3ng \u00fd \u0111i\u1ec1u kho\u1ea3n&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;G\u1eedi&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/form&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=\"800\" height=\"307\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25.png\" alt=\"\" class=\"wp-image-89303\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25-300x115.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25-640x246.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25-200x77.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-25-768x295.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.form-label<\/code><\/strong>: style cho nh\u00e3n (label)<\/li>\n\n\n\n<li><strong><code>.form-control<\/code><\/strong>: style cho \u00f4 nh\u1eadp li\u1ec7u<\/li>\n\n\n\n<li><strong><code>.form-select<\/code><\/strong>: style cho menu ch\u1ecdn (select box)<\/li>\n\n\n\n<li><strong><code>.form-check<\/code>, <code>.form-check-input<\/code>, <code>.form-check-label<\/code><\/strong>: style cho checkbox \/ radio<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nhom-css-v\u1ec1-typography-text-va-icon\"><strong>Nh\u00f3m CSS v\u1ec1 typography, text v\u00e0 icon<\/strong><\/h3>\n\n\n\n<p>Trong giao di\u1ec7n web, c\u00e1ch tr\u00ecnh b\u00e0y ch\u1eef v\u00e0 bi\u1ec3u t\u01b0\u1ee3ng \u0111\u00f3ng vai tr\u00f2 r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 gi\u00fap ng\u01b0\u1eddi \u0111\u1ecdc d\u1ec5 theo d\u00f5i n\u1ed9i dung. Bootstrap h\u1ed7 tr\u1ee3 nhi\u1ec1u class ti\u1ec7n l\u1ee3i \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh ki\u1ec3u ch\u1eef, c\u0103n ch\u1ec9nh v\u0103n b\u1ea3n, thay \u0111\u1ed5i tr\u1ecdng s\u1ed1 ho\u1eb7c th\u00eam bi\u1ec3u t\u01b0\u1ee3ng minh h\u1ecda, t\u1ea5t c\u1ea3 \u0111\u1ec1u d\u1ec5 s\u1eed d\u1ee5ng v\u00e0 \u0111\u1ed3ng b\u1ed9 tr\u00ean to\u00e0n trang. Nh\u00f3m CSS n\u00e0y bao g\u1ed3m:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tieu-d\u1ec1-va-do\u1ea1n-van-nbsp\"><strong>Ti\u00eau \u0111\u1ec1 v\u00e0 \u0111o\u1ea1n v\u0103n&nbsp;<\/strong><\/h4>\n\n\n\n<p>C\u00e1c class typography c\u1ee7a Bootstrap gi\u00fap \u0111\u1ecbnh d\u1ea1ng c\u00e1c ti\u00eau \u0111\u1ec1 ho\u1eb7c \u0111o\u1ea1n v\u0103n tr\u1edf n\u00ean r\u00f5 r\u00e0ng, d\u1ec5 ph\u00e2n c\u1ea5p n\u1ed9i dung.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng .h1 \u0111\u1ebfn .h6 \u0111\u1ec3 t\u1ea1o c\u00e1c c\u1ea5p \u0111\u1ed9 ti\u00eau \u0111\u1ec1, ho\u1eb7c .lead \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt m\u1ed9t \u0111o\u1ea1n v\u0103n m\u1edf \u0111\u1ea7u:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1 class=\"h1\"&gt;Ti\u00eau \u0111\u1ec1 ch\u00ednh (h1)&lt;\/h1&gt;\n&lt;h2 class=\"h2\"&gt;Ti\u00eau \u0111\u1ec1 ph\u1ee5 (h2)&lt;\/h2&gt;\n&lt;p class=\"lead\"&gt;\u0110o\u1ea1n gi\u1edbi thi\u1ec7u n\u1ed5i b\u1eadt&lt;\/p&gt;\n&lt;p class=\"text-muted\"&gt;V\u0103n b\u1ea3n ghi ch\u00fa nh\u1eb9&lt;\/p&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=\"385\" height=\"213\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-26.png\" alt=\"\" class=\"wp-image-89304\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-26.png 385w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-26-300x166.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-26-200x111.png 200w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-can-ch\u1ec9nh-van-b\u1ea3n\"><strong>C\u0103n ch\u1ec9nh v\u0103n b\u1ea3n<\/strong><\/h4>\n\n\n\n<p>Bootstrap c\u0169ng gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng c\u0103n ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a v\u0103n b\u1ea3n ch\u1ec9 v\u1edbi c\u00e1c class c\u00f3 s\u1eb5n. B\u1ea1n kh\u00f4ng c\u1ea7n vi\u1ebft CSS ri\u00eang cho vi\u1ec7c n\u00e0y. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p class=\"text-start\"&gt;C\u0103n tr\u00e1i (m\u1eb7c \u0111\u1ecbnh)&lt;\/p&gt;\n&lt;p class=\"text-center\"&gt;C\u0103n gi\u1eefa&lt;\/p&gt;\n&lt;p class=\"text-end\"&gt;C\u0103n ph\u1ea3i&lt;\/p&gt;&nbsp;<\/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=\"800\" height=\"189\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27.png\" alt=\"\" class=\"wp-image-89305\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27-640x151.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-27-768x182.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.text-start<\/strong>: c\u0103n tr\u00e1i (th\u01b0\u1eddng l\u00e0 m\u1eb7c \u0111\u1ecbnh)<\/li>\n\n\n\n<li><strong>.text-center<\/strong>: c\u0103n gi\u1eefa \u0111o\u1ea1n v\u0103n<\/li>\n\n\n\n<li><strong>.text-end<\/strong>: c\u0103n ph\u1ea3i<\/li>\n<\/ul>\n\n\n\n<p>Vi\u1ec7c c\u0103n ch\u1ec9nh nhanh n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i b\u1ed1 c\u1ee5c t\u1eebng ph\u1ea7n m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ec9nh CSS th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-d\u1ed9-d\u1eadm-va-ki\u1ec3u-ch\u1eef\"><strong>\u0110\u1ed9 \u0111\u1eadm v\u00e0 ki\u1ec3u ch\u1eef<\/strong><\/h4>\n\n\n\n<p>Khi b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i \u0111\u1ed9 \u0111\u1eadm, ki\u1ec3u nghi\u00eang ho\u1eb7c ki\u1ec3u ch\u1eef c\u1ee7a v\u0103n b\u1ea3n, Bootstrap cung c\u1ea5p c\u00e1c class ti\u1ec7n d\u1ee5ng gi\u00fap b\u1ea1n l\u00e0m vi\u1ec7c n\u00e0y ngay trong HTML, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng nh\u1eefng class n\u00e0y cho m\u1ecdi ph\u1ea7n t\u1eed v\u0103n b\u1ea3n, t\u1eeb ti\u00eau \u0111\u1ec1, m\u00f4 t\u1ea3, \u0111\u1ebfn caption nh\u1ecf:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p class=\"fw-bold\"&gt;Ch\u1eef in \u0111\u1eadm (font-weight bold)&lt;\/p&gt;\n&lt;p class=\"fw-light\"&gt;Ch\u1eef m\u1ea3nh (font-weight light)&lt;\/p&gt;\n&lt;p class=\"fst-italic\"&gt;Ch\u1eef nghi\u00eang (italic)&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd9_hq6p02WFy8P26e4-vgSwpVCRCdM1Razflb1NEvIdr1-Lj9-tYEiJXDsgICu-OFBadTROQldfFo9iVil0FeFcISeEuwg7c35tS5Zv4YGAZIdEjeg8HLedbg9HPhdveGmHqMdnA?key=hPsJnq2QyfC2S1bqTMv_hw\" alt=\"\"\/><\/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\/text-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Text Bootstrap: 10+ c\u00e1ch \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-bi\u1ec3u-t\u01b0\u1ee3ng-icon\"><strong>Bi\u1ec3u t\u01b0\u1ee3ng (Icon)<\/strong><\/h4>\n\n\n\n<p>T\u1eeb phi\u00ean b\u1ea3n Bootstrap 5 tr\u1edf \u0111i, framework kh\u00f4ng t\u00edch h\u1ee3p s\u1eb5n icon b\u00ean trong core CSS. Tuy nhi\u00ean, nh\u00f3m ph\u00e1t tri\u1ec3n Bootstrap c\u00f3 cung c\u1ea5p b\u1ed9 icon ri\u00eang l\u00e0 Bootstrap Icons, c\u00f3 th\u1ec3 t\u1ea3i v\u1ec1 ho\u1eb7c nh\u00fang qua link CDN. \u0110\u1ec3 ch\u00e8n icon v\u00e0o giao di\u1ec7n r\u1ea5t \u0111\u01a1n gi\u1ea3n: b\u1ea1n ch\u1ec9 c\u1ea7n d\u00f9ng th\u1ebb <code>&lt;i&gt;<\/code> ho\u1eb7c <code>&lt;span&gt;<\/code> v\u1edbi class <code>.bi<\/code> v\u00e0 t\u00ean icon.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;i class=\"bi bi-alarm\"&gt;&lt;\/i&gt; Th\u00f4ng b\u00e1o b\u00e1o th\u1ee9c&lt;\/p&gt;\n&lt;p&gt;&lt;i class=\"bi bi-heart-fill text-danger\"&gt;&lt;\/i&gt; Y\u00eau th\u00edch&lt;\/p&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=\"280\" height=\"105\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-28.png\" alt=\"\" class=\"wp-image-89307\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-28.png 280w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-28-200x75.png 200w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.bi<\/code><\/strong>: class g\u1ed1c c\u1ee7a Bootstrap Icons<\/li>\n\n\n\n<li><strong><code>bi-alarm<\/code>, <code>bi-heart-fill<\/code><\/strong>: t\u00ean icon c\u1ee5 th\u1ec3<\/li>\n\n\n\n<li>C\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi class m\u00e0u c\u1ee7a Bootstrap (vd: <strong><code>.text-danger<\/code><\/strong> l\u00e0 m\u00e0u \u0111\u1ecf)<\/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 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap icon<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nhom-css-v\u1ec1-spacing-padding-margin\"><strong>Nh\u00f3m CSS v\u1ec1 spacing (padding, margin)<\/strong><\/h3>\n\n\n\n<p>Kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed l\u00e0 m\u1ed9t ph\u1ea7n r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 gi\u00fap giao di\u1ec7n th\u00f4ng tho\u00e1ng, d\u1ec5 nh\u00ecn. Thay v\u00ec ph\u1ea3i t\u1ef1 vi\u1ebft c\u00e1c c\u00e2u l\u1ec7nh CSS ph\u1ee9c t\u1ea1p cho margin ho\u1eb7c padding, Bootstrap cung c\u1ea5p s\u1eb5n m\u1ed9t h\u1ec7 th\u1ed1ng class r\u1ea5t linh ho\u1ea1t \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch nhanh ch\u00f3ng.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-kho\u1ea3ng-cach-ben-trong-padding\"><strong>Kho\u1ea3ng c\u00e1ch b\u00ean trong (Padding)<\/strong><\/h4>\n\n\n\n<p>Padding l\u00e0 ph\u1ea7n kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. Bootstrap gi\u00fap b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh padding d\u1ec5 d\u00e0ng th\u00f4ng qua c\u00e1c class c\u00f3 s\u1eb5n, v\u1edbi c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p{side?}-{size}<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>p<\/code>: padding<\/li>\n\n\n\n<li><code>{side?}<\/code>: v\u1ecb tr\u00ed mu\u1ed1n \u00e1p d\u1ee5ng: t (top), b (bottom), s (start &#8211; tr\u00e1i), e (end &#8211; ph\u1ea3i), x (tr\u00e1i + ph\u1ea3i), y (tr\u00ean + d\u01b0\u1edbi), ho\u1eb7c kh\u00f4ng ghi g\u00ec l\u00e0 t\u1ea5t c\u1ea3 c\u00e1c ph\u00eda<\/li>\n\n\n\n<li><code>{size}<\/code>: t\u1eeb 0 \u0111\u1ebfn 5, s\u1ed1 c\u00e0ng l\u1edbn, kho\u1ea3ng c\u00e1ch c\u00e0ng r\u1ed9ng.<\/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=\"border p-3\"&gt;Padding 3 cho t\u1ea5t c\u1ea3 c\u00e1c ph\u00eda&lt;\/div&gt;\n&lt;div class=\"border px-4\"&gt;Padding tr\u00e1i v\u00e0 ph\u1ea3i = 4&lt;\/div&gt;\n&lt;div class=\"border pt-5 pb-2\"&gt;Padding tr\u00ean = 5, d\u01b0\u1edbi = 2&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=\"305\" height=\"201\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-29.png\" alt=\"\" class=\"wp-image-89308\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-29.png 305w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-29-300x198.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-29-200x132.png 200w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/padding-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Padding Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-kho\u1ea3ng-cach-ben-ngoai-margin\"><strong>Kho\u1ea3ng c\u00e1ch b\u00ean ngo\u00e0i (Margin)<\/strong><\/h4>\n\n\n\n<p>Margin l\u00e0 ph\u1ea7n kho\u1ea3ng c\u00e1ch gi\u1eefa ph\u1ea7n t\u1eed n\u00e0y v\u00e0 ph\u1ea7n t\u1eed kh\u00e1c. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 padding, Bootstrap c\u0169ng h\u1ed7 tr\u1ee3 class margin v\u1edbi c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>m{side?}-{size}<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>m<\/code>: margin<\/li>\n\n\n\n<li><code>{side?}<\/code> v\u00e0 <code>{size}<\/code> t\u01b0\u01a1ng t\u1ef1 nh\u01b0 padding<\/li>\n\n\n\n<li>\u0110\u1eb7c bi\u1ec7t: c\u00f3 th\u1ec3 d\u00f9ng auto cho margin, th\u01b0\u1eddng \u0111\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed.<\/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=\"border m-0\"&gt;Kh\u00f4ng c\u00f3 margin (kho\u1ea3ng c\u00e1ch ngo\u00e0i b\u1eb1ng 0)&lt;\/div&gt;\n\n&lt;div class=\"border mt-4 mb-2\"&gt;Margin tr\u00ean = 4, d\u01b0\u1edbi = 2&lt;\/div&gt;\n\n&lt;div class=\"border mx-auto\" style=\"width: 200px;\"&gt;C\u0103n gi\u1eefa (margin auto)&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=\"400\" height=\"150\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-30.png\" alt=\"\" class=\"wp-image-89309\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-30.png 400w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-30-300x113.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-30-200x75.png 200w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 <strong><a href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Margin Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nhom-css-v\u1ec1-mau-s\u1eafc-va-n\u1ec1n-colors-amp-backgrounds\"><strong>Nh\u00f3m CSS v\u1ec1 m\u00e0u s\u1eafc v\u00e0 n\u1ec1n (Colors &amp; Backgrounds)<\/strong><\/h3>\n\n\n\n<p>M\u00e0u s\u1eafc l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap giao di\u1ec7n tr\u1edf n\u00ean sinh \u0111\u1ed9ng, d\u1ec5 t\u1ea1o c\u1ea3m x\u00fac cho ng\u01b0\u1eddi d\u00f9ng. Vi\u1ec7c s\u1eed d\u1ee5ng m\u00e0u \u0111\u00fang c\u00e1ch c\u00f2n gi\u00fap ph\u00e2n bi\u1ec7t c\u00e1c nh\u00f3m n\u1ed9i dung, nh\u1ea5n m\u1ea1nh th\u00f4ng tin quan tr\u1ecdng ho\u1eb7c t\u1ea1o s\u1ef1 nh\u1ea5t qu\u00e1n cho th\u01b0\u01a1ng hi\u1ec7u.<\/p>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 s\u1eb5n m\u1ed9t h\u1ec7 th\u1ed1ng class v\u1ec1 m\u00e0u ch\u1eef v\u00e0 m\u00e0u n\u1ec1n r\u1ea5t linh ho\u1ea1t. B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ngay cho b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o trong trang m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-mau-ch\u1eef-text-colors\"><strong>M\u00e0u ch\u1eef (Text colors)<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 thay \u0111\u1ed5i m\u00e0u c\u1ee7a v\u0103n b\u1ea3n, ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng c\u00e1c class m\u00e0 Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.text-primary<\/code><\/strong>: M\u00e0u ch\u00ednh c\u1ee7a giao di\u1ec7n<\/li>\n\n\n\n<li><strong><code>.text-secondary<\/code><\/strong>: M\u00e0u ph\u1ee5<\/li>\n\n\n\n<li><strong><code>.text-success<\/code><\/strong>: M\u00e0u xanh l\u00e1 \u2013 d\u00f9ng cho th\u00f4ng tin mang \u00fd ngh\u0129a th\u00e0nh c\u00f4ng<\/li>\n\n\n\n<li><strong><code>.text-danger<\/code><\/strong>: M\u00e0u \u0111\u1ecf \u2013 d\u00f9ng cho th\u00f4ng tin mang \u00fd ngh\u0129a c\u1ea3nh b\u00e1o, l\u1ed7i<\/li>\n\n\n\n<li><strong><code>.text-warning<\/code><\/strong>: M\u00e0u v\u00e0ng \u2013 d\u00f9ng cho th\u00f4ng tin mang \u00fd ngh\u0129a ch\u00fa \u00fd<\/li>\n\n\n\n<li><strong><code>.text-info<\/code><\/strong>: M\u00e0u xanh da tr\u1eddi \u2013 d\u00f9ng cho th\u00f4ng tin mang \u00fd ngh\u0129a th\u00f4ng tin<\/li>\n\n\n\n<li><strong><code>.text-dark<\/code><\/strong>: M\u00e0u \u0111en \u0111\u1eadm<\/li>\n\n\n\n<li><strong><code>.text-light<\/code><\/strong>: M\u00e0u x\u00e1m nh\u1ea1t (d\u00f9ng cho n\u1ec1n t\u1ed1i)<\/li>\n\n\n\n<li><strong><code>.text-muted<\/code><\/strong>: M\u00e0u x\u00e1m nh\u1ea1t \u2013 kh\u00f4ng n\u1ed5i b\u1eadt<\/li>\n\n\n\n<li><strong><code>.text-white<\/code><\/strong>: M\u00e0u tr\u1eafng (d\u00f9ng cho n\u1ec1n t\u1ed1i)<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p class=\"text-primary\"&gt;V\u0103n b\u1ea3n m\u00e0u xanh ch\u00ednh (primary)&lt;\/p&gt;\n&lt;p class=\"text-success\"&gt;V\u0103n b\u1ea3n m\u00e0u xanh l\u00e1 (success)&lt;\/p&gt;\n&lt;p class=\"text-danger\"&gt;V\u0103n b\u1ea3n m\u00e0u \u0111\u1ecf (danger)&lt;\/p&gt;\n&lt;p class=\"text-warning\"&gt;V\u0103n b\u1ea3n m\u00e0u v\u00e0ng (warning)&lt;\/p&gt;\n&lt;p class=\"text-muted\"&gt;V\u0103n b\u1ea3n m\u00e0u nh\u1ea1t (muted)&lt;\/p&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=\"291\" height=\"215\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-31.png\" alt=\"\" class=\"wp-image-89310\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-31.png 291w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-31-200x148.png 200w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-mau-n\u1ec1n-background-colors\"><strong>M\u00e0u n\u1ec1n (Background colors)<\/strong><\/h4>\n\n\n\n<p>T\u01b0\u01a1ng t\u1ef1 nh\u01b0 m\u00e0u ch\u1eef, b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o b\u1eb1ng c\u00e1c class c\u00f3 s\u1eb5n trong Bootstrap theo c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bg-{theme}<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3: <strong>theme <\/strong>l\u00e0 c\u00e1c ch\u1ee7 \u0111\u1ec1 m\u00e0u c\u1ee7a Bootstrap nh\u01b0 primary, success, warning,&#8230;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"p-3 bg-primary text-white\"&gt;N\u1ec1n xanh + ch\u1eef tr\u1eafng&lt;\/div&gt;\n&lt;div class=\"p-3 bg-success text-white\"&gt;N\u1ec1n xanh l\u00e1&lt;\/div&gt;\n&lt;div class=\"p-3 bg-danger text-white\"&gt;N\u1ec1n \u0111\u1ecf&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=\"400\" height=\"199\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-32.png\" alt=\"\" class=\"wp-image-89311\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-32.png 400w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-32-300x149.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-32-200x100.png 200w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-2-cach-tuy-ch\u1ec9nh-css-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"2_cach_tuy_chinh_CSS_trong_Bootstrap\"><\/span><strong>2 c\u00e1ch t\u00f9y ch\u1ec9nh CSS trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n r\u1ea5t nhi\u1ec1u class \u0111\u1ec3 d\u00f9ng ngay, nh\u01b0ng trong th\u1ef1c t\u1ebf, m\u1ed7i website hay \u1ee9ng d\u1ee5ng \u0111\u1ec1u c\u1ea7n tu\u1ef3 ch\u1ec9nh giao di\u1ec7n cho ph\u00f9 h\u1ee3p v\u1edbi th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c y\u00eau c\u1ea7u ri\u00eang. Bootstrap h\u1ed7 tr\u1ee3 2 c\u00e1ch ch\u00ednh \u0111\u1ec3 tu\u1ef3 ch\u1ec9nh giao di\u1ec7n bao g\u1ed3m:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cach-1-s\u1eed-d\u1ee5ng-css-variables\"><strong>C\u00e1ch 1: S\u1eed d\u1ee5ng CSS Variables<\/strong><\/h3>\n\n\n\n<p>T\u1eeb phi\u00ean b\u1ea3n 5 tr\u1edf l\u00ean, Bootstrap \u0111\u00e3 t\u00edch h\u1ee3p CSS Variables (bi\u1ebfn CSS) cho r\u1ea5t nhi\u1ec1u thu\u1ed9c t\u00ednh giao di\u1ec7n, gi\u00fap vi\u1ec7c tu\u1ef3 ch\u1ec9nh tr\u1edf n\u00ean c\u1ef1c k\u1ef3 d\u1ec5 d\u00e0ng v\u00e0 linh ho\u1ea1t.<\/p>\n\n\n\n<p>CSS Variables l\u00e0 nh\u1eefng gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a b\u1eb1ng c\u00fa ph\u00e1p &#8211;t\u00ean-bi\u1ebfn, sau \u0111\u00f3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i \u1edf b\u1ea5t k\u1ef3 ch\u1ed7 n\u00e0o trong CSS. Vi\u1ec7c n\u00e0y gi\u00fap b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, font, bo g\u00f3c&#8230; m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ec9nh s\u1eeda s\u00e2u.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 nh\u00f3m bi\u1ebfn ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Nh\u00f3m<\/strong><\/td><td><strong>V\u00ed d\u1ee5<\/strong><\/td><\/tr><tr><td>M\u00e0u s\u1eafc<\/td><td>&#8211;bs-primary, &#8211;bs-success, &#8230;<\/td><\/tr><tr><td>font ch\u1eef, size<\/td><td>&#8211;bs-body-font-family, &#8211;bs-body-font-size,&#8230;<\/td><\/tr><tr><td>Kho\u1ea3ng c\u00e1ch<\/td><td>&#8211;bs-border-radius, &#8211;bs-gutter-x,&#8230;<\/td><\/tr><tr><td>N\u1ec1n<\/td><td>&#8211;bs-body-bg,&#8230;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5, Bootstrap \u0111\u1ecbnh ngh\u0129a r\u1ea5t nhi\u1ec1u bi\u1ebfn CSS ngay trong b\u1ed9 framework nh\u01b0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n&nbsp;--bs-primary: #0d6efd;\n&nbsp;--bs-secondary: #6c757d;\n&nbsp;--bs-success: #198754;\n&nbsp;--bs-danger: #dc3545;\n&nbsp;--bs-border-radius: 0.375rem;\n&nbsp;--bs-body-bg: #fff;\n&nbsp;--bs-body-color: #212529;\n}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 c\u00e1c bi\u1ebfn n\u00e0y trong file CSS c\u1ee7a ri\u00eang m\u00ecnh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n&nbsp;--bs-primary: #ff5722; \/* \u0111\u1ed5i m\u00e0u ch\u1ee7 \u0111\u1ea1o th\u00e0nh cam *\/\n&nbsp;--bs-border-radius: 0.5rem; \/* \u0111\u1ed5i bo g\u00f3c *\/\n}<\/code><\/pre>\n\n\n\n<p>Sau \u0111\u00f3 to\u00e0n b\u1ed9 c\u00e1c th\u00e0nh ph\u1ea7n s\u1eed d\u1ee5ng m\u00e0u ch\u1ee7 \u0111\u1ea1o (n\u00fat .btn-primary, link, alert&#8230;) \u0111\u1ec1u s\u1ebd t\u1ef1 \u0111\u1ed9ng c\u1eadp nh\u1eadt theo m\u00e0u m\u1edbi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cach-2-tuy-ch\u1ec9nh-bootstrap-v\u1edbi-sass\"><strong>C\u00e1ch 2: T\u00f9y ch\u1ec9nh Bootstrap v\u1edbi Sass<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n tu\u1ef3 ch\u1ec9nh s\u00e2u h\u01a1n giao di\u1ec7n Bootstrap nh\u01b0 \u0111\u1ed5i to\u00e0n b\u1ed9 m\u00e0u ch\u1ee7 \u0111\u1ea1o, font ch\u1eef, k\u00edch th\u01b0\u1edbc, kho\u1ea3ng c\u00e1ch, ho\u1eb7c b\u1ecf b\u1edbt c\u00e1c th\u00e0nh ph\u1ea7n kh\u00f4ng d\u00f9ng \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng file CSS, th\u00ec c\u00e1ch t\u1ed1t nh\u1ea5t l\u00e0 d\u00f9ng Sass.<\/p>\n\n\n\n<p>Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean Sass (m\u1ed9t ng\u00f4n ng\u1eef CSS m\u1edf r\u1ed9ng) gi\u00fap qu\u1ea3n l\u00fd code CSS hi\u1ec7u qu\u1ea3 h\u01a1n (v\u1edbi bi\u1ebfn, v\u00f2ng l\u1eb7p, mixin&#8230;). Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n m\u00e3 ngu\u1ed3n <strong>.scss<\/strong> \u0111\u1ec3 b\u1ea1n d\u1ec5 d\u00e0ng tu\u1ef3 ch\u1ec9nh v\u00e0 bi\u00ean d\u1ecbch l\u1ea1i th\u00e0nh file CSS ri\u00eang cho project.<\/p>\n\n\n\n<p><strong>C\u00e1ch t\u00f9y ch\u1ec9nh b\u1eb1ng Sass:<\/strong><\/p>\n\n\n\n<p>Trong project, b\u1ea1n s\u1ebd import c\u00e1c file .scss t\u1eeb Bootstrap, sau \u0111\u00f3 ghi \u0111\u00e8 bi\u1ebfn Sass tr\u01b0\u1edbc khi build CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Ghi \u0111\u00e8 bi\u1ebfn tr\u01b0\u1edbc\n$primary: #ff5722;\n$font-family-base: 'Roboto', sans-serif;\n$border-radius: 0.75rem;\n\n\/\/ Import Bootstrap\n@import \"bootstrap\";<\/code><\/pre>\n\n\n\n<p>Sau \u0111\u00f3, d\u00f9ng c\u00f4ng c\u1ee5 build Sass (nh\u01b0 Webpack, Vite, Parcel, ho\u1eb7c CLI), b\u1ea1n s\u1ebd t\u1ea1o ra file CSS ho\u00e0n ch\u1ec9nh (trong \u0111\u00f3 \u0111\u00e3 \u00e1p d\u1ee5ng c\u00e1c thay \u0111\u1ed5i theo \u00fd b\u1ea1n).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L\u01b0u \u00fd: Ch\u1ec9 khi s\u1eed d\u1ee5ng Bootstrap d\u01b0\u1edbi d\u1ea1ng source Sass (c\u00e0i qua npm\/yarn ho\u1eb7c t\u1ea3i source v\u1ec1), b\u1ea1n m\u1edbi c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh b\u1eb1ng Sass. N\u1ebfu d\u00f9ng b\u1ea3n CSS build s\u1eb5n (CDN), ch\u1ec9 c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh qua CSS Variables.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-k\u1ef9-thu\u1eadt-t\u1ed1i-\u01b0u-hoa-va-qu\u1ea3n-ly-css-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_ky_thuat_toi_uu_hoa_va_quan_ly_CSS_trong_Bootstrap\"><\/span><strong>C\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a v\u00e0 qu\u1ea3n l\u00fd CSS trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi ph\u00e1t tri\u1ec3n giao di\u1ec7n v\u1edbi Bootstrap, n\u1ebfu kh\u00f4ng qu\u1ea3n l\u00fd t\u1ed1t, file CSS c\u00f3 th\u1ec3 b\u1ecb ph\u00ecnh to ho\u1eb7c g\u1eb7p xung \u0111\u1ed9t khi k\u1ebft h\u1ee3p v\u1edbi c\u00e1c CSS kh\u00e1c. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 k\u1ef9 thu\u1eadt gi\u00fap t\u1ed1i \u01b0u h\u00f3a v\u00e0 qu\u1ea3n l\u00fd CSS hi\u1ec7u qu\u1ea3 h\u01a1n:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-k\u1ef9-thu\u1eadt-t\u1ed1i-\u01b0u-css-cho-hi\u1ec7u-nang\"><strong>C\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u CSS cho hi\u1ec7u n\u0103ng<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ch\u1ec9-import-cac-thanh-ph\u1ea7n-c\u1ea7n-thi\u1ebft-n\u1ebfu-dung-b\u1ea3n-sass\"><strong>Ch\u1ec9 import c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea7n thi\u1ebft<\/strong> <strong>(n\u1ebfu d\u00f9ng b\u1ea3n Sass)<\/strong><\/h4>\n\n\n\n<p>Thay v\u00ec import to\u00e0n b\u1ed9 Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 import nh\u1eefng module c\u1ea7n d\u00f9ng. \u0110i\u1ec1u n\u00e0y gi\u00fap gi\u1ea3m dung l\u01b0\u1ee3ng file CSS xu\u1ea5t ra.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Ch\u1ec9 import ph\u1ea7n c\u1ea7n d\u00f9ng\n@import \"bootstrap\/functions\";\n@import \"bootstrap\/variables\";\n@import \"bootstrap\/mixins\";\n@import \"bootstrap\/buttons\";\n@import \"bootstrap\/forms\";\n@import \"bootstrap\/utilities\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-lo\u1ea1i-b\u1ecf-class-khong-dung\"><strong>Lo\u1ea1i b\u1ecf class kh\u00f4ng d\u00f9ng<\/strong><\/h4>\n\n\n\n<p>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n, th\u01b0\u1eddng c\u00f3 nhi\u1ec1u \u0111o\u1ea1n CSS custom, ho\u1eb7c s\u1eed d\u1ee5ng class trong element HTML nh\u01b0ng v\u1ec1 sau kh\u00f4ng c\u00f2n d\u00f9ng n\u1eefa ho\u1eb7c b\u1ecb ghi \u0111\u00e8. C\u00e1c class n\u00e0y n\u1eb1m trong file s\u1ebd l\u00e0 \u201cdead code\u201d (r\u00e1c), l\u00e0m file to ra m\u00e0 kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng g\u00ec.<\/p>\n\n\n\n<p>C\u00e1ch lo\u1ea1i b\u1ecf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng tool nh\u01b0 <strong>PurgeCSS<\/strong> ho\u1eb7c <strong>UnCSS<\/strong> \u0111\u1ec3 scan ra nh\u1eefng class kh\u00f4ng xu\u1ea5t hi\u1ec7n trong HTML.<\/li>\n\n\n\n<li>C\u00f3 th\u1ec3 x\u00f3a tay sau khi r\u00e0 so\u00e1t.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-css-variables-d\u1ec3-tranh-ph\u1ea3i-khai-bao-nhi\u1ec1u-l\u1ea7n\"><strong>D\u00f9ng CSS Variables \u0111\u1ec3 tr\u00e1nh ph\u1ea3i khai b\u00e1o nhi\u1ec1u l\u1ea7n<\/strong>&nbsp;<\/h4>\n\n\n\n<p>K\u1ec3 t\u1eeb Bootstrap 5, r\u1ea5t nhi\u1ec1u gi\u00e1 tr\u1ecb thi\u1ebft k\u1ebf (m\u00e0u s\u1eafc, padding, bo g\u00f3c, font&#8230;) \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a s\u1eb5n d\u01b0\u1edbi d\u1ea1ng CSS Variables (bi\u1ebfn CSS), v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n&nbsp;--bs-primary: #0d6efd;\n&nbsp;--bs-border-radius: 0.375rem;\n&nbsp;--bs-body-bg: #fff;\n&nbsp;--bs-body-color: #212529;\n}<\/code><\/pre>\n\n\n\n<p>Khi vi\u1ebft CSS t\u00f9y ch\u1ec9nh, thay v\u00ec ph\u1ea3i override nhi\u1ec1u l\u1ea7n nh\u01b0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn-primary {\n&nbsp;background-color: #ff5722;\n}\n\n.alert-primary {\n&nbsp;background-color: #ff5722;\n}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh l\u1ea1i gi\u00e1 tr\u1ecb bi\u1ebfn:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n&nbsp;--bs-primary: #ff5722;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ki\u1ec3m-soat-s\u1ed1-l\u01b0\u1ee3ng-class-l\u1ed3ng-nhau\"><strong>Ki\u1ec3m so\u00e1t s\u1ed1 l\u01b0\u1ee3ng class l\u1ed3ng nhau<\/strong>&nbsp;<\/h4>\n\n\n\n<p>Trong qu\u00e1 tr\u00ecnh d\u00f9ng Bootstrap, n\u1ebfu l\u1ea1m d\u1ee5ng qu\u00e1 nhi\u1ec1u class tr\u00ean c\u00f9ng 1 ph\u1ea7n t\u1eed ho\u1eb7c l\u1ed3ng nhi\u1ec1u l\u1edbp div ch\u1ec9 \u0111\u1ec3 c\u0103n ch\u1ec9nh, s\u1ebd l\u00e0m cho HTML tr\u1edf n\u00ean c\u1ed3ng k\u1ec1nh, kh\u00f3 \u0111\u1ecdc v\u00e0 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u n\u0103ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5, s\u1eed d\u1ee5ng 3 l\u1edbp div ch\u1ec9 \u0111\u1ec3 c\u0103n gi\u1eefa v\u00e0 \u0111\u1eb7t padding, border:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex justify-content-center align-items-center p-3 bg-light\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex flex-column justify-content-between h-100 w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"mb-2 p-2 border rounded text-center bg-primary text-white\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;N\u1ed9i dung\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>C\u00e1ch c\u1ea3i thi\u1ec7n: Ch\u1ec9 n\u00ean d\u00f9ng c\u00e1c class th\u1eadt s\u1ef1 c\u1ea7n thi\u1ebft v\u00e0 gi\u1ea3m b\u1edbt s\u1ed1 l\u01b0\u1ee3ng wrapper (div l\u1ed3ng nhau), k\u1ebft h\u1ee3p c\u00e1c class cho g\u1ecdn g\u00e0ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"d-flex justify-content-center align-items-center p-3 bg-primary text-white rounded\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;N\u1ed9i dung\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-qu\u1ea3n-ly-xung-d\u1ed9t-css\"><strong>Qu\u1ea3n l\u00fd xung \u0111\u1ed9t CSS<\/strong><\/h3>\n\n\n\n<p>Khi k\u1ebft h\u1ee3p Bootstrap v\u1edbi CSS custom ho\u1eb7c v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n giao di\u1ec7n kh\u00e1c, r\u1ea5t d\u1ec5 x\u1ea3y ra t\u00ecnh tr\u1ea1ng xung \u0111\u1ed9t CSS, t\u1ee9c l\u00e0 m\u1ed9t s\u1ed1 class ho\u1eb7c thu\u1ed9c t\u00ednh b\u1ecb ghi \u0111\u00e8 ngo\u00e0i \u00fd mu\u1ed1n, l\u00e0m giao di\u1ec7n b\u1ecb l\u1ed7i ho\u1eb7c kh\u00f4ng \u0111\u1ed3ng nh\u1ea5t. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 2 c\u00e1ch gi\u00fap qu\u1ea3n l\u00fd v\u00e0 h\u1ea1n ch\u1ebf xung \u0111\u1ed9t CSS hi\u1ec7u qu\u1ea3 h\u01a1n:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\u01b0u-tien-dung-css-variables-ho\u1eb7c-override-co-ki\u1ec3m-soat\"><strong>\u01afu ti\u00ean d\u00f9ng CSS Variables ho\u1eb7c override c\u00f3 ki\u1ec3m so\u00e1t<\/strong><\/h4>\n\n\n\n<p>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n d\u1ef1 \u00e1n, s\u1ebd c\u00f3 hai nhu c\u1ea7u t\u00f9y ch\u1ec9nh CSS ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh to\u00e0n b\u1ed9 giao di\u1ec7n \u0111\u1ed3ng b\u1ed9 theo th\u01b0\u01a1ng hi\u1ec7u (brand):&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p n\u00e0y n\u00ean \u01b0u ti\u00ean s\u1eed d\u1ee5ng CSS Variables. Khi \u0111\u00f3, to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng c\u1eadp nh\u1eadt theo gi\u00e1 tr\u1ecb m\u1edbi m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i ghi \u0111\u00e8 ri\u00eang l\u1ebb t\u1eebng th\u00e0nh ph\u1ea7n.<\/p>\n\n\n\n<p>Gi\u1ea3 s\u1eed website c\u1ea7n \u0111\u1ed5i m\u00e0u primary th\u00e0nh m\u00e0u cam \u0111\u1ec3 \u0111\u1ed3ng b\u1ed9 v\u1edbi brand m\u1edbi. Thay v\u00ec ph\u1ea3i override t\u1eebng class nh\u01b0 .btn-primary, .alert-primary, .badge-primary,&#8230; b\u1ea1n ch\u1ec9 c\u1ea7n c\u1eadp nh\u1eadt bi\u1ebfn CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n&nbsp;--bs-primary: #ff5722;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: to\u00e0n b\u1ed9 giao di\u1ec7n s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u1ed3ng b\u1ed9 theo m\u00e0u m\u1edbi, t\u1eeb n\u00fat b\u1ea5m, alert cho \u0111\u1ebfn badge&#8230; m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ec9nh tay t\u1eebng component.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh ri\u00eang cho m\u1ed9t component ho\u1eb7c cho m\u1ed9t trang c\u1ee5 th\u1ec3:&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p n\u00e0y n\u00ean s\u1eed d\u1ee5ng class ph\u1ee5 ho\u1eb7c CSS scoped theo trang. C\u00e1ch l\u00e0m n\u00e0y gi\u00fap tr\u00e1nh \u1ea3nh h\u01b0\u1edfng ngo\u00e0i \u00fd mu\u1ed1n \u0111\u1ebfn c\u00e1c ph\u1ea7n kh\u00e1c c\u1ee7a h\u1ec7 th\u1ed1ng v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: ch\u1ec9 ri\u00eang trang landing-page c\u1ea7n n\u00fat .btn-primary c\u00f3 bo tr\u00f2n l\u1edbn h\u01a1n, nh\u01b0ng kh\u00f4ng mu\u1ed1n \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1c trang kh\u00e1c. B\u1ea1n c\u00f3 th\u1ec3 th\u00eam class ph\u1ee5 nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary btn-landing\"&gt;\u0110\u0103ng k\u00fd ngay&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.btn-landing {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 20px;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-th\u1eadn-tr\u1ecdng-khi-k\u1ebft-h\u1ee3p-v\u1edbi-th\u01b0-vi\u1ec7n-ui-khac\"><strong>Th\u1eadn tr\u1ecdng khi k\u1ebft h\u1ee3p v\u1edbi th\u01b0 vi\u1ec7n UI kh\u00e1c<\/strong><\/h4>\n\n\n\n<p>Khi x\u00e2y d\u1ef1ng giao di\u1ec7n, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n k\u1ebft h\u1ee3p th\u00eam c\u00e1c th\u01b0 vi\u1ec7n UI kh\u00e1c ngo\u00e0i Bootstrap (v\u00ed d\u1ee5: Material UI, Tailwind CSS, PrimeVue, Ant Design&#8230;). Tuy nhi\u00ean, vi\u1ec7c k\u1ebft h\u1ee3p n\u00e0y r\u1ea5t d\u1ec5 x\u1ea3y ra xung \u0111\u1ed9t CSS, \u0111\u1eb7c bi\u1ec7t l\u00e0 khi c\u00e1c th\u01b0 vi\u1ec7n \u0111\u00f3 s\u1eed d\u1ee5ng c\u00e1c class tr\u00f9ng t\u00ean v\u1edbi Bootstrap (v\u00ed d\u1ee5: .card, .modal, .active, .btn&#8230;).<\/p>\n\n\n\n<p>C\u00e1ch gi\u1ea3m thi\u1ec3u xung \u0111\u1ed9t:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u01afu ti\u00ean ch\u1ecdn 1 th\u01b0 vi\u1ec7n UI ch\u00ednh cho d\u1ef1 \u00e1n. H\u1ea1n ch\u1ebf s\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u h\u1ec7 th\u1ed1ng CSS kh\u00e1c nhau.<\/li>\n\n\n\n<li>\u0110\u1ecdc k\u1ef9 t\u00e0i li\u1ec7u c\u1ee7a c\u00e1c UI library kh\u00e1c \u0111\u1ec3 tr\u00e1nh d\u00f9ng class tr\u00f9ng t\u00ean v\u1edbi Bootstrap.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-bootstrap-css\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Bootstrap_CSS\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-toi-nen-ghi-de-css-c\u1ee7a-bootstrap-\u1edf-dau-trong-d\u1ef1-an\"><strong>T\u00f4i n\u00ean ghi \u0111\u00e8 CSS c\u1ee7a Bootstrap \u1edf \u0111\u00e2u trong d\u1ef1 \u00e1n?<\/strong><\/h3>\n\n\n\n<p>Khi c\u1ea7n tu\u1ef3 ch\u1ec9nh ho\u1eb7c ghi \u0111\u00e8 CSS c\u1ee7a Bootstrap, b\u1ea1n n\u00ean th\u1ef1c hi\u1ec7n trong file CSS custom ri\u00eang c\u1ee7a d\u1ef1 \u00e1n, \u0111\u1eb7t sau Bootstrap trong th\u1ee9 t\u1ef1 import.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>N\u1ebfu s\u1eed d\u1ee5ng b\u1ea3n Sass<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t file nh\u01b0 custom.scss ho\u1eb7c override.scss, v\u00e0 ghi \u0111\u00e8 c\u00e1c bi\u1ebfn Sass ho\u1eb7c CSS Variables ngay <strong>tr\u01b0\u1edbc khi import Bootstrap<\/strong>. C\u00e1ch l\u00e0m n\u00e0y gi\u00fap b\u1ea1n d\u1ec5 ki\u1ec3m so\u00e1t c\u00e1c thay \u0111\u1ed5i v\u00e0 thu\u1eadn ti\u1ec7n cho vi\u1ec7c b\u1ea3o tr\u00ec sau n\u00e0y.<\/li>\n\n\n\n<li><strong>N\u1ebfu d\u00f9ng b\u1ea3n CSS build s\u1eb5n<\/strong> (qua CDN ho\u1eb7c file .css), b\u1ea1n n\u00ean t\u1ea1o file custom.css v\u00e0 import <strong>sau Bootstrap<\/strong>, \u0111\u1ea3m b\u1ea3o nguy\u00ean t\u1eafc cascade c\u1ee7a CSS ho\u1ea1t \u0111\u1ed9ng ch\u00ednh x\u00e1c.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-c\u1ee7a-bootstrap-co-lam-ch\u1eadm-trang-web-khong\"><strong>CSS c\u1ee7a Bootstrap c\u00f3 l\u00e0m ch\u1eadm trang web kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Vi\u1ec7c s\u1eed d\u1ee5ng Bootstrap b\u1ea3n \u0111\u1ea7y \u0111\u1ee7 c\u00f3 th\u1ec3 khi\u1ebfn file CSS kh\u00e1 l\u1edbn, nh\u1ea5t l\u00e0 khi b\u1ea1n ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t ph\u1ea7n nh\u1ecf c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a framework. N\u1ebfu kh\u00f4ng t\u1ed1i \u01b0u, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang, \u0111\u1eb7c bi\u1ec7t tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng ho\u1eb7c m\u1ea1ng ch\u1eadm.<\/p>\n\n\n\n<p>\u0110\u1ec3 c\u1ea3i thi\u1ec7n, b\u1ea1n n\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ch\u1ec9 import c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea7n thi\u1ebft khi d\u00f9ng b\u1ea3n Sass<\/li>\n\n\n\n<li>Ho\u1eb7c s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 nh\u01b0 PurgeCSS \u0111\u1ec3 lo\u1ea1i b\u1ecf nh\u1eefng class kh\u00f4ng d\u00f9ng tr\u01b0\u1edbc khi \u0111\u01b0a l\u00ean production<\/li>\n<\/ul>\n\n\n\n<p>C\u00e1ch n\u00e0y s\u1ebd gi\u00fap b\u1ea1n t\u1ed1i \u01b0u h\u00f3a dung l\u01b0\u1ee3ng file CSS v\u00e0 c\u1ea3i thi\u1ec7n hi\u1ec7u n\u0103ng cho trang web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nen-dung-sass-hay-css-thu\u1ea7n-khi-lam-vi\u1ec7c-v\u1edbi-bootstrap\"><strong>N\u00ean d\u00f9ng Sass hay CSS thu\u1ea7n khi l\u00e0m vi\u1ec7c v\u1edbi Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Tu\u1ef3 theo quy m\u00f4 v\u00e0 nhu c\u1ea7u c\u1ee7a d\u1ef1 \u00e1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N\u1ebfu b\u1ea1n l\u00e0m m\u1ed9t d\u1ef1 \u00e1n nh\u1ecf, kh\u00f4ng c\u1ea7n tu\u1ef3 ch\u1ec9nh nhi\u1ec1u v\u1ec1 giao di\u1ec7n, th\u00ec vi\u1ec7c d\u00f9ng CSS thu\u1ea7n (qua CDN ho\u1eb7c file .css) s\u1ebd gi\u00fap ti\u1ebft ki\u1ec7m th\u1eddi gian v\u00e0 d\u1ec5 tri\u1ec3n khai.<\/li>\n\n\n\n<li>Ng\u01b0\u1ee3c l\u1ea1i, n\u1ebfu d\u1ef1 \u00e1n c\u00f3 y\u00eau c\u1ea7u v\u1ec1 tu\u1ef3 ch\u1ec9nh giao di\u1ec7n s\u00e2u h\u01a1n, c\u1ea7n \u0111\u1ed3ng b\u1ed9 theo b\u1ed9 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u, ho\u1eb7c mu\u1ed1n t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng CSS, th\u00ec b\u1ea1n n\u00ean ch\u1ecdn b\u1ea3n Sass c\u1ee7a Bootstrap. S\u1eed d\u1ee5ng Sass gi\u00fap b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i bi\u1ebfn to\u00e0n c\u1ee5c, lo\u1ea1i b\u1edbt nh\u1eefng ph\u1ea7n kh\u00f4ng d\u00f9ng \u0111\u1ebfn, \u0111\u1ed3ng th\u1eddi d\u1ec5 d\u00e0ng m\u1edf r\u1ed9ng v\u00e0 ki\u1ec3m so\u00e1t c\u1ea5u tr\u00fac CSS trong to\u00e0n b\u1ed9 d\u1ef1 \u00e1n.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-c\u1ea7n-ph\u1ea3i-n\u1eafm-v\u1eefng-html-va-css-tr\u01b0\u1edbc-khi-h\u1ecdc-bootstrap-khong\"><strong>C\u00f3 c\u1ea7n ph\u1ea3i n\u1eafm v\u1eefng HTML v\u00e0 CSS tr\u01b0\u1edbc khi h\u1ecdc Bootstrap kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i gi\u1ecfi to\u00e0n b\u1ed9 HTM\/CSS m\u1edbi b\u1eaft \u0111\u1ea7u h\u1ecdc Bootstrap. Ch\u1ec9 c\u1ea7n b\u1ea1n \u0111\u00e3 c\u00f3 ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n nh\u01b0 hi\u1ec3u c\u1ea5u tr\u00fac th\u1ebb HTML, bi\u1ebft c\u00e1ch vi\u1ebft class v\u00e0 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u01a1 b\u1ea3n nh\u01b0 margin, padding, m\u00e0u s\u1eafc, font, layout l\u00e0 ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 h\u1ecdc v\u00e0 \u00e1p d\u1ee5ng Bootstrap hi\u1ec7u qu\u1ea3 r\u1ed3i.<\/p>\n\n\n\n<p>Th\u1eadm ch\u00ed, vi\u1ec7c h\u1ecdc Bootstrap s\u1ebd gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n c\u00e1ch CSS ho\u1ea1t \u0111\u1ed9ng, nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng c\u00e1c class c\u00f3 s\u1eb5n \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf r\u1ea5t h\u1ee3p l\u00fd. Qua \u0111\u00f3, b\u1ea1n s\u1ebd r\u00e8n th\u00eam t\u01b0 duy v\u1ec1 thi\u1ebft k\u1ebf giao di\u1ec7n v\u00e0 qu\u1ea3n l\u00fd CSS t\u1ed1t h\u01a1n.<\/p>\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>CSS \u0111\u00f3ng vai tr\u00f2 c\u1ed1t l\u00f5i gi\u00fap Bootstrap tr\u1edf th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd trong vi\u1ec7c x\u00e2y d\u1ef1ng giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i. V\u1edbi h\u1ec7 th\u1ed1ng l\u1edbp CSS ti\u1ec7n \u00edch, c\u00e1c th\u00e0nh ph\u1ea7n UI \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n v\u00e0 kh\u1ea3 n\u0103ng tu\u1ef3 ch\u1ec9nh linh ho\u1ea1t th\u00f4ng qua CSS Variables ho\u1eb7c Sass, Bootstrap gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean ti\u1ebft ki\u1ec7m \u0111\u00e1ng k\u1ec3 th\u1eddi gian ph\u00e1t tri\u1ec3n, \u0111\u1ed3ng th\u1eddi \u0111\u1ea3m b\u1ea3o giao di\u1ec7n lu\u00f4n \u0111\u1ed3ng nh\u1ea5t, responsive v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 c\u00f3 c\u00e1i nh\u00ecn to\u00e0n di\u1ec7n h\u01a1n v\u1ec1 CSS trong Bootstrap, t\u1eeb c\u00e1ch ph\u00e2n lo\u1ea1i nh\u00f3m l\u1edbp, tu\u1ef3 ch\u1ec9nh giao di\u1ec7n cho \u0111\u1ebfn c\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u ho\u00e1 v\u00e0 qu\u1ea3n l\u00fd CSS hi\u1ec7u qu\u1ea3.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, CSS l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t gi\u00fap t\u1ea1o n\u00ean giao di\u1ec7n \u0111\u1eb9p m\u1eaft v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t. V\u1edbi Bootstrap, vi\u1ec7c \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n r\u1ea5t nhi\u1ec1u nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng c\u00e1c l\u1edbp (class) \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n, linh ho\u1ea1t v\u00e0 [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":89312,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-88599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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 CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap - ITviec Blog<\/title>\n<meta name=\"description\" content=\"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 Bootstrap CSS: CSS trong Bootstrap kh\u00e1c g\u00ec v\u1edbi CSS thu\u1ea7n, ph\u00e2n lo\u1ea1i nh\u00f3m, c\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh, qu\u1ea3n l\u00fd v\u00e0 t\u1ed1i \u01b0u.\" \/>\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-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, CSS l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t gi\u00fap t\u1ea1o n\u00ean giao di\u1ec7n \u0111\u1eb9p m\u1eaft v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t. V\u1edbi Bootstrap, vi\u1ec7c \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" \/>\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-07-10T09:18:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T09:18:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\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=\"27 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap - ITviec Blog","description":"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 Bootstrap CSS: CSS trong Bootstrap kh\u00e1c g\u00ec v\u1edbi CSS thu\u1ea7n, ph\u00e2n lo\u1ea1i nh\u00f3m, c\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh, qu\u1ea3n l\u00fd v\u00e0 t\u1ed1i \u01b0u.","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-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap","og_description":"Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, CSS l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t gi\u00fap t\u1ea1o n\u00ean giao di\u1ec7n \u0111\u1eb9p m\u1eaft v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t. V\u1edbi Bootstrap, vi\u1ec7c \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-10T09:18:28+00:00","article_modified_time":"2025-07-10T09:18:32+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-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":"27 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap","datePublished":"2025-07-10T09:18:28+00:00","dateModified":"2025-07-10T09:18:32+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/"},"wordCount":6254,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-bootstrap-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/","name":"Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-bootstrap-scaled.png","datePublished":"2025-07-10T09:18:28+00:00","dateModified":"2025-07-10T09:18:32+00:00","description":"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 Bootstrap CSS: CSS trong Bootstrap kh\u00e1c g\u00ec v\u1edbi CSS thu\u1ea7n, ph\u00e2n lo\u1ea1i nh\u00f3m, c\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh, qu\u1ea3n l\u00fd v\u00e0 t\u1ed1i \u01b0u.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/css-trong-bootstrap-scaled.png","width":800,"height":421,"caption":"css trong bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/#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 CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi 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\/88599","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=88599"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88599\/revisions"}],"predecessor-version":[{"id":89313,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88599\/revisions\/89313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/89312"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=88599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=88599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=88599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}