{"id":92447,"date":"2025-11-30T22:29:30","date_gmt":"2025-11-30T15:29:30","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=92447"},"modified":"2025-12-02T09:47:11","modified_gmt":"2025-12-02T02:47:11","slug":"lo-trinh-tu-hoc-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/","title":{"rendered":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#Bootstrap_la_gi_Ai_nen_hoc_Bootstrap\" >Bootstrap l\u00e0 g\u00ec? Ai n\u00ean h\u1ecdc Bootstrap?<\/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\/lo-trinh-tu-hoc-bootstrap\/#Huong_dan_cai_dat_Bootstrap\" >H\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t 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\/lo-trinh-tu-hoc-bootstrap\/#Hoc_Bootstrap_buoc_1_Hieu_nhung_khai_niem_quan_trong\" >H\u1ecdc Bootstrap b\u01b0\u1edbc 1: Hi\u1ec3u nh\u1eefng kh\u00e1i ni\u1ec7m quan tr\u1ecdng<\/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\/lo-trinh-tu-hoc-bootstrap\/#Hoc_Bootstrap_buoc_2_Utilities_co_ban_Text_Color_Border_Margin_Padding\" >H\u1ecdc Bootstrap b\u01b0\u1edbc 2: Utilities c\u01a1 b\u1ea3n (Text, Color, Border, Margin, Padding)<\/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\/lo-trinh-tu-hoc-bootstrap\/#Hoc_Bootstrap_buoc_3_Cac_thanh_phan_co_ban_Components\" >H\u1ecdc Bootstrap b\u01b0\u1edbc 3: C\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n (Components)<\/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\/lo-trinh-tu-hoc-bootstrap\/#Navbar_Thanh_dieu_huong\" >Navbar (Thanh \u0111i\u1ec1u h\u01b0\u1edbng)<\/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\/lo-trinh-tu-hoc-bootstrap\/#Footer_Chan_trang\" >Footer (Ch\u00e2n trang)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#Hoc_Bootstrap_buoc_4_Cac_thanh_phan_nang_cao\" >H\u1ecdc Bootstrap b\u01b0\u1edbc 4: C\u00e1c th\u00e0nh ph\u1ea7n n\u00e2ng cao<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#Cac_bi_kip_de_hoc_Bootstrap_hieu_qua\" >C\u00e1c b\u00ed k\u00edp \u0111\u1ec3 h\u1ecdc Bootstrap hi\u1ec7u qu\u1ea3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#Cac_cau_hoi_thuong_gap_ve_lo_trinh_hoc_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 l\u1ed9 tr\u00ecnh h\u1ecdc Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Bootstrap v\u1eabn l\u00e0 \u201cb\u1ed9 khung\u201d \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 b\u1ea1n d\u1ef1ng layout nhanh, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n, v\u00e0 \u0111\u1ea3m b\u1ea3o responsive tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb. D\u00f9 c\u00f3 nhi\u1ec1u l\u1ef1a ch\u1ecdn m\u1edbi nh\u01b0 Tailwind hay Chakra UI, Bootstrap v\u1eabn \u0111\u01b0\u1ee3c \u01b0a chu\u1ed9ng nh\u1edd d\u1ec5 h\u1ecdc, \u1ed5n \u0111\u1ecbnh v\u00e0 ph\u00f9 h\u1ee3p cho c\u1ea3 ng\u01b0\u1eddi m\u1edbi l\u1eabn d\u1ef1 \u00e1n th\u1ef1c t\u1ebf.<\/em><\/strong><\/p>\n\n\n\n<p>B\u00e0i n\u00e0y gi\u00fap b\u1ea1n h\u1ecdc Bootstrap theo c\u00e1c ch\u1ee7 \u0111\u1ec1 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n c\u1ee7a Bootstrap &amp; so s\u00e1nh v\u1edbi Tailwind<\/li>\n\n\n\n<li>C\u00e1ch c\u00e0i \u0111\u1eb7t nhanh b\u1eb1ng CDN (v\u00e0 t\u00f9y ch\u1ecdn n\u00e2ng cao)<\/li>\n\n\n\n<li>Nh\u1eefng kh\u00e1i ni\u1ec7m n\u1ec1n t\u1ea3ng: grid system, flexbox, responsive, utilities, icons<\/li>\n\n\n\n<li>C\u00e1c components c\u01a1 b\u1ea3n &amp; n\u00e2ng cao hay d\u00f9ng nh\u1ea5t<\/li>\n\n\n\n<li>Tips h\u1ecdc nhanh + b\u00e0i t\u1eadp \u0111\u1ec3 th\u1ef1c h\u00e0nh<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bootstrap-la-gi-ai-nen-h\u1ecdc-bootstrap\"><span class=\"ez-toc-section\" id=\"Bootstrap_la_gi_Ai_nen_hoc_Bootstrap\"><\/span><strong>Bootstrap l\u00e0 g\u00ec? Ai n\u00ean h\u1ecdc Bootstrap?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn, gi\u00fap x\u00e2y d\u1ef1ng c\u00e1c trang web responsive v\u00e0 t\u1ed1i \u01b0u h\u00f3a cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng. N\u00f3 cung c\u1ea5p s\u1eb5n c\u00e1c th\u00e0nh ph\u1ea7n CSS, JavaScript v\u00e0 c\u00e1c l\u1edbp ti\u1ec7n \u00edch, cho ph\u00e9p t\u1ea1o giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng hi\u1ec7n \u0111\u1ea1i v\u00e0 \u0111\u1ed3ng nh\u1ea5t m\u1ed9t c\u00e1ch nhanh ch\u00f3ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>H\u1ec7 th\u1ed1ng l\u01b0\u1edbi responsive linh ho\u1ea1t, h\u1ed7 tr\u1ee3 thi\u1ebft k\u1ebf \u01b0u ti\u00ean tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/li>\n\n\n\n<li>Cung c\u1ea5p \u0111a d\u1ea1ng c\u00e1c th\u00e0nh ph\u1ea7n UI nh\u01b0 n\u00fat b\u1ea5m, modal v\u00e0 thanh \u0111i\u1ec1u h\u01b0\u1edbng<\/li>\n\n\n\n<li>T\u00edch h\u1ee3p s\u1eb5n c\u00e1c ti\u1ec7n \u00edch gi\u00fap t\u1ed1i \u01b0u ki\u1ec3u ch\u1eef, kho\u1ea3ng c\u00e1ch v\u00e0 kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb responsive<\/li>\n\n\n\n<li>Cho ph\u00e9p t\u00f9y ch\u1ec9nh linh ho\u1ea1t th\u00f4ng qua c\u00e1c bi\u1ebfn Sass v\u00e0 c\u1ea5u h\u00ecnh c\u1ee7a Bootstrap<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam ph\u1ea7n gi\u1edbi thi\u1ec7u chi ti\u1ebft v\u1ec1 <\/em><a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Bootstrap l\u00e0 g\u00ec?<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ai-nen-h\u1ecdc-bootstrap\"><strong>Ai n\u00ean h\u1ecdc Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Vi\u1ec7c h\u1ecdc Bootstrap mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch n\u1ebfu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u1ea1n mu\u1ed1n ti\u1ebft ki\u1ec7m th\u1eddi gian khi d\u1ef1ng layout ho\u1eb7c t\u1ea1o c\u00e1c th\u00e0nh ph\u1ea7n UI ph\u1ed5 bi\u1ebfn<\/li>\n\n\n\n<li>B\u1ea1n l\u00e0 ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u h\u1ecdc front-end v\u00ec Bootstrap d\u1ec5 ti\u1ebfp c\u1eadn<\/li>\n\n\n\n<li>B\u1ea1n mu\u1ed1n d\u00f9ng framework t\u01b0\u01a1ng th\u00edch cao v\u1edbi c\u00e1c framework nh\u01b0 React, Vue, ho\u1eb7c Laravel<\/li>\n\n\n\n<li>B\u1ea1n mu\u1ed1n h\u1ecdc m\u1ed9t framework c\u00f3 c\u1ed9ng \u0111\u1ed3ng l\u1edbn v\u00e0 t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c r\u00f5 r\u00e0ng, gi\u00fap vi\u1ec7c h\u1ecdc d\u1ec5 d\u00e0ng h\u01a1n<\/li>\n\n\n\n<li>B\u1ea1n mu\u1ed1n c\u00f3 l\u1ee3i th\u1ebf khi xin vi\u1ec7c, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c d\u1ef1 \u00e1n startup ho\u1eb7c h\u1ec7 th\u1ed1ng qu\u1ea3n tr\u1ecb n\u1ed9i b\u1ed9, v\u1eabn s\u1eed d\u1ee5ng Bootstrap v\u00ec t\u1ed1c \u0111\u1ed9 tri\u1ec3n khai nhanh v\u00e0 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng d\u1ec5 d\u00e0ng<\/li>\n\n\n\n<li>B\u1ea1n mu\u1ed1n n\u1eafm ch\u1eafc n\u1ec1n t\u1ea3ng HTML\/CSS v\u00e0 r\u00fat ng\u1eafn th\u1eddi gian h\u1ecdc c\u00e1c framework UI hi\u1ec7n \u0111\u1ea1i sau n\u00e0y<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-cai-d\u1eb7t-bootstrap\"><span class=\"ez-toc-section\" id=\"Huong_dan_cai_dat_Bootstrap\"><\/span><strong>H\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 b\u1eaft \u0111\u1ea7u v\u1edbi Bootstrap, tu\u1ef3 v\u00e0o m\u1ee5c ti\u00eau h\u1ecdc hay d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng c\u00e1ch ph\u1ed5 bi\u1ebfn nh\u1ea5t:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cai-d\u1eb7t-nhanh-b\u1eb1ng-cdn\"><strong>C\u00e0i \u0111\u1eb7t nhanh b\u1eb1ng CDN<\/strong><\/h3>\n\n\n\n<p>CDN (Content Delivery Network) gi\u00fap b\u1ea1n t\u00edch h\u1ee3p Bootstrap nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea3i v\u1ec1 ho\u1eb7c c\u00e0i \u0111\u1eb7t. Ch\u1ec9 c\u1ea7n th\u00eam c\u00e1c li\u00ean k\u1ebft sau v\u00e0o ph\u1ea7n &lt;head&gt; v\u00e0 tr\u01b0\u1edbc th\u1ebb \u0111\u00f3ng &lt;\/body&gt; c\u1ee7a t\u1eadp tin HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Bootstrap 5 CSS --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\"&gt;\n\n&lt;!-- Bootstrap 5 Bundle (g\u1ed3m Popper) - \u0111\u1eb7t tr\u01b0\u1edbc &lt;\/body&gt; --&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem chi ti\u1ebft h\u01b0\u1edbng d\u1eabn t\u1ea1i <\/em><a href=\"https:\/\/itviec.com\/blog\/bootstrap-cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Bootstrap CDN: C\u00e1ch t\u00edch h\u1ee3p nhanh Bootstrap v\u00e0o d\u1ef1 \u00e1n<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cai-d\u1eb7t-b\u1eb1ng-npm-ho\u1eb7c-yarn\"><strong>C\u00e0i \u0111\u1eb7t b\u1eb1ng npm ho\u1eb7c Yarn<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111ang ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng b\u1eb1ng <strong>Node.js<\/strong>, c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t Bootstrap th\u00f4ng qua <strong>npm<\/strong> v\u1edbi l\u1ec7nh sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install bootstrap<\/code><\/pre>\n\n\n\n<p>Sau khi c\u00e0i \u0111\u1eb7t, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Bootstrap b\u1eb1ng c\u00e1ch import:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>require('bootstrap');<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng <strong>Yarn<\/strong> thay v\u00ec <strong>Npm<\/strong>, c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t Bootstrap b\u1eb1ng l\u1ec7nh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add bootstrap<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-cai-d\u1eb7t-trong-framework-khac\"><strong>3. C\u00e0i \u0111\u1eb7t trong framework kh\u00e1c<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i 2 c\u00e1ch c\u00e0i \u0111\u1eb7t b\u00ean tr\u00ean, Bootstrap c\u00f2n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u00e0i \u0111\u1eb7t th\u00f4ng qua c\u00e1c framework, n\u1ec1n t\u1ea3ng nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ruby on Rails: gem \u2018Bootstrap\u2019<\/li>\n\n\n\n<li>PHP\/Laravel: composer require twbs\/bootstrap<\/li>\n\n\n\n<li>.Net: Install-Package bootstrap<\/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 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft cho t\u1eebng m\u00f4i tr\u01b0\u1eddng t\u1ea1i b\u00e0i: <\/em><a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/#Huong_dan_cai_dat_Bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>H\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t Bootstrap<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ecdc-bootstrap-b\u01b0\u1edbc-1-hi\u1ec3u-nh\u1eefng-khai-ni\u1ec7m-quan-tr\u1ecdng\"><span class=\"ez-toc-section\" id=\"Hoc_Bootstrap_buoc_1_Hieu_nhung_khai_niem_quan_trong\"><\/span><strong>H\u1ecdc Bootstrap b\u01b0\u1edbc 1: Hi\u1ec3u nh\u1eefng kh\u00e1i ni\u1ec7m quan tr\u1ecdng<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nh\u1eefng kh\u00e1i ni\u1ec7m n\u1ec1n t\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y l\u00e0 \u201cx\u01b0\u01a1ng s\u1ed1ng\u201d c\u1ee7a Bootstrap, gi\u00fap b\u1ea1n hi\u1ec3u c\u00e1ch b\u1ed1 c\u1ee5c, c\u0103n ch\u1ec9nh v\u00e0 x\u00e2y d\u1ef1ng giao di\u1ec7n web chu\u1ea9n m\u1ef1c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-system\"><strong>Grid system<\/strong><\/h3>\n\n\n\n<p>Grid system l\u00e0 h\u1ec7 th\u1ed1ng chia c\u1ed9t linh ho\u1ea1t gi\u00fap b\u1ea1n t\u1ea1o b\u1ed1 c\u1ee5c responsive ch\u1ec9 b\u1eb1ng class HTML m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS. Bootstrap chia trang web th\u00e0nh 12 c\u1ed9t, cho ph\u00e9p b\u1ea1n tu\u1ef3 \u00fd chia t\u1ef7 l\u1ec7 nh\u01b0 .col-6, .col-md-4, .col-lg-3\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"153\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29.png\" alt=\"\" class=\"wp-image-92448\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29.png 793w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29-640x123.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29-200x39.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-29-768x148.png 768w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/figure>\n\n\n\n<p>Nh\u1edd grid, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng s\u1eafp x\u1ebfp n\u1ed9i dung cho m\u1ecdi m\u00e0n h\u00ecnh, t\u1eeb \u0111i\u1ec7n tho\u1ea1i \u0111\u1ebfn desktop.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem h\u01b0\u1edbng d\u1eabn chi ti\u1ebft: <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flexbox\"><strong>Flexbox<\/strong><\/h3>\n\n\n\n<p>Flexbox (vi\u1ebft t\u1eaft c\u1ee7a Flexible Box Layout) l\u00e0 m\u00f4 h\u00ecnh b\u1ed1 c\u1ee5c hi\u1ec7n \u0111\u1ea1i gi\u00fap s\u1eafp x\u1ebfp, c\u0103n ch\u1ec9nh v\u00e0 ph\u00e2n chia kh\u00f4ng gian gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong c\u00f9ng m\u1ed9t container m\u1ed9t c\u00e1ch linh ho\u1ea1t.<\/p>\n\n\n\n<p>Trong Bootstrap, Flexbox \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n th\u00f4ng qua h\u1ec7 th\u1ed1ng utility classes, gi\u00fap b\u1ea1n thao t\u00e1c nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng. V\u1edbi v\u00e0i class \u0111\u01a1n gi\u1ea3n, b\u1ea1n c\u00f3 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bi\u1ebfn ph\u1ea7n t\u1eed th\u00e0nh flex container b\u1eb1ng <strong>.d-flex<\/strong> ho\u1eb7c <strong>.d-inline-flex<\/strong><\/li>\n\n\n\n<li>C\u0103n ch\u1ec9nh n\u1ed9i dung theo tr\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5 v\u1edbi <strong>.justify-content-*<\/strong> v\u00e0 <strong>.align-items-*<\/strong><\/li>\n\n\n\n<li>Ki\u1ec3m so\u00e1t th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb (<strong>.order-*<\/strong>) ho\u1eb7c kh\u1ea3 n\u0103ng co gi\u00e3n linh ho\u1ea1t (<strong>.flex-grow-*, .flex-shrink-*<\/strong>)<\/li>\n\n\n\n<li>D\u1ec5 d\u00e0ng \u00e1p d\u1ee5ng responsive layout theo breakpoint nh\u01b0 <strong>.d-flex, .flex-row, .flex-column<\/strong> tr\u00ean <strong>md, lg, xl<\/strong><\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh v\u00ed d\u1ee5 v\u1ec1 Flex trong Bootstrap<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"93\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30.png\" alt=\"\" class=\"wp-image-92449\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30-300x35.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30-640x75.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30-200x23.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-30-768x90.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-design\"><strong>Responsive design<\/strong><\/h3>\n\n\n\n<p>Responsive design gi\u00fap giao di\u1ec7n hi\u1ec3n th\u1ecb t\u1ed1i \u01b0u tr\u00ean m\u1ecdi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh t\u1eeb \u0111i\u1ec7n tho\u1ea1i, m\u00e1y t\u00ednh b\u1ea3ng \u0111\u1ebfn desktop. Bootstrap \u00e1p d\u1ee5ng tri\u1ebft l\u00fd <strong>mobile-first<\/strong>, ngh\u0129a l\u00e0 \u01b0u ti\u00ean thi\u1ebft k\u1ebf cho m\u00e0n h\u00ecnh nh\u1ecf tr\u01b0\u1edbc r\u1ed3i m\u1edf r\u1ed9ng d\u1ea7n cho m\u00e0n h\u00ecnh l\u1edbn th\u00f4ng qua c\u00e1c breakpoint (<strong>sm, md, lg, xl, xxl<\/strong>).<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c breakpoint m\u1eb7c \u0111\u1ecbnh trong Bootstrap:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>T\u00ean g\u1ecdi<\/strong><\/td><td><strong>K\u00fd hi\u1ec7u<\/strong><\/td><td><strong>K\u00edch th\u01b0\u1edbc t\u1ed1i thi\u1ec3u<\/strong><\/td><\/tr><tr><td>Extra small (r\u1ea5t nh\u1ecf)<\/td><td>xs<\/td><td>&lt;576px (t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng, kh\u00f4ng c\u1ea7n khai b\u00e1o)<\/td><\/tr><tr><td>Small (nh\u1ecf)<\/td><td>sm<\/td><td>\u2265576px<\/td><\/tr><tr><td>Medium (v\u1eeba)<\/td><td>md<\/td><td>\u2265768px<\/td><\/tr><tr><td>Large (l\u1edbn)<\/td><td>lg<\/td><td>\u2265992px<\/td><\/tr><tr><td>Extra large (r\u1ea5t l\u1edbn)<\/td><td>xl<\/td><td>\u22651200px<\/td><\/tr><tr><td>Extra extra large<\/td><td>xxl<\/td><td>\u22651400px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>M\u1ed9t s\u1ed1 ti\u1ec7n \u00edch responsive ph\u1ed5 bi\u1ebfn trong Bootstrap nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1ea8n\/hi\u1ec7n ph\u1ea7n t\u1eed: <strong>.d-none, .d-md-block, .d-lg-flex<\/strong><\/li>\n\n\n\n<li>Thay \u0111\u1ed5i h\u01b0\u1edbng flex: <strong>.flex-column, .flex-md-row<\/strong><\/li>\n\n\n\n<li>\u0110i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch: <strong>.mt-3, .mt-md-0<\/strong><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam b\u00e0i h\u01b0\u1edbng d\u1eabn chi ti\u1ebft <\/em><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Responsive trong Bootstrap<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ecdc-bootstrap-b\u01b0\u1edbc-2-utilities-c\u01a1-b\u1ea3n-text-color-border-margin-padding\"><span class=\"ez-toc-section\" id=\"Hoc_Bootstrap_buoc_2_Utilities_co_ban_Text_Color_Border_Margin_Padding\"><\/span><strong>H\u1ecdc Bootstrap b\u01b0\u1edbc 2: Utilities c\u01a1 b\u1ea3n (Text, Color, Border, Margin, Padding)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Utilities l\u00e0 nh\u00f3m class nh\u1ecf g\u1ecdn gi\u00fap b\u1ea1n tinh ch\u1ec9nh giao di\u1ec7n nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS ri\u00eang. Ch\u00fang ki\u1ec3m so\u00e1t h\u1ea7u h\u1ebft c\u00e1c y\u1ebfu t\u1ed1 giao di\u1ec7n nh\u01b0 v\u0103n b\u1ea3n, m\u00e0u s\u1eafc, kho\u1ea3ng c\u00e1ch, vi\u1ec1n, hi\u1ec3n th\u1ecb, v.v.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng nh\u00f3m utilities c\u01a1 b\u1ea3n m\u00e0 b\u1ea1n n\u00ean n\u1eafm v\u1eefng:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-text-d\u1ecbnh-d\u1ea1ng-van-b\u1ea3n\"><strong>1. Text (\u0110\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n)<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p nhi\u1ec1u class \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n nh\u01b0 c\u0103n l\u1ec1, in \u0111\u1eadm, vi\u1ebft hoa ho\u1eb7c thay \u0111\u1ed5i m\u00e0u ch\u1eef.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 class th\u01b0\u1eddng d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u0103n l\u1ec1 tr\u00e1i, gi\u1eefa, ph\u1ea3i: <strong>.text-start, .text-center, .text-end<\/strong><\/li>\n\n\n\n<li>\u0110\u1ed9 \u0111\u1eadm ch\u1eef: <strong>.fw-bold, .fw-light<\/strong><\/li>\n\n\n\n<li>\u0110\u1ecbnh d\u1ea1ng ch\u1eef hoa\/th\u01b0\u1eddng: <strong>.text-uppercase, .text-lowercase, .text-capitalize<\/strong><\/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 <em>class<\/em>=\"text-center fw-bold text-uppercase\"&gt;V\u0103n b\u1ea3n gi\u1eefa, in \u0111\u1eadm v\u00e0 vi\u1ebft hoa&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"68\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-31.png\" alt=\"\" class=\"wp-image-92450\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-31.png 529w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-31-300x39.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-31-200x26.png 200w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/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 <a href=\"https:\/\/itviec.com\/blog\/text-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">T<strong>ext 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<h3 class=\"wp-block-heading\" id=\"h-2-color-mau-s\u1eafc\"><strong>2.\u00a0Color (M\u00e0u s\u1eafc)<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 h\u1ec7 th\u1ed1ng m\u00e0u s\u1eafc chu\u1ea9n d\u1ef1a tr\u00ean theme color bao g\u1ed3m:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>T\u00ean ch\u1ee7 \u0111\u1ec1<\/strong><\/td><td><strong>M\u00e0u s\u1eafc hi\u1ec3n th\u1ecb<\/strong><\/td><td><strong>\u00dd ngh\u0129a<\/strong><\/td><\/tr><tr><td><strong>primary<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"115\" height=\"44\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAAA2CAYAAAD3TWpUAAABZ0lEQVR4AeySQQoDQQgEh3w7j99c9j6Cwba1AmEvDrZd9Tnf5+FPBxEHPocfDQQbQJZgUYydgyxYEG4AWcJVMYgsOBBuAFnCVTE4QhYw1jSALDU9j9iCLCMw1hyBLDU9j9iCLCMw1hyBLDU9j9iCLCMw1hyBLDU937cYTCCLAaQuEZGlCwmDHMhiAKlLRGTpQsIgB7IYQOoSEVm6kDDIgSwGkLpEvMvSJSk55A0gixyBTwBk8WElT4oscgQ+AZDFh5U8KbLIEfgEQBYfVvKkS2SR9zwiALKMwFhzBLLU9DxiC7KMwFhzBLLU9DxiC7KMwFhzBLLU9DxiC7L4YJQnRRY5Ap8AyOLDSp4UWeQIfAIgiw8reVJkkSPwCYAsPqzkSZFFjsAnwD9k8bmWpKkGkCVV367HyLKLd+paZEnVt+sxsuzinboWWVL17XqMLLt4p65Flrc+PvcGkOXeERNvA8jyFsHn3sAPAAD\/\/3\/\/ZGAAAAAGSURBVAMA+xBYLyKQs70AAAAASUVORK5CYII=\"><\/td><td>M\u00e0u ch\u00ednh (primary color) \u0111\u1ea1i di\u1ec7n cho th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c h\u00e0nh \u0111\u1ed9ng ch\u00ednh trong giao di\u1ec7n.<br>V\u00ed d\u1ee5: N\u00fat ch\u00ednh \u201c\u0110\u0103ng k\u00fd\u201d, \u201cMua ngay\u201d, link n\u1ed5i b\u1eadt, CTA (Call to Action)<\/td><\/tr><tr><td><strong>secondary<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"118\" height=\"54\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAA2CAYAAAAS\/219AAABQUlEQVR4AezTMQrDMBBEUePzpk2ZsyflNoagqf4OPxAQRguz89D9en++\/vs6uC9\/lQ0IW8l6XcIKW9pA6Vq+WGFLGyhdyxcrbGkD2Vr4KV8snigLKGzWG35KWDxRFlDYrDf8lLB4oiygsFlv+Clh8URZQGGz3vBTUFh8b\/iAwuKJsoDCZr3hp4TFE2UBhc16w08JiyfKAgqb9YafEhZPlAUUNusNOjWxhJ0uqk7CVnHOMsJOF1UnYas4Zxlhp4uqk7BVnLOMsNNF1UnYKs5ZRtjp4v9p0Q1hF2GdRBX2pK1Fd4VdhHUSVdiTthbdFXYR1klUYU\/aWnRX2EVYJ1GFPWlr0V0U7KLe8FGFxRNlAYXNesNPCYsnygIKm\/WGnxIWT5QFFDbrDT8lLJ4oCyhs1htq6imMsE+tFHwTtgDxaYUfAAAA\/\/8qrrzyAAAABklEQVQDAKY5F1p75c\/UAAAAAElFTkSuQmCC\"><\/td><td>D\u00f9ng cho nh\u1eefng ph\u1ea7n kh\u00f4ng quan tr\u1ecdng b\u1eb1ng m\u00e0u ch\u00ednh ho\u1eb7c b\u1ed5 tr\u1ee3.<br>V\u00ed d\u1ee5: N\u00fat \u201cHu\u1ef7\u201d, \u201cB\u1ecf qua\u201d, Label ph\u1ee5, m\u00f4 t\u1ea3 tr\u1ea1ng th\u00e1i nh\u1ecf<\/td><\/tr><tr><td><strong>success<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"54\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA2CAYAAAAMNl3OAAAA\/0lEQVR4AezTsQnDQBAFUaFq3IhrdZk2bLwYlL4bgxVcNv+x9+vz\/vZ3N7ivfvQCAdO81xVwwPgCeF4XHDC+AJ7XBQdMLnBMVBeMUwccML4AntcFB4wvgOd1wQHjC+B5XfBZwHjtgXldMI4ecMD4AnheFxwwvgCe1wUHjC+A53XBA+x+AnZtpyzgmcH9BOzaTlnAM4P7Cdi1nbKAZwb3E7BrO2UBzwzu5z+w231MWcA4dcAB4wvgeV1wwPgCeF4XHDC+AJ7XBW\/A0FvAEOaWEvC2CvQWMIS5pQS8rQK9BQxhbikBb6tAbwFDmFtKwNsq0NsjYKj7mJSAceqAceAfAAAA\/\/9tYz0tAAAABklEQVQDANox+VUEXUK7AAAAAElFTkSuQmCC\"><\/td><td>B\u00e1o hi\u1ec7u \u0111i\u1ec1u g\u00ec \u0111\u00f3 di\u1ec5n ra \u0111\u00fang ho\u1eb7c th\u00e0nh c\u00f4ng.<br>V\u00ed d\u1ee5: Alert th\u00f4ng b\u00e1o g\u1eedi form th\u00e0nh c\u00f4ng, Badge x\u00e1c nh\u1eadn (\u201c\u0110\u00e3 thanh to\u00e1n\u201d, \u201cH\u1ee3p l\u1ec7\u201d), Icon check<\/td><\/tr><tr><td><strong>danger<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"54\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA2CAYAAAAMNl3OAAABAElEQVR4AezTsQnDQBAFUaGi3IH7b8C92LDxYlD6bgxWcNn8x96f1\/vb393gvvrRCwRM815XwAHjC+B5XXDA+AJ4XhccMLnAMVFdME4dcMD4AnheFxwwvgCe1wUHjC+A53XBZwHjtQfmdcE4esAB4wvgeV1wwPgCeF4XHDC+AJ7XBQ+w+wnYtZ2ygGcG9xOwaztlAc8M7idg13bKAp4Z3E\/Aru2UBTwzuJ\/\/wG73MWUB49QBB4wvgOd1wQHjC+B5XXDA+AJ4Xhe8AUNvAUOYW0rA2yrQW8AQ5pYS8LYK9BYwhLmlBLytAr0FDGFuKQFvq0Bvj4Ch7mNSAsapA8aBfwAAAP\/\/9QGyJQAAAAZJREFUAwD4CxjM6SysBQAAAABJRU5ErkJggg==\"><\/td><td>C\u1ea3nh b\u00e1o l\u1ed7i nghi\u00eam tr\u1ecdng, h\u00e0nh \u0111\u1ed9ng x\u00f3a, ho\u1eb7c thao t\u00e1c kh\u00f4ng th\u1ec3 ho\u00e0n t\u00e1c.<br>V\u00ed d\u1ee5: Th\u00f4ng b\u00e1o l\u1ed7i, invalid form, n\u00fat xo\u00e1 t\u00e0i kho\u1ea3n, vi\u1ec1n ho\u1eb7c ch\u1eef b\u00e1o l\u1ed7i<\/td><\/tr><tr><td><strong>warning<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"54\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA2CAYAAAAMNl3OAAAA\/UlEQVR4AezTMQrDQBAEQaHE\/3+SXybDxotBaV0brOCynmLv5\/t5+rsb3Fc\/eoGAad7rCjhgfAE8rwsOGF8Az+uCAyYXOCaqC8apAw4YXwDP64IDxhfA87rggPEF8Lwu+CxgvPbAvC4YRw84YHwBPK8LDhhfAM\/rggPGF8DzuuABdj8Bu7ZTFvDM4H4Cdm2nLOCZwf0E7NpOWcAzg\/sJ2LWdsoBnBvfzH9jtPqYsYJw64IDxBfC8LjhgfAE8rwsOGF8Az+uCN2DoLWAIc0sJeFsFegsYwtxSAt5Wgd4ChjC3lIC3VaC3gCHMLSXgbRXo7RUw1H1MSsA4dcA48A8AAP\/\/hxpcygAAAAZJREFUAwDV1E1MF9WD2gAAAABJRU5ErkJggg==\"><\/td><td>C\u1ea3nh b\u00e1o ng\u01b0\u1eddi d\u00f9ng v\u1ec1 m\u1ed9t \u0111i\u1ec1u c\u1ea7n l\u01b0u \u00fd, ch\u01b0a ph\u1ea3i l\u1ed7i.<br>V\u00ed d\u1ee5: Badge tr\u1ea1ng th\u00e1i \u201cS\u1eafp h\u1ebft h\u1ea1n\u201d, Tooltip ho\u1eb7c form c\u1ea7n ki\u1ec3m tra l\u1ea1i<\/td><\/tr><tr><td><strong>info<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"53\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA1CAYAAACKoi9gAAAA\/ElEQVR4AezTsQnDQBAFUaEu3L6rcHc2bLwYlL4bgxVcNv+x9+v9+fZ3N7ivfvQCAdO81xVwwPgCeF4XHDC+AJ7XBQdMLnBMVBeMUwccML4AntcFB4wvgOd1wQHjC+B5XfBZwHjtgXldMI4ecMD4AnheFxwwvgCe1wUHjC+A53XBA+x+AnZtpyzgmcH9BOzaTlnAM4P7Cdi1nbKAZwb3E7BrO2UBzwzu5z+w231MWcA4dcAB4wvgeV1wwPgCeF4XHDC+AJ7XBW\/A0FvAEOaWEvC2CvQWMIS5pQS8rQK9BQxhbikBb6tAbwFDmFtKwNsq0NsjYKj7mJSAceofAAAA\/\/8eI177AAAABklEQVQDAM4vJeq7zSgHAAAAAElFTkSuQmCC\"><\/td><td>Cung c\u1ea5p th\u00f4ng tin h\u1ed7 tr\u1ee3, trung l\u1eadp, kh\u00f4ng t\u00edch c\u1ef1c hay ti\u00eau c\u1ef1c.<br>V\u00ed d\u1ee5: Alert th\u00f4ng b\u00e1o h\u1ec7 th\u1ed1ng, message t\u1eeb admin, label m\u00f4 t\u1ea3 tr\u1ea1ng th\u00e1i<\/td><\/tr><tr><td><strong>light<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"53\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA1CAYAAACKoi9gAAAA+klEQVR4AezTMQoCQRAF0WXvf2A1Uei4ETZ9U4IbTFb\/0ffr\/fn2dze4r370AgHTvNcVcMD4AnheFxwwvgCe1wUHTC5wTFQXjFMHHDC+AJ7XBQeML4DndcEB4wvgeV3wWcB47YF5XTCOHnDA+AJ4XhccML4AntcFB4wvgOd1wQPsfgJ2bacs4JnB\/QTs2k5ZwDOD+wnYtZ2ygGcG9xOwaztlAc8M7uc\/sNt9TFnAOHXAAeML4HldcMD4AnheFxwwvgCe1wVvwNBbwBDmlhLwtgr0FjCEuaUEvK0CvQUMYW4pAW+rQG8BQ5hbSsDbKtDbI2Co+5iUgHHqHwAAAP\/\/vP+2pwAAAAZJREFUAwAsCNYqXkyBHwAAAABJRU5ErkJggg==\"><\/td><td>T\u1ea1o v\u00f9ng n\u1ec1n nh\u1eb9 nh\u00e0ng cho ph\u1ea7n n\u1ed9i dung.<br>V\u00ed d\u1ee5: l\u00e0m m\u00e0u n\u1ec1n background, card, modal s\u00e1ng.<\/td><\/tr><tr><td><strong>dark<\/strong><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"53\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA1CAYAAACKoi9gAAAA\/ElEQVR4AezTMQoCQRAF0WXPZGTk\/S+l0HEjbPqmBDeYrP6j79f78+3vbnBf\/egFAqZ5ryvggPEF8LwuOGB8ATyvCw6YXOCYqC4Ypw44YHwBPK8LDhhfAM\/rggPGF8DzuuCzgPHaA\/O6YBw94IDxBfC8LjhgfAE8rwsOGF8Az+uCB9j9BOzaTlnAM4P7Cdi1nbKAZwb3E7BrO2UBzwzuJ2DXdsoCnhncz39gt\/uYsoBx6oADxhfA87rggPEF8LwuOGB8ATyvC96AobeAIcwtJeBtFegtYAhzSwl4WwV6CxjC3FIC3laB3gKGMLeUgLdVoLdHwFD3MSkB49Q\/AAAA\/\/9I2w3FAAAABklEQVQDAMiGyYOOqnQoAAAAAElFTkSuQmCC\"><\/td><td>D\u00f9ng khi mu\u1ed1n t\u1ea1o nh\u1ea5n m\u1ea1nh, l\u00e0m n\u1ed5i n\u1ed9i dung s\u00e1ng tr\u00ean n\u1ec1n t\u1ed1i.<br>V\u00ed d\u1ee5: Header, footer m\u00e0u t\u1ed1i, Modal n\u1ec1n \u0111en<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u ch\u1eef v\u00e0 m\u00e0u n\u1ec1n d\u1ec5 d\u00e0ng b\u1eb1ng <strong>.text-*<\/strong> ho\u1eb7c <strong>.bg-*<\/strong>. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;p class=\"text-success\"&gt;M\u00e0u ch\u1eef xanh l\u00e1 (success)&lt;\/p&gt;\n &lt;div class=\"bg-warning text-dark p-2\"&gt;N\u1ec1n v\u00e0ng (warning)&lt;\/div&gt; <\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"103\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-33.png\" alt=\"\" class=\"wp-image-92452\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-33.png 530w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-33-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-33-200x39.png 200w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/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 th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/bootstrap-color-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap Color: C\u00e1ch s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng m\u00e0u trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-nbsp-border-vi\u1ec1n-amp-bo-goc\"><strong>3.&nbsp; Border (Vi\u1ec1n &amp; bo g\u00f3c)<\/strong><\/h3>\n\n\n\n<p>Nh\u00f3m Border utilities trong Bootstrap gi\u00fap b\u1ea1n th\u00eam, b\u1ecf ho\u1eb7c \u0111\u1ecbnh d\u1ea1ng vi\u1ec1n c\u1ee7a ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n CSS th\u1ee7 c\u00f4ng. B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng vi\u1ec1n to\u00e0n ph\u1ea7n, ch\u1ec9 tr\u00ean m\u1ed9t c\u1ea1nh, thay \u0111\u1ed5i m\u00e0u vi\u1ec1n, ho\u1eb7c bo tr\u00f2n g\u00f3c d\u1ec5 d\u00e0ng.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 class th\u01b0\u1eddng d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u00eam vi\u1ec1n cho ph\u1ea7n t\u1eed: <strong>.border<\/strong><\/li>\n\n\n\n<li>Lo\u1ea1i b\u1ecf vi\u1ec1n: <strong>.border-0, .border-top-0, .border-bottom-0<\/strong><\/li>\n\n\n\n<li>Thay \u0111\u1ed5i m\u00e0u vi\u1ec1n: <strong>.border-primary, .border-success<\/strong><\/li>\n\n\n\n<li>Bo g\u00f3c: <strong>.rounded, .rounded-circle, .rounded-pill<\/strong><\/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 border-primary rounded p-3\"&gt;\n   Box c\u00f3 vi\u1ec1n xanh v\u00e0 bo g\u00f3c nh\u1eb9\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"80\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-53.png\" alt=\"\" class=\"wp-image-92476\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-53.png 519w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-53-300x46.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-53-200x31.png 200w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem h\u01b0\u1edbng d\u1eabn chi ti\u1ebft <a href=\"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-margin-kho\u1ea3ng-cach-ben-ngoai\"><strong>4. Margin (Kho\u1ea3ng c\u00e1ch b\u00ean ngo\u00e0i)<\/strong><\/h3>\n\n\n\n<p>Margin utilities gi\u00fap b\u1ea1n t\u1ea1o kh\u00f4ng gian gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ec3 b\u1ed1 c\u1ee5c th\u00f4ng tho\u00e1ng v\u00e0 d\u1ec5 nh\u00ecn h\u01a1n. Bootstrap d\u00f9ng quy \u01b0\u1edbc <strong>.m<\/strong> (margin to\u00e0n ph\u1ea7n), <strong>.mt<\/strong> (tr\u00ean), <strong>.mb<\/strong> (d\u01b0\u1edbi), <strong>.ms<\/strong> (tr\u00e1i), <strong>.me<\/strong> (ph\u1ea3i) v\u1edbi gi\u00e1 tr\u1ecb t\u1eeb <strong>0\u20135<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"mt-3 mb-4\"&gt;\n   Box c\u00f3 kho\u1ea3ng c\u00e1ch tr\u00ean 3 v\u00e0 d\u01b0\u1edbi 4\n &lt;\/div&gt; <\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"89\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-54.png\" alt=\"\" class=\"wp-image-92477\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-54.png 326w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-54-300x82.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-54-200x55.png 200w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam <a href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Margin Bootstrap l\u00e0 g\u00ec: C\u00e1ch s\u1eed d\u1ee5ng margin trong Bootstrap A-Z<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-padding-kho\u1ea3ng-cach-ben-trong\"><strong>5. Padding (Kho\u1ea3ng c\u00e1ch b\u00ean trong)<\/strong><\/h3>\n\n\n\n<p>Padding l\u00e0 kho\u1ea3ng c\u00e1ch b\u00ean trong m\u1ed9t ph\u1ea7n t\u1eed, gi\u1eefa n\u1ed9i dung (content) v\u00e0 vi\u1ec1n (border) c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3. N\u00f3i c\u00e1ch kh\u00e1c, padding gi\u1ed1ng nh\u01b0 m\u1ed9t l\u1edbp \u0111\u1ec7m bao quanh n\u1ed9i dung \u0111\u1ec3 n\u00f3 kh\u00f4ng b\u1ecb d\u00ednh s\u00e1t v\u00e0o vi\u1ec1n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"189\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-34.png\" alt=\"\" class=\"wp-image-92454\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-34.png 267w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-34-200x142.png 200w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/figure>\n\n\n\n<p>Trong Bootstrap, padding utilities gi\u00fap \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n c\u1ee7a ph\u1ea7n t\u1eed. C\u00e1ch \u0111\u1eb7t t\u01b0\u01a1ng t\u1ef1 margin nh\u01b0ng s\u1eed d\u1ee5ng <strong>.p<\/strong> thay v\u00ec <strong>.m<\/strong>. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng <strong>.p-*, .pt-*, .pb-*, .ps-*, .pe-*, .px-*, .py-*<\/strong> \u0111\u1ec3 linh ho\u1ea1t \u0111i\u1ec1u ch\u1ec9nh.<\/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-4 bg-light border rounded\"&gt;\n   Box c\u00f3 padding 4, gi\u00fap n\u1ed9i dung tho\u00e1ng h\u01a1n\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"103\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-35.png\" alt=\"\" class=\"wp-image-92455\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-35.png 529w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-35-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-35-200x39.png 200w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>B\u1ea1n c\u00f3 th\u1ec3 xem chi ti\u1ebft <a href=\"https:\/\/itviec.com\/blog\/padding-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Padding Bootstrap l\u00e0 g\u00ec: S\u1eed d\u1ee5ng padding trong Bootstrap hi\u1ec7u qu\u1ea3<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-icon-trong-bootstrap\"><strong>6. Icon trong Bootstrap<\/strong><\/h3>\n\n\n\n<p>Bootstrap Icon l\u00e0 th\u01b0 vi\u1ec7n icon (bi\u1ec3u t\u01b0\u1ee3ng) d\u1ea1ng vector (SVG) m\u00e3 ngu\u1ed3n m\u1edf, \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi nh\u00f3m t\u00e1c gi\u1ea3 c\u1ee7a Bootstrap v\u00e0 ra m\u1eaft ch\u00ednh th\u1ee9c v\u00e0o n\u0103m 2020 &#8211; \u0111\u00e1nh d\u1ea5u l\u1ea7n \u0111\u1ea7u ti\u00ean Bootstrap c\u00f3 m\u1ed9t th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng ri\u00eang bi\u1ec7t. Bootstrap Icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 \u0111\u1ed3ng b\u1ed9 v\u1edbi Bootstrap 5.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng icon cho button, navbar, form, hay b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n n\u00e0o ch\u1ec9 b\u1eb1ng c\u00e1ch th\u00eam class <strong>.bi<\/strong> v\u00e0 t\u00ean bi\u1ec3u t\u01b0\u1ee3ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 th\u00eam icon trong Button:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;button class=\"btn btn-primary\"&gt;\n   &lt;i class=\"bi bi-download\"&gt;&lt;\/i&gt; T\u1ea3i xu\u1ed1ng\n &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"149\" height=\"64\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-36.png\" alt=\"\" class=\"wp-image-92456\"\/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, Bootstrap Icon c\u00f2n h\u1ed7 tr\u1ee3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc b\u1eb1ng .fs-* v\u00e0 m\u00e0u s\u1eafc b\u1eb1ng .text-*, gi\u00fap \u0111\u1ed3ng b\u1ed9 ho\u00e0n h\u1ea3o v\u1edbi giao di\u1ec7n.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ecdc-bootstrap-b\u01b0\u1edbc-3-cac-thanh-ph\u1ea7n-c\u01a1-b\u1ea3n-components\"><span class=\"ez-toc-section\" id=\"Hoc_Bootstrap_buoc_3_Cac_thanh_phan_co_ban_Components\"><\/span><strong>H\u1ecdc Bootstrap b\u01b0\u1edbc 3: C\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n (Components)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng th\u1ebf m\u1ea1nh l\u1edbn nh\u1ea5t c\u1ee7a Bootstrap ch\u00ednh l\u00e0 h\u1ec7 th\u1ed1ng components d\u1ef1ng s\u1eb5n, gi\u00fap b\u1ea1n t\u1ea1o ra giao di\u1ec7n \u0111\u1eb9p, \u0111\u1ed3ng nh\u1ea5t v\u00e0 t\u01b0\u01a1ng th\u00edch tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS hay JavaScript ph\u1ee9c t\u1ea1p. Nh\u1edd \u0111\u00f3, l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 t\u1eadp trung v\u00e0o logic v\u00e0 n\u1ed9i dung, thay v\u00ec m\u1ea5t th\u1eddi gian c\u0103n ch\u1ec9nh giao di\u1ec7n.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u nh\u1ea5t trong h\u1ea7u h\u1ebft c\u00e1c d\u1ef1 \u00e1n web, m\u00e0 ng\u01b0\u1eddi m\u1edbi n\u00ean n\u1eafm v\u1eefng \u0111\u1ea7u ti\u00ean:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button\"><strong>Button<\/strong><\/h3>\n\n\n\n<p>Button l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e0nh ph\u1ea7n ph\u1ed5 bi\u1ebfn nh\u1ea5t trong m\u1ecdi giao di\u1ec7n web, d\u00f9ng \u0111\u1ec3 k\u00edch ho\u1ea1t h\u00e0nh \u0111\u1ed9ng nh\u01b0 g\u1eedi form, m\u1edf modal, t\u1ea3i file, ho\u1eb7c \u0111i\u1ec1u h\u01b0\u1edbng trang. Bootstrap cung c\u1ea5p s\u1eb5n h\u1ec7 th\u1ed1ng class \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng cho m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, vi\u1ec1n v\u00e0 tr\u1ea1ng th\u00e1i (active, disabled) c\u1ee7a m\u1ed9t button.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 class th\u01b0\u1eddng d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0110\u1ecbnh d\u1ea1ng v\u00e0 m\u00e0u n\u00fat: <strong>.btn, .btn-primary, .btn-outline-*<\/strong><\/li>\n\n\n\n<li>K\u00edch th\u01b0\u1edbc button: <strong>.btn-sm, .btn-lg<\/strong><\/li>\n\n\n\n<li>Qu\u1ea3n l\u00fd tr\u1ea1ng th\u00e1i button: <strong>.disabled<\/strong><\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;button class=\"btn btn-primary\"&gt;\u0110\u0103ng k\u00fd ngay&lt;\/button&gt;\n &lt;button class=\"btn btn-outline-success\"&gt;Xem th\u00eam&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"248\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-37.png\" alt=\"\" class=\"wp-image-92457\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-37.png 356w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-37-300x209.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-37-200x139.png 200w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 t\u1ea1o Button v\u1edbi icon, ho\u1eb7c Group Button, ph\u00f9 h\u1ee3p v\u1edbi nhi\u1ec1u y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n kh\u00e1c nhau.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Button Bootstrap l\u00e0 g\u00ec? C\u00e1ch s\u1eed d\u1ee5ng Button v\u00e0 Button Group<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-navbar-thanh-di\u1ec1u-h\u01b0\u1edbng\"><span class=\"ez-toc-section\" id=\"Navbar_Thanh_dieu_huong\"><\/span><strong>Navbar (Thanh \u0111i\u1ec1u h\u01b0\u1edbng)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Navbar l\u00e0 khu v\u1ef1c \u0111i\u1ec1u h\u01b0\u1edbng ch\u00ednh c\u1ee7a website, th\u01b0\u1eddng n\u1eb1m \u1edf \u0111\u1ea7u trang v\u00e0 gi\u1eef vai tr\u00f2 quan tr\u1ecdng trong tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>Bootstrap gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng t\u1ea1o thanh menu c\u00f3 th\u1ec3 co gi\u00e3n linh ho\u1ea1t, ho\u1ea1t \u0111\u1ed9ng t\u1ed1t tr\u00ean c\u1ea3 desktop l\u1eabn mobile v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kh\u1edfi t\u1ea1o c\u1ea5u tr\u00fac navbar v\u00e0 responsive: <strong>.navbar, .navbar-expand-lg<\/strong><\/li>\n\n\n\n<li>T\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc navbar: <strong>.navbar-light, .navbar-dark, .bg-*<\/strong><\/li>\n\n\n\n<li>B\u1ed5 sung logo v\u00e0 li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng: <strong>.navbar-brand, .nav-link<\/strong><\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;nav class=\"navbar navbar-expand-lg bg-light\"&gt;\n   &lt;a class=\"navbar-brand\" href=\"#\"&gt;MySite&lt;\/a&gt;\n   &lt;div class=\"navbar-nav\"&gt;\n     &lt;a class=\"nav-link active\" href=\"#\"&gt;Trang ch\u1ee7&lt;\/a&gt;\n     &lt;a class=\"nav-link\" href=\"#\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n   &lt;\/div&gt;\n &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"134\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38.png\" alt=\"\" class=\"wp-image-92458\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38-300x50.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38-640x107.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38-200x33.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-38-768x128.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/navbar-bootstrap-la-g\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Navbar Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1ea1o Header chuy\u00ean nghi\u1ec7p cho web<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-footer-chan-trang\"><span class=\"ez-toc-section\" id=\"Footer_Chan_trang\"><\/span><strong>Footer (Ch\u00e2n trang)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Footer l\u00e0 khu v\u1ef1c n\u1eb1m cu\u1ed1i trang, th\u01b0\u1eddng ch\u1ee9a th\u00f4ng tin b\u1ea3n quy\u1ec1n, li\u00ean k\u1ebft m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c form \u0111\u0103ng k\u00fd nh\u1eadn tin. Bootstrap kh\u00f4ng c\u00f3 component \u201cfooter\u201d ri\u00eang, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p Grid system + Utilities.<\/p>\n\n\n\n<p>C\u00e1ch s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng<strong> .container, .row, .col-*<\/strong> \u0111\u1ec3 chia b\u1ed1 c\u1ee5c<\/li>\n\n\n\n<li>K\u1ebft h\u1ee3p v\u1edbi<strong> .bg-*, .text-*, .py-*<\/strong> \u0111\u1ec3 m\u00e0u n\u1ec1n, ch\u1eef v\u00e0 kho\u1ea3ng c\u00e1ch<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;footer class=\"bg-dark text-light py-4\"&gt;\n   &lt;div class=\"container text-center\"&gt;\n     \u00a9 2025 MyCompany \u2014 All rights reserved.\n   &lt;\/div&gt;\n &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>M\u1eb7c d\u00f9 kh\u00f4ng n\u1eb1m \u1edf v\u1ecb tr\u00ed n\u1ed5i b\u1eadt nh\u01b0 header, nh\u01b0ng footer l\u1ea1i \u0111\u00f3ng m\u1ed9t vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX). N\u00f3 gi\u00fap t\u1ed5 ch\u1ee9c th\u00f4ng tin r\u00f5 r\u00e0ng, t\u0103ng s\u1ef1 chuy\u00ean nghi\u1ec7p cho website v\u00e0 h\u1ed7 tr\u1ee3 \u0111i\u1ec1u h\u01b0\u1edbng \u1edf ph\u1ea7n cu\u1ed1i trang, n\u01a1i m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng d\u1eebng l\u1ea1i sau khi xem xong n\u1ed9i dung ch\u00ednh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"149\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40.png\" alt=\"\" class=\"wp-image-92460\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40-300x56.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40-640x119.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40-200x37.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-40-768x143.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam v\u1ec1 <\/em><a href=\"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>C\u00e1ch x\u00e2y d\u1ef1ng Footer chuy\u00ean nghi\u1ec7p b\u1eb1ng Bootstrap<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-th\u1ebb-n\u1ed9i-dung\"><strong>Card (Th\u1ebb n\u1ed9i dung)<\/strong><\/h3>\n\n\n\n<p>Card (hay c\u00f2n g\u1ecdi l\u00e0 \u201cth\u1ebb n\u1ed9i dung\u201d) l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quen thu\u1ed9c trong giao di\u1ec7n web, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo d\u1ea1ng h\u1ed9p ch\u1eef nh\u1eadt c\u00f3 th\u1ec3 ch\u1ee9a nhi\u1ec1u lo\u1ea1i n\u1ed9i dung kh\u00e1c nhau: ti\u00eau \u0111\u1ec1, v\u0103n b\u1ea3n, h\u00ecnh \u1ea3nh, danh s\u00e1ch, li\u00ean k\u1ebft, n\u00fat b\u1ea5m\u2026.<\/p>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n component Card \u0111\u1ec3 gi\u00fap b\u1ea1n c\u00f3 ngay m\u1ed9t card \u0111\u1eb9p m\u1eaft, th\u1ed1ng nh\u1ea5t v\u1edbi to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf ch\u1ec9 v\u1edbi v\u00e0i class s\u1eb5n c\u00f3.<\/p>\n\n\n\n<p>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Bootstrap Card:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c ph\u1ea7n t\u1eed ch\u00ednh t\u1ea1o n\u00ean card: <strong>.card, .card-body, .card-title, .card-text<\/strong><\/li>\n\n\n\n<li>Ch\u00e8n \u1ea3nh ph\u00eda tr\u00ean Card: <strong>.card-img-top<\/strong><\/li>\n\n\n\n<li>G\u1ed9p nhi\u1ec1u card c\u00f9ng h\u00e0ng: <strong>.card-group<\/strong><\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n   &lt;div class=\"card-body\"&gt;\n     &lt;h5 class=\"card-title\"&gt;S\u1ea3n ph\u1ea9m A&lt;\/h5&gt;\n     &lt;p class=\"card-text\"&gt;M\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn v\u1ec1 s\u1ea3n ph\u1ea9m.&lt;\/p&gt;\n     &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Mua ngay&lt;\/a&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"340\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-41.png\" alt=\"\" class=\"wp-image-92461\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-41.png 634w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-41-300x161.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-41-200x107.png 200w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/wp-admin\/post.php?post=91238&amp;action=edit\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>C\u00e1ch x\u00e2y d\u1ef1ng th\u1ebb n\u1ed9i dung chuy\u00ean nghi\u1ec7p v\u1edbi Bootstrap Card<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-badge-nhan-nh\u1ecf\"><strong>Badge (Nh\u00e3n nh\u1ecf)<\/strong><\/h3>\n\n\n\n<p>Badge (nh\u00e3n hi\u1ec3n th\u1ecb) l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n nh\u1ecf trong giao di\u1ec7n web, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ph\u1ee5 ng\u1eafn g\u1ecdn nh\u01b0 s\u1ed1 l\u01b0\u1ee3ng, tr\u1ea1ng th\u00e1i ho\u1eb7c nh\u00e3n ph\u00e2n lo\u1ea1i.<\/p>\n\n\n\n<p>Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n m\u1ed9t component badge v\u1edbi \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m c\u00f4ng s\u1ee9c m\u00e0 v\u1eabn \u0111\u1ea3m b\u1ea3o giao di\u1ec7n chuy\u00ean nghi\u1ec7p:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nhanh ch\u00f3ng: ch\u1ec9 c\u1ea7n v\u00e0i d\u00f2ng class (.badge, bg-*, rounded-pill\u2026) l\u00e0 c\u00f3 th\u1ec3 t\u1ea1o ngay m\u1ed9t badge \u0111\u1eb9p m\u1eaft<\/li>\n\n\n\n<li>\u0110\u1ed3ng b\u1ed9 giao di\u1ec7n: badge k\u1ebf th\u1eeba h\u1ec7 th\u1ed1ng m\u00e0u s\u1eafc, font ch\u1eef v\u00e0 spacing t\u1eeb Bootstrap, \u0111\u1ea3m b\u1ea3o nh\u1ea5t qu\u00e1n tr\u00ean to\u00e0n b\u1ed9 website<\/li>\n\n\n\n<li>D\u1ec5 t\u00f9y ch\u1ec9nh: c\u00f3 s\u1eb5n nhi\u1ec1u bi\u1ebfn th\u1ec3 m\u00e0u, d\u1ea1ng pill (bo tr\u00f2n), ho\u1eb7c m\u1edf r\u1ed9ng d\u1ec5 d\u00e0ng b\u1eb1ng CSS ri\u00eang<\/li>\n\n\n\n<li>Th\u00e2n thi\u1ec7n responsive: badge t\u1ef1 \u0111\u1ed9ng co gi\u00e3n theo c\u1ee1 ch\u1eef ho\u1eb7c button ch\u1ee9a n\u00f3, kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam media query<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 Bootstrap Badge:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;h2&gt;Ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft &lt;span class=\"badge badge-sm bg-danger\"&gt;New&lt;\/span&gt;&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"146\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-42.png\" alt=\"\" class=\"wp-image-92462\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-42.png 662w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-42-300x66.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-42-640x141.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-42-200x44.png 200w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ec3 s\u1eed d\u1ee5ng th\u00e0nh th\u1ea1o Bootstrap Badge, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-badge-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Badge Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dropdown-menu-th\u1ea3-xu\u1ed1ng\"><strong>Dropdown (Menu th\u1ea3 xu\u1ed1ng)<\/strong><\/h3>\n\n\n\n<p>Dropdown l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n trong Bootstrap cho ph\u00e9p hi\u1ec3n th\u1ecb c\u00e1c l\u1edbp ph\u1ee7 theo ng\u1eef c\u1ea3nh, th\u01b0\u1eddng l\u00e0 danh s\u00e1ch c\u00e1c li\u00ean k\u1ebft ho\u1eb7c n\u00fat h\u00e0nh \u0111\u1ed9ng. Dropdown \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eadt\/t\u1eaft th\u00f4ng qua thao t\u00e1c nh\u1ea5p chu\u1ed9t.<\/p>\n\n\n\n<p>\u0110\u00e2y l\u00e0 th\u00e0nh ph\u1ea7n th\u01b0\u1eddng th\u1ea5y trong Navbar, form ho\u1eb7c b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n. V\u00ed d\u1ee5 v\u1ec1 c\u00e1ch x\u00e2y d\u1ef1ng Bootstrap Dropdown:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"dropdown\"&gt;\n   &lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n     Dropdown button\n   &lt;\/button&gt;\n  \n   &lt;ul class=\"dropdown-menu\"&gt;\n     &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n   &lt;\/ul&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"366\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-43.png\" alt=\"\" class=\"wp-image-92463\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-43.png 572w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-43-300x192.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-43-200x128.png 200w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-table-b\u1ea3ng-d\u1eef-li\u1ec7u\"><strong>Table (B\u1ea3ng d\u1eef li\u1ec7u)<\/strong><\/h3>\n\n\n\n<p>Table (b\u1ea3ng) l\u00e0 m\u1ed9t c\u1ea5u tr\u00fac HTML d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng h\u00e0ng v\u00e0 c\u1ed9t, gi\u1ed1ng nh\u01b0 b\u1ea3ng t\u00ednh Excel. M\u1ed7i b\u1ea3ng bao g\u1ed3m c\u00e1c ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;table&gt;: Th\u1ebb ch\u00ednh \u0111\u1ec3 khai b\u00e1o b\u1ea3ng<\/li>\n\n\n\n<li>&lt;tr&gt; (table row): \u0110\u1ea1i di\u1ec7n cho m\u1ed9t h\u00e0ng<\/li>\n\n\n\n<li>&lt;th&gt; (table heading): Ti\u00eau \u0111\u1ec1 c\u1ee7a c\u1ed9t<\/li>\n\n\n\n<li>&lt;td&gt; (table data): D\u1eef li\u1ec7u trong b\u1ea3ng<\/li>\n<\/ul>\n\n\n\n<p>Trong Bootstrap, vi\u1ec7c t\u1ea1o b\u1ea3ng (table) tr\u1edf n\u00ean d\u1ec5 d\u00e0ng v\u00e0 \u0111\u1eb9p m\u1eaft ch\u1ec9 v\u1edbi m\u1ed9t v\u00e0i class \u0111\u01a1n gi\u1ea3n. C\u00e1c b\u1ea3ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 m\u1eb7c \u0111\u1ecbnh v\u1edbi giao di\u1ec7n g\u1ecdn g\u00e0ng, r\u00f5 r\u00e0ng, d\u1ec5 \u0111\u1ecdc, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng ho\u1eb7c t\u00f9y ch\u1ec9nh th\u00eam theo nhu c\u1ea7u.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 class t\u1ea1o b\u1ea3ng trong Bootstrap th\u00f4ng d\u1ee5ng b\u1ea1n n\u00ean n\u1eafm:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><strong>.table<\/strong><\/td><td>Class c\u01a1 b\u1ea3n \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng b\u1ea3ng Bootstrap, th\u00eam kho\u1ea3ng c\u00e1ch v\u00e0 ki\u1ec3u ch\u1eef d\u1ec5 \u0111\u1ecdc h\u01a1n<\/td><\/tr><tr><td><strong>.table-striped<\/strong><\/td><td>Th\u00eam m\u00e0u n\u1ec1n xen k\u1ebd gi\u1eefa c\u00e1c h\u00e0ng, gi\u00fap d\u1eef li\u1ec7u d\u1ec5 ph\u00e2n bi\u1ec7t<\/td><\/tr><tr><td><strong>.table-hover<\/strong><\/td><td>T\u00f4 s\u00e1ng h\u00e0ng khi ng\u01b0\u1eddi d\u00f9ng r\u00ea chu\u1ed9t (hover)<\/td><\/tr><tr><td><strong>.table-bordered<\/strong><\/td><td>Th\u00eam vi\u1ec1n xung quanh to\u00e0n b\u1ea3ng v\u00e0 t\u1eebng \u00f4 d\u1eef li\u1ec7u<\/td><\/tr><tr><td><strong>.table-responsive<\/strong><\/td><td>Cho ph\u00e9p b\u1ea3ng cu\u1ed9n ngang khi hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf, tr\u00e1nh tr\u00e0n n\u1ed9i dung. Th\u01b0\u1eddng bao b\u1ecdc ngo\u00e0i b\u1ea3ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 k\u1ebft h\u1ee3p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"table-responsive\"&gt;\n   &lt;table class=\"table table-striped table-hover table-bordered\"&gt;\n     &lt;thead&gt;\n       &lt;tr&gt;\n         &lt;th&gt;#&lt;\/th&gt;\n         &lt;th&gt;T\u00ean s\u1ea3n ph\u1ea9m&lt;\/th&gt;\n         &lt;th&gt;Tr\u1ea1ng th\u00e1i&lt;\/th&gt;\n       &lt;\/tr&gt;\n     &lt;\/thead&gt;\n     &lt;tbody&gt;\n       &lt;tr&gt;\n         &lt;td&gt;1&lt;\/td&gt;\n         &lt;td&gt;\u00c1o thun nam&lt;\/td&gt;\n         &lt;td&gt;\u0110ang b\u00e1n&lt;\/td&gt;\n       &lt;\/tr&gt;\n       &lt;tr&gt;\n         &lt;td&gt;2&lt;\/td&gt;\n         &lt;td&gt;\u00c1o s\u01a1 mi n\u1eef&lt;\/td&gt;\n         &lt;td&gt;H\u1ebft h\u00e0ng&lt;\/td&gt;\n       &lt;\/tr&gt;\n     &lt;\/tbody&gt;\n   &lt;\/table&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"232\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44.png\" alt=\"\" class=\"wp-image-92464\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44-300x87.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44-640x186.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44-200x58.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-44-768x223.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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\/huong-dan-su-dung-table-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Table Bootstrap: Chi ti\u1ebft c\u00e1ch t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh b\u1ea3ng v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-bi\u1ec3u-m\u1eabu\"><strong>Form (Bi\u1ec3u m\u1eabu)<\/strong><\/h3>\n\n\n\n<p>Form Bootstrap l\u00e0 t\u1eadp h\u1ee3p c\u00e1c class CSS \u0111\u01b0\u1ee3c Bootstrap cung c\u1ea5p s\u1eb5n \u0111\u1ec3 gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng form m\u1ed9t c\u00e1ch nhanh ch\u00f3ng. Thay v\u00ec ph\u1ea3i vi\u1ebft l\u1ea1i t\u1eebng d\u00f2ng CSS cho input, label, select&#8230;, b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam c\u00e1c class nh\u01b0 <strong>.form-control, .form-label, .form-select, .form-check<\/strong>,&#8230; l\u00e0 \u0111\u00e3 c\u00f3 m\u1ed9t giao di\u1ec7n chuy\u00ean nghi\u1ec7p, d\u1ec5 s\u1eed d\u1ee5ng v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>Vi\u1ec7c s\u1eed d\u1ee5ng Form Bootstrap s\u1ebd gi\u00fap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>X\u00e2y d\u1ef1ng giao di\u1ec7n nhanh ch\u00f3ng<\/li>\n\n\n\n<li>\u0110\u1ed3ng nh\u1ea5t phong c\u00e1ch gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t<\/li>\n\n\n\n<li>C\u00f3 s\u1eb5n responsive, d\u1ec5 d\u00e0ng v\u1edbi c\u00e1c thi\u1ebft b\u1ecb kh\u00e1c nhau<\/li>\n\n\n\n<li>T\u00f9y bi\u1ebfn linh ho\u1ea1t theo nhu c\u1ea7u d\u1ef1 \u00e1n<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 form \u0111\u0103ng nh\u1eadp x\u00e2y d\u1ef1ng b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleInputEmail1\" class=\"form-label\"&gt;Email address&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\"&gt;\n         &lt;div id=\"emailHelp\" class=\"form-text\"&gt;We'll never share your email with anyone else.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleInputPassword1\" class=\"form-label\"&gt;Password&lt;\/label&gt;\n         &lt;input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3 form-check\"&gt;\n         &lt;input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"&gt;\n         &lt;label class=\"form-check-label\" for=\"exampleCheck1\"&gt;Check me out&lt;\/label&gt;\n       &lt;\/div&gt;\n       &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n     &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=\"447\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45.png\" alt=\"\" class=\"wp-image-92465\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45-300x168.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45-640x358.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45-200x112.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-45-768x429.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem chi ti\u1ebft v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Th\u1ef1c h\u00e0nh t\u1ea1o form Bootstrap t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ecdc-bootstrap-b\u01b0\u1edbc-4-cac-thanh-ph\u1ea7n-nang-cao\"><span class=\"ez-toc-section\" id=\"Hoc_Bootstrap_buoc_4_Cac_thanh_phan_nang_cao\"><\/span><strong>H\u1ecdc Bootstrap b\u01b0\u1edbc 4: C\u00e1c th\u00e0nh ph\u1ea7n n\u00e2ng cao<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sau khi \u0111\u00e3 n\u1eafm v\u1eefng nh\u00f3m c\u01a1 b\u1ea3n, b\u1ea1n n\u00ean h\u1ecdc th\u00eam c\u00e1c component n\u00e2ng cao \u0111\u1ec3 t\u1ea1o tr\u1ea3i nghi\u1ec7m t\u01b0\u01a1ng t\u00e1c v\u00e0 hi\u1ec7n \u0111\u1ea1i h\u01a1n cho website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modal-h\u1ed9p-tho\u1ea1i-n\u1ed5i\"><strong>Modal (H\u1ed9p tho\u1ea1i n\u1ed5i)<\/strong><\/h3>\n\n\n\n<p>Modal l\u00e0 m\u1ed9t h\u1ed9p tho\u1ea1i b\u1eadt l\u00ean n\u1eb1m tr\u00ean c\u00f9ng giao di\u1ec7n, d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung chi ti\u1ebft, c\u1ea3nh b\u00e1o, ho\u1eb7c x\u00e1c nh\u1eadn h\u00e0nh \u0111\u1ed9ng. Bootstrap gi\u00fap t\u1ea1o modal nhanh ch\u00f3ng b\u1eb1ng v\u00e0i class v\u00e0 thu\u1ed9c t\u00ednh d\u1eef li\u1ec7u (<strong>data-bs-toggle, data-bs-target<\/strong>) m\u00e0 kh\u00f4ng c\u1ea7n code JS ph\u1ee9c t\u1ea1p.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;button class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\"&gt;\n   M\u1edf Modal\n &lt;\/button&gt;\n  &lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-hidden=\"true\"&gt;\n   &lt;div class=\"modal-dialog\"&gt;&lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\"&gt;X\u00e1c nh\u1eadn h\u00e0nh \u0111\u1ed9ng&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n ti\u1ebfp t\u1ee5c kh\u00f4ng?&lt;\/div&gt;\n     &lt;div class=\"modal-footer\"&gt;\n       &lt;button class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u0110\u00f3ng&lt;\/button&gt;\n       &lt;button class=\"btn btn-danger\"&gt;\u0110\u1ed3ng \u00fd&lt;\/button&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;&lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"342\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46.png\" alt=\"\" class=\"wp-image-92466\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46-300x128.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46-640x274.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46-200x86.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-46-768x329.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, Modal h\u1ed7 tr\u1ee3 c\u00e1c k\u00edch th\u01b0\u1edbc (<strong>.modal-sm, .modal-lg, .modal-xl<\/strong>) \u0111\u1ec3 \u0111\u00e1p \u1ee9ng nhi\u1ec1u nhu c\u1ea7u v\u00e0 ch\u1ebf \u0111\u1ed9 cu\u1ed9n (<strong>.modal-dialog-scrollable<\/strong>).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-carousel-slider\"><strong>Carousel (Slider)<\/strong><\/h3>\n\n\n\n<p>Carousel l\u00e0 th\u00e0nh ph\u1ea7n gi\u00fap hi\u1ec3n th\u1ecb nhi\u1ec1u h\u00ecnh \u1ea3nh ho\u1eb7c n\u1ed9i dung trong c\u00f9ng m\u1ed9t v\u1ecb tr\u00ed theo d\u1ea1ng tr\u00ecnh chi\u1ebfu (slideshow). Thay v\u00ec d\u00e0n tr\u1ea3i n\u1ed9i dung d\u00e0i, carousel gi\u00fap gom g\u1ecdn th\u00f4ng tin v\u00e0o m\u1ed9t khu v\u1ef1c v\u00e0 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem l\u1ea7n l\u01b0\u1ee3t t\u1eebng m\u1ee5c b\u1eb1ng thao t\u00e1c chuy\u1ec3n slide ho\u1eb7c t\u1ef1 \u0111\u1ed9ng ch\u1ea1y.<\/p>\n\n\n\n<p>Trong Bootstrap, Carousel l\u00e0 component d\u1ef1ng s\u1eb5n, h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng nh\u01b0 chuy\u1ec3n slide t\u1ef1 \u0111\u1ed9ng, n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng, ch\u1ea5m ch\u1ec9 b\u00e1o v\u00e0 caption cho t\u1eebng \u1ea3nh, gi\u00fap b\u1ea1n t\u1ea1o slider nhanh, chu\u1ea9n v\u00e0 \u0111\u1ed3ng b\u1ed9 m\u00e0 kh\u00f4ng c\u1ea7n code t\u1eeb \u0111\u1ea7u.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"441\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47.png\" alt=\"\" class=\"wp-image-92467\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47-300x165.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47-640x353.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47-200x110.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-47-768x423.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>H\u00ecnh \u1ea3nh minh h\u1ecda v\u1ec1 Carousel Bootstrap<\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc n\u1ed9i dung chi ti\u1ebft v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pagination-phan-trang\"><strong>Pagination (Ph\u00e2n trang)<\/strong><\/h3>\n\n\n\n<p>Pagination gi\u00fap chia nh\u1ecf n\u1ed9i dung d\u00e0i th\u00e0nh nhi\u1ec1u trang, gi\u00fap t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Bootstrap h\u1ed7 tr\u1ee3 class <strong>.pagination, .page-item, .page-link<\/strong> \u0111\u1ec3 t\u1ea1o thanh ph\u00e2n trang \u0111\u1ed3ng nh\u1ea5t v\u00e0 d\u1ec5 ch\u1ec9nh k\u00edch th\u01b0\u1edbc.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 pagination trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;nav aria-label=\"Pagination example\"&gt;\n   &lt;ul class=\"pagination justify-content-center\"&gt;\n     &lt;li class=\"page-item disabled\"&gt;&lt;span class=\"page-link\"&gt;Tr\u01b0\u1edbc&lt;\/span&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item active\"&gt;&lt;span class=\"page-link\"&gt;2&lt;\/span&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Sau&lt;\/a&gt;&lt;\/li&gt;\n   &lt;\/ul&gt;\n &lt;\/nav&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=\"534\" height=\"136\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-48.png\" alt=\"\" class=\"wp-image-92468\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-48.png 534w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-48-300x76.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-48-200x51.png 200w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/><\/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\/pagination-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tooltip-g\u1ee3i-y-nhanh\"><strong>Tooltip (G\u1ee3i \u00fd nhanh)<\/strong><\/h3>\n\n\n\n<p>Tooltip (g\u1ee3i \u00fd n\u1ed5i b\u1eadt) l\u00e0 nh\u1eefng h\u1ed9p tho\u1ea1i nh\u1ecf xu\u1ea5t hi\u1ec7n khi ng\u01b0\u1eddi d\u00f9ng di chu\u1ed9t (hover) ho\u1eb7c t\u1eadp trung (focus) v\u00e0o m\u1ed9t ph\u1ea7n t\u1eed, nh\u1eb1m hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung ng\u1eafn g\u1ecdn, v\u00ed d\u1ee5 nh\u01b0 h\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng, nh\u00e3n bi\u1ec3u t\u01b0\u1ee3ng ho\u1eb7c tr\u1ea1ng th\u00e1i n\u00fat.<\/p>\n\n\n\n<p>Bootstrap cung c\u1ea5p component Tooltip m\u1ea1nh m\u1ebd v\u00e0 d\u1ec5 tri\u1ec3n khai, gi\u00fap b\u1ea1n nhanh ch\u00f3ng t\u00edch h\u1ee3p tooltip v\u00e0o giao di\u1ec7n web m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam nhi\u1ec1u CSS ho\u1eb7c JavaScript th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng Tooltip trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" title=\"L\u01b0u l\u1ea1i thay \u0111\u1ed5i\"&gt;\n   &lt;i class=\"bi bi-save\"&gt;&lt;\/i&gt;\n &lt;\/button&gt;\n  &lt;script&gt;\n   const tooltips = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]');\n   tooltips.forEach(t =&gt; new bootstrap.Tooltip(t));\n &lt;\/script&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=\"402\" height=\"150\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-49.png\" alt=\"\" class=\"wp-image-92469\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-49.png 402w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-49-300x112.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-49-200x75.png 200w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, b\u1ea1n c\u1ea7n ch\u1ee7 \u0111\u1ed9ng k\u00edch ho\u1ea1t tooltip b\u1eb1ng JavaScript. \u0110\u00e2y l\u00e0 c\u01a1 ch\u1ebf opt-in, ngh\u0129a l\u00e0 Bootstrap kh\u00f4ng t\u1ef1 kh\u1edfi t\u1ea1o tooltip \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u n\u0103ng.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem h\u01b0\u1edbng d\u1eabn chi ti\u1ebft <\/em><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-n\u1ed9i-dung-thu-g\u1ecdn-m\u1edf-r\u1ed9ng\"><strong>Accordion (N\u1ed9i dung thu g\u1ecdn\/m\u1edf r\u1ed9ng)<\/strong><\/h3>\n\n\n\n<p>Accordion gi\u00fap t\u1ed5 ch\u1ee9c nhi\u1ec1u \u0111o\u1ea1n n\u1ed9i dung theo d\u1ea1ng thu g\u1ecdn, r\u1ea5t ph\u00f9 h\u1ee3p cho FAQ, h\u01b0\u1edbng d\u1eabn ho\u1eb7c danh s\u00e1ch chi ti\u1ebft. Khi m\u1edf m\u1ed9t m\u1ee5c, c\u00e1c m\u1ee5c c\u00f2n l\u1ea1i c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111\u00f3ng l\u1ea1i.<\/p>\n\n\n\n<p>Trong Bootstrap, to\u00e0n b\u1ed9 c\u1ea5u tr\u00fac, class, hi\u1ec7u \u1ee9ng v\u00e0 h\u00e0nh vi c\u1ee7a accordion \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a s\u1eb5n. L\u1eadp tr\u00ecnh vi\u00ean ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng c\u00e1c class nh\u01b0 <strong>.accordion, .accordion-item, .accordion-button, .accordion-collapse<\/strong> c\u00f9ng v\u1edbi <strong>data-bs-toggle<\/strong> v\u00e0 <strong>data-bs-target<\/strong> l\u00e0 c\u00f3 ngay m\u1ed9t accordion ho\u00e0n ch\u1ec9nh.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionExample\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\"&gt;\n       &lt;button class=\"accordion-button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\"&gt;\n         Bootstrap l\u00e0 g\u00ec?\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"collapseOne\" class=\"accordion-collapse collapse show\" data-bs-parent=\"#accordionExample\"&gt;\n       &lt;div class=\"accordion-body\"&gt;Bootstrap l\u00e0 framework front-end gi\u00fap d\u1ef1ng UI nhanh...&lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"204\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50.png\" alt=\"\" class=\"wp-image-92470\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50-300x77.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50-640x164.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50-200x51.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-50-768x196.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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\/huong-dan-su-dung-accordion-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00e1ch s\u1eed d\u1ee5ng Accordion Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-thanh-cu\u1ed9n-tuy-ch\u1ec9nh\"><strong>Scrollbar (Thanh cu\u1ed9n t\u00f9y ch\u1ec9nh)<\/strong><\/h3>\n\n\n\n<p>Trong h\u1ec7 th\u1ed1ng c\u1ee7a Bootstrap, vi\u1ec7c l\u00e0m vi\u1ec7c v\u1edbi scrollbar \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 d\u01b0\u1edbi hai h\u00ecnh th\u1ee9c ch\u00ednh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c l\u1edbp ti\u1ec7n \u00edch (Utilities Classes): Bootstrap \u0111\u1ecbnh ngh\u0129a s\u1eb5n b\u1ed1n class <strong>.overflow-auto, .overflow-hidden, .overflow-visible<\/strong> v\u00e0 <strong>.overflow-scroll<\/strong> \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng<\/li>\n\n\n\n<li>T\u00edch h\u1ee3p trong c\u00e1c component: M\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n c\u1ee7a Bootstrap nh\u01b0 Modal, Offcanvas, Dropdown v\u00e0 Table \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 x\u1eed l\u00fd t\u00ecnh hu\u1ed1ng n\u1ed9i dung tr\u00e0n, k\u00e8m c\u01a1 ch\u1ebf hi\u1ec3n th\u1ecb scrollbar khi c\u1ea7n<\/li>\n<\/ul>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y gi\u00fap nh\u00e0 ph\u00e1t tri\u1ec3n ti\u1ebft ki\u1ec7m th\u1eddi gian tri\u1ec3n khai, \u0111\u1ea3m b\u1ea3o s\u1ef1 \u0111\u1ed3ng b\u1ed9 v\u1ec1 giao di\u1ec7n, \u0111\u1ed3ng th\u1eddi gi\u1ea3m thi\u1ec3u l\u1ed7i so v\u1edbi c\u00e1ch vi\u1ebft CSS t\u00f9y \u00fd cho t\u1eebng tr\u01b0\u1eddng h\u1ee3p.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 class ti\u1ec7n \u00edch \u0111\u1ec3 thao t\u00e1c v\u1edbi Scrollbar Bootstrap:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>C\u00f4ng d\u1ee5ng<\/strong><\/td><\/tr><tr><td><strong>.overflow-auto<\/strong><\/td><td>Hi\u1ec3n th\u1ecb thanh cu\u1ed9n khi n\u1ed9i dung v\u01b0\u1ee3t khung<\/td><\/tr><tr><td><strong>.overflow-hidden<\/strong><\/td><td>\u1ea8n to\u00e0n b\u1ed9 n\u1ed9i dung v\u01b0\u1ee3t khung, kh\u00f4ng t\u1ea1o ra thanh cu\u1ed9n<\/td><\/tr><tr><td><strong>.overflow-visible<\/strong><\/td><td>Hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u00e0n ra kh\u1ecfi khung, kh\u00f4ng t\u1ea1o thanh cu\u1ed9n<\/td><\/tr><tr><td><strong>.overflow-scroll<\/strong><\/td><td>Lu\u00f4n b\u1eadt v\u00f9ng cu\u1ed9n (d\u00f9 \u00edt n\u1ed9i dung)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam v\u1ec1 c\u00e1ch t\u00f9y ch\u1ec9nh <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Scrollbar trong Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-bi-kip-d\u1ec3-h\u1ecdc-bootstrap-hi\u1ec7u-qu\u1ea3\"><span class=\"ez-toc-section\" id=\"Cac_bi_kip_de_hoc_Bootstrap_hieu_qua\"><\/span><strong>C\u00e1c b\u00ed k\u00edp \u0111\u1ec3 h\u1ecdc Bootstrap hi\u1ec7u qu\u1ea3<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ecdc Bootstrap kh\u00f4ng ch\u1ec9 d\u1eebng \u1edf vi\u1ec7c nh\u1edb class, components, m\u00e0 quan tr\u1ecdng h\u01a1n l\u00e0 bi\u1ebft c\u00e1ch k\u1ebft h\u1ee3p, t\u00f9y ch\u1ec9nh v\u00e0 \u00e1p d\u1ee5ng v\u00e0o th\u1ef1c t\u1ebf. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00e0i m\u1eb9o gi\u00fap b\u1ea1n h\u1ecdc nhanh h\u01a1n v\u00e0 l\u00e0m ch\u1ee7 framework n\u00e0y hi\u1ec7u qu\u1ea3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-css-theme-d\u1ec3-giao-di\u1ec7n-khong-m\u1ed9t-mau\"><strong>T\u00f9y ch\u1ec9nh CSS\/Theme \u0111\u1ec3 giao di\u1ec7n kh\u00f4ng \u201cm\u1ed9t m\u00e0u\u201d<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng \u0111i\u1ec3m m\u1ea1nh nh\u1ea5t c\u1ee7a Bootstrap l\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh linh ho\u1ea1t. B\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i gi\u1eef nguy\u00ean giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh, m\u00e0 ho\u00e0n to\u00e0n c\u00f3 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ghi \u0111\u00e8 CSS: Vi\u1ebft class ri\u00eang \u0111\u1ec3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, font ho\u1eb7c border m\u00e0 v\u1eabn t\u1eadn d\u1ee5ng h\u1ec7 th\u1ed1ng s\u1eb5n c\u00f3 c\u1ee7a Bootstrap.<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng bi\u1ebfn Sass: N\u1ebfu b\u1ea1n c\u00e0i \u0111\u1eb7t Bootstrap qua npm ho\u1eb7c source Sass, c\u00f3 th\u1ec3 override c\u00e1c bi\u1ebfn nh\u01b0 <strong>$primary, $font-size-base, $btn-border-radius<\/strong> \u0111\u1ec3 \u0111\u1ed5i giao di\u1ec7n to\u00e0n h\u1ec7 th\u1ed1ng.<\/li>\n\n\n\n<li>K\u1ebft h\u1ee3p Utilities API: Bootstrap 5 h\u1ed7 tr\u1ee3 \u0111\u1ecbnh ngh\u0129a utilities ri\u00eang, gi\u00fap b\u1ea1n th\u00eam class tu\u1ef3 bi\u1ebfn m\u00e0 kh\u00f4ng ph\u1ea3i vi\u1ebft l\u1ea1i nhi\u1ec1u CSS.<\/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 th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-th\u1ef1c-hanh-song-song-v\u1edbi-bai-t\u1eadp-m\u1eabu\"><strong>Th\u1ef1c h\u00e0nh song song v\u1edbi b\u00e0i t\u1eadp m\u1eabu<\/strong><\/h3>\n\n\n\n<p>H\u1ecdc l\u00fd thuy\u1ebft s\u1ebd r\u1ea5t nhanh qu\u00ean n\u1ebfu kh\u00f4ng th\u1ef1c h\u00e0nh. B\u1ea1n c\u00f3 th\u1ec3 luy\u1ec7n t\u1eadp th\u1ef1c h\u00e0nh Bootstrap th\u00f4ng qua vi\u1ec7c x\u00e2y d\u1ef1ng m\u1ed9t trang web nh\u1ecf, v\u00ed d\u1ee5 b\u00e0i t\u1eadp d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>T\u1ea1o m\u1ed9t Landing Page g\u1ed3m Navbar, Hero section, Card s\u1ea3n ph\u1ea9m, v\u00e0 Footer.<\/li>\n\n\n\n<li>\u00c1p d\u1ee5ng c\u00e1c utilities nh\u01b0 m\u00e0u s\u1eafc, kho\u1ea3ng c\u00e1ch, text, border, \u0111\u1ec3 l\u00e0m quen v\u1edbi class.<\/li>\n\n\n\n<li>Th\u1eed th\u00eam components n\u00e2ng cao nh\u01b0 Modal, Carousel ho\u1eb7c Tooltip \u0111\u1ec3 hi\u1ec3u c\u00e1ch ho\u1ea1t \u0111\u1ed9ng.<\/li>\n\n\n\n<li>Sau c\u00f9ng, t\u1ed1i \u01b0u l\u1ea1i b\u1ed1 c\u1ee5c b\u1eb1ng Grid v\u00e0 Flexbox \u0111\u1ec3 trang hi\u1ec3n th\u1ecb chu\u1ea9n responsive.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 h\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51.png\" alt=\"\" class=\"wp-image-92471\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51-300x142.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51-640x304.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51-200x95.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51-768x364.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-51-1536x729.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>\u0110\u00e1p \u00e1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html lang=\"vi\"&gt;\n&lt;head&gt;\n &lt;meta charset=\"utf-8\"&gt;\n &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n &lt;title&gt;Bootstrap Demo&lt;\/title&gt;\n &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n\n &lt;!-- Navbar --&gt;\n &lt;nav class=\"navbar navbar-expand-lg bg-light border-bottom mb-4\"&gt;\n   &lt;div class=\"container\"&gt;\n     &lt;a class=\"navbar-brand fw-bold text-primary\" href=\"#\"&gt;MyBrand&lt;\/a&gt;\n     &lt;button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#nav\"&gt;\n       &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n     &lt;\/button&gt;\n     &lt;div class=\"collapse navbar-collapse\" id=\"nav\"&gt;\n       &lt;ul class=\"navbar-nav ms-auto\"&gt;\n         &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link active\" href=\"#\"&gt;Trang ch\u1ee7&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;S\u1ea3n ph\u1ea9m&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/nav&gt;\n\n\n &lt;!-- Hero --&gt;\n &lt;header class=\"py-5 bg-light text-center\"&gt;\n   &lt;div class=\"container\"&gt;\n     &lt;h1 class=\"fw-bold mb-3\"&gt;H\u1ecdc Bootstrap hi\u1ec7u qu\u1ea3&lt;\/h1&gt;\n     &lt;p class=\"lead text-secondary mb-4\"&gt;D\u1ef1ng giao di\u1ec7n responsive nhanh, \u0111\u1eb9p v\u00e0 \u0111\u1ed3ng nh\u1ea5t&lt;\/p&gt;\n     &lt;a href=\"#\" class=\"btn btn-primary btn-lg\"&gt;B\u1eaft \u0111\u1ea7u ngay&lt;\/a&gt;\n   &lt;\/div&gt;\n &lt;\/header&gt;\n\n\n &lt;!-- Card section --&gt;\n &lt;section class=\"container py-5\"&gt;\n   &lt;div class=\"row g-4\"&gt;\n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card h-100 shadow-sm\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Grid System&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;Chia b\u1ed1 c\u1ee5c linh ho\u1ea1t v\u1edbi 12 c\u1ed9t v\u00e0 breakpoint responsive.&lt;\/p&gt;\n           &lt;a href=\"#\" class=\"btn btn-outline-primary btn-sm\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n\n\n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card h-100 shadow-sm\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Components&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;Button, Navbar, Modal \u2013 c\u00f3 s\u1eb5n v\u00e0 d\u1ec5 tu\u1ef3 ch\u1ec9nh.&lt;\/p&gt;\n           &lt;a href=\"#\" class=\"btn btn-outline-primary btn-sm\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n\n\n     &lt;div class=\"col-md-4\"&gt;\n       &lt;div class=\"card h-100 shadow-sm\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;Utilities&lt;\/h5&gt;\n           &lt;p class=\"card-text\"&gt;D\u00f9ng class s\u1eb5n \u0111\u1ec3 ch\u1ec9nh nhanh m\u00e0u s\u1eafc, margin, padding...&lt;\/p&gt;\n           &lt;a href=\"#\" class=\"btn btn-outline-primary btn-sm\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/section&gt;\n\n\n &lt;!-- Footer --&gt;\n &lt;footer class=\"bg-dark text-light text-center py-3\"&gt;\n   &lt;p class=\"mb-0\"&gt;\u00a9 2025 MyBrand. All rights reserved.&lt;\/p&gt;\n &lt;\/footer&gt;\n\n\n &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-ngu\u1ed3n-tai-li\u1ec7u-uy-tin\"><strong>S\u1eed d\u1ee5ng ngu\u1ed3n t\u00e0i li\u1ec7u uy t\u00edn<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 h\u1ecdc Bootstrap m\u1ed9t c\u00e1ch nhanh ch\u00f3ng v\u00e0 \u0111\u00fang h\u01b0\u1edbng, b\u1ea1n h\u00e3y \u01b0u ti\u00ean nh\u1eefng ngu\u1ed3n t\u00e0i li\u1ec7u ch\u00ednh th\u1ed1ng v\u00e0 c\u1eadp nh\u1eadt th\u01b0\u1eddng xuy\u00ean nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Trang ch\u1ee7 Bootstrap: <a href=\"https:\/\/getbootstrap.com\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/getbootstrap.com\/docs<\/a>. \u0110\u00e2y l\u00e0 ngu\u1ed3n t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c, \u0111\u1ea7y \u0111\u1ee7 v\u00ed d\u1ee5 v\u00e0 demo v\u1ec1 Bootstrap<\/li>\n\n\n\n<li>MDN Web Docs: T\u00ecm hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 c\u00e1c nguy\u00ean t\u1eafc CSS m\u00e0 Bootstrap d\u1ef1a tr\u00ean th\u00f4ng qua <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Docs<\/a>.<\/li>\n\n\n\n<li>C\u00e1c k\u00eanh Youtube: M\u1ed9t s\u1ed1 playlist d\u1ea1y h\u1ecdc Bootstrap 5 n\u1ed5i ti\u1ebfng tr\u00ean Youtube nh\u01b0 <a href=\"https:\/\/www.youtube.com\/watch?v=-qfEOE4vtxE\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap CSS Framework &#8211; Full Course for Beginners (FreeCodeCamp)<\/a>, <a href=\"https:\/\/www.youtube.com\/watch?v=bPuyoVh9U3g&amp;list=PLr6-GrHUlVf-gjvHuzCnVmeuaeAjRGltv\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap Tutorial for Beginners ( EJ Media)<\/a> gi\u00fap b\u1ea1n th\u1ef1c h\u00e0nh d\u1ef1ng giao di\u1ec7n th\u1ef1c t\u1ebf&nbsp;<\/li>\n\n\n\n<li>ITviec Blog: N\u01a1i t\u1ed5ng h\u1ee3p c\u00e1c b\u00e0i h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 cho t\u1eebng th\u00e0nh ph\u1ea7n trong Bootstrap nh\u01b0 <a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Button Bootstrap<\/a>, <a href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dropdown Bootstrap<\/a>, <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tooltip Bootstrap<\/a>, <a href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Modal Bootstrap<\/a>, <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-table-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Table Bootstrap<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-l\u1ed9-trinh-h\u1ecdc-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_lo_trinh_hoc_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 l\u1ed9 tr\u00ecnh h\u1ecdc<\/strong> <strong>Bootstrap <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nen-h\u1ecdc-bootstrap-hay-tailwind\"><strong>N\u00ean h\u1ecdc Bootstrap hay Tailwind?<\/strong><\/h3>\n\n\n\n<p>Trong qu\u00e1 tr\u00ecnh h\u1ecdc front-end, b\u1ea1n s\u1ebd c\u00f3 th\u1ec3 b\u1eaft g\u1eb7p hai c\u00e1i t\u00ean quen thu\u1ed9c l\u00e0 Bootstrap v\u00e0 Tailwind CSS. C\u1ea3 hai \u0111\u1ec1u l\u00e0 framework h\u1ed7 tr\u1ee3 x\u00e2y d\u1ef1ng giao di\u1ec7n nhanh ch\u00f3ng, tuy nhi\u00ean h\u01b0\u1edbng ti\u1ebfp c\u1eadn l\u1ea1i ho\u00e0n to\u00e0n kh\u00e1c nhau.<\/p>\n\n\n\n<p>Bootstrap t\u1eadp trung cung c\u1ea5p s\u1eb5n c\u00e1c th\u00e0nh ph\u1ea7n UI ho\u00e0n ch\u1ec9nh nh\u01b0 button, card, form, navbar,\u2026 c\u00f2n Tailwind l\u1ea1i \u0111i theo tri\u1ebft l\u00fd \u201cutility-first\u201d &#8211; cho ph\u00e9p b\u1ea1n t\u1ef1 t\u1ea1o m\u1ecdi th\u1ee9 t\u1eeb c\u00e1c class nh\u1ecf. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng so s\u00e1nh nhanh gi\u1eefa hai framework n\u00e0y:<\/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>Bootstrap<\/strong><\/td><td><strong>Tailwind CSS<\/strong><\/td><\/tr><tr><td><strong>M\u1ee5c ti\u00eau<\/strong><\/td><td>D\u1ef1ng nhanh giao di\u1ec7n UI ho\u00e0n ch\u1ec9nh<\/td><td>T\u00f9y bi\u1ebfn chi ti\u1ebft t\u1eebng th\u00e0nh ph\u1ea7n theo \u00fd mu\u1ed1n<\/td><\/tr><tr><td><strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong><\/td><td>D\u00f9ng c\u00e1c class component c\u00f3 s\u1eb5n (.btn, .card, .navbar)<\/td><td>D\u00f9ng utility class (px-4, text-lg, bg-blue-500)<\/td><\/tr><tr><td><strong>\u0110\u1ed9 linh ho\u1ea1t<\/strong><\/td><td>Cao (c\u00f3 th\u1ec3 ghi \u0111\u00e8 ho\u1eb7c m\u1edf r\u1ed9ng qua Sass variables)<\/td><td>R\u1ea5t cao (t\u1ef1 t\u1ea1o style ri\u00eang t\u1eeb utilities)<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn<\/strong><\/td><td>D\u1ec5 cho ng\u01b0\u1eddi m\u1edbi, c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng<\/td><td>C\u1ea7n th\u1eddi gian l\u00e0m quen c\u00fa ph\u00e1p v\u00e0 c\u00e1ch k\u1ebft h\u1ee3p class<\/td><\/tr><tr><td><strong>Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/strong><\/td><td>D\u1ef1 \u00e1n nh\u1ecf\u2013trung b\u00ecnh, c\u1ea7n giao di\u1ec7n nhanh v\u00e0 \u0111\u1ed3ng nh\u1ea5t<\/td><td>D\u1ef1 \u00e1n l\u1edbn, y\u00eau c\u1ea7u thi\u1ebft k\u1ebf \u0111\u1ed9c \u0111\u00e1o ho\u1eb7c h\u1ec7 th\u1ed1ng design ri\u00eang<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Vi\u1ec7c hi\u1ec3u \u0111\u01b0\u1ee3c \u0111i\u1ec3m kh\u00e1c bi\u1ec7t gi\u1eefa hai framework n\u00e0y s\u1ebd gi\u00fap b\u1ea1n ch\u1ecdn \u0111\u00fang c\u00f4ng c\u1ee5 ph\u00f9 h\u1ee3p v\u1edbi m\u1ee5c ti\u00eau h\u1ecdc t\u1eadp ho\u1eb7c d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Xem th\u00eam b\u00e0i vi\u1ebft so s\u00e1nh chi ti\u1ebft v\u1ec1 <\/em><a href=\"https:\/\/itviec.com\/blog\/tailwind-vs-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Tailwind vs Bootstrap<\/strong><\/em><\/a><em> \u0111\u1ec3 hi\u1ec3u r\u00f5 \u01b0u nh\u01b0\u1ee3c \u0111i\u1ec3m c\u1ee7a t\u1eebng framework.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-h\u1ecdc-bootstrap-co-c\u1ea7n-gi\u1ecfi-html-css-tr\u01b0\u1edbc-khong\"><strong>H\u1ecdc Bootstrap c\u00f3 c\u1ea7n gi\u1ecfi HTML\/CSS tr\u01b0\u1edbc kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Khi h\u1ecdc Bootstrap, b\u1ea1n kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i gi\u1ecfi HTML\/CSS, nh\u01b0ng b\u1ea1n c\u1ea7n n\u1eafm ch\u1eafc n\u1ec1n t\u1ea3ng ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n.<\/p>\n\n\n\n<p>Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean CSS, v\u00ec v\u1eady n\u1ebfu b\u1ea1n hi\u1ec3u c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 display, margin, padding, flexbox hay grid, b\u1ea1n s\u1ebd h\u1ecdc Bootstrap r\u1ea5t nhanh.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, m\u1eb7c d\u00f9 Bootstrap gi\u00fap b\u1ea1n t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 vi\u1ebft code giao di\u1ec7n, nh\u01b0ng n\u00f3 kh\u00f4ng thay th\u1ebf vi\u1ec7c hi\u1ec3u CSS. N\u00f3i c\u00e1ch kh\u00e1c, Bootstrap l\u00e0 c\u00f4ng c\u1ee5 h\u1ed7 tr\u1ee3, c\u00f2n CSS v\u1eabn l\u00e0 \u201cc\u1ed1t l\u00f5i\u201d gi\u00fap b\u1ea1n hi\u1ec3u s\u00e2u v\u00e0 tu\u1ef3 ch\u1ec9nh \u0111\u01b0\u1ee3c m\u1ecdi th\u1ee9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bootstrap-5-khac-gi-bootstrap-4\"><strong>Bootstrap 5 kh\u00e1c g\u00ec Bootstrap 4?<\/strong><\/h3>\n\n\n\n<p>Bootstrap 5 \u0111\u01b0\u1ee3c xem l\u00e0 b\u01b0\u1edbc chuy\u1ec3n m\u00ecnh l\u1edbn nh\u1ea5t k\u1ec3 t\u1eeb khi framework ra \u0111\u1eddi, v\u1edbi m\u1ee5c ti\u00eau hi\u1ec7n \u0111\u1ea1i h\u01a1n, nh\u1eb9 h\u01a1n v\u00e0 linh ho\u1ea1t h\u01a1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng thay \u0111\u1ed5i \u0111\u00e1ng ch\u00fa \u00fd nh\u1ea5t:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lo\u1ea1i b\u1ecf jQuery:<\/strong> T\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n (Modal, Dropdown, Tooltip, v.v.) gi\u1edd \u0111\u00e2y ho\u1ea1t \u0111\u1ed9ng ho\u00e0n to\u00e0n b\u1eb1ng JS thu\u1ea7n, gi\u00fap gi\u1ea3m k\u00edch th\u01b0\u1edbc v\u00e0 t\u0103ng hi\u1ec7u n\u0103ng<\/li>\n\n\n\n<li><strong>Ng\u1eebng h\u1ed7 tr\u1ee3 Internet Explorer:<\/strong> Bootstrap 5 t\u1eadp trung v\u00e0o tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i (Chrome, Edge, Firefox, Safari), lo\u1ea1i b\u1ecf c\u00e1c \u0111o\u1ea1n code t\u01b0\u01a1ng th\u00edch IE<\/li>\n\n\n\n<li><strong>C\u1ea3i ti\u1ebfn Grid System:<\/strong> Th\u00eam breakpoint m\u1edbi xxl cho m\u00e0n h\u00ecnh l\u1edbn, lo\u1ea1i b\u1ecf no-gutters, thay b\u1eb1ng g-*, gx-*, gy-* \u0111\u1ec3 qu\u1ea3n l\u00fd kho\u1ea3ng c\u00e1ch linh ho\u1ea1t h\u01a1n<\/li>\n\n\n\n<li><strong>B\u1ed5 sung Component m\u1edbi:<\/strong> Offcanvas (menu tr\u01b0\u1ee3t), Accordion hi\u1ec7n \u0111\u1ea1i h\u01a1n, C\u1ea3i ti\u1ebfn Toast, Modal, Carousel<\/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 th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/bootstrap-5-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstrap 5 l\u00e0 g\u00ec? Nh\u1eefng thay \u0111\u1ed5i n\u1ed5i b\u1eadt \u1edf Bootstrap 5<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-nen-h\u1ecdc-bootstrap-tr\u01b0\u1edbc-tailwind-khong\"><strong>C\u00f3 n\u00ean h\u1ecdc Bootstrap tr\u01b0\u1edbc Tailwind kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>C\u00e2u tr\u1ea3 l\u1eddi l\u00e0 n\u00ean, \u0111\u1eb7c bi\u1ec7t n\u1ebfu b\u1ea1n \u0111ang \u1edf giai \u0111o\u1ea1n h\u1ecdc front-end t\u1eeb \u0111\u1ea7u. Bootstrap l\u00e0 framework h\u01b0\u1edbng c\u1ea5u tr\u00fac (structure-first), trong khi Tailwind l\u00e0 framework h\u01b0\u1edbng ti\u1ec7n \u00edch (utility-first). V\u00ec v\u1eady, vi\u1ec7c h\u1ecdc Bootstrap tr\u01b0\u1edbc gi\u00fap b\u1ea1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3u \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c giao di\u1ec7n, t\u01b0 duy responsive, v\u00e0 c\u00e1ch t\u1ed5 ch\u1ee9c component \u2013 n\u1ec1n t\u1ea3ng quan tr\u1ecdng \u0111\u1ec3 h\u1ecdc b\u1ea5t k\u1ef3 framework CSS n\u00e0o kh\u00e1c<\/li>\n\n\n\n<li>L\u00e0m quen v\u1edbi class ti\u1ec7n \u00edch nh\u01b0 .text-center, .p-4, .bg-primary, gi\u00fap chuy\u1ec3n sang Tailwind nhanh h\u01a1n<\/li>\n\n\n\n<li>T\u1ea1o s\u1ea3n ph\u1ea9m th\u1eadt ngay t\u1eeb s\u1edbm: t\u1eeb landing page, dashboard, \u0111\u1ebfn blog, m\u00e0 kh\u00f4ng c\u1ea7n lo v\u1ec1 thi\u1ebft k\u1ebf qu\u00e1 nhi\u1ec1u<\/li>\n\n\n\n<li>\u0110\u1eb7c bi\u1ec7t, Bootstrap v\u1eabn \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn trong m\u00f4i tr\u01b0\u1eddng doanh nghi\u1ec7p v\u00e0 c\u00e1c d\u1ef1 \u00e1n n\u1ed9i b\u1ed9, n\u00ean vi\u1ec7c th\u00e0nh th\u1ea1o n\u00f3 v\u1eabn l\u00e0 m\u1ed9t \u0111i\u1ec3m c\u1ed9ng l\u1edbn trong h\u1ed3 s\u01a1 ngh\u1ec1 nghi\u1ec7p.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap l\u00e0 m\u1ed9t framework front-end m\u1ea1nh m\u1ebd v\u00e0 ph\u1ed5 bi\u1ebfn h\u00e0ng \u0111\u1ea7u hi\u1ec7n nay, gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean x\u00e2y d\u1ef1ng giao di\u1ec7n web nhanh ch\u00f3ng, chu\u1ea9n responsive v\u00e0 d\u1ec5 m\u1edf r\u1ed9ng. Vi\u1ec7c n\u1eafm v\u1eefng ki\u1ebfn th\u1ee9c v\u1ec1 Bootstrap kh\u00f4ng ch\u1ec9 gi\u00fap b\u1ea1n t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n giao di\u1ec7n, m\u00e0 c\u00f2n n\u00e2ng cao kh\u1ea3 n\u0103ng l\u00e0m vi\u1ec7c nh\u00f3m v\u00e0 c\u01a1 h\u1ed9i ngh\u1ec1 nghi\u1ec7p trong m\u00f4i tr\u01b0\u1eddng c\u00f4ng ngh\u1ec7 hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n\n\n<p>V\u1edbi l\u1ed9 tr\u00ecnh h\u1ecdc Bootstrap m\u00e0 ITviec t\u1ed5ng h\u1ee3p, hi v\u1ecdng b\u1ea1n c\u00f3 th\u1ec3 x\u00e2y d\u1ef1ng cho m\u00ecnh m\u1ed9t k\u1ebf ho\u1ea1ch h\u1ecdc t\u1eadp chi ti\u1ebft, th\u1ef1c h\u00e0nh hi\u1ec7u qu\u1ea3, v\u00e0 t\u1eebng b\u01b0\u1edbc l\u00e0m ch\u1ee7 c\u00f4ng c\u1ee5 giao di\u1ec7n tuy\u1ec7t v\u1eddi n\u00e0y.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Bootstrap v\u1eabn l\u00e0 \u201cb\u1ed9 khung\u201d \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 b\u1ea1n d\u1ef1ng layout nhanh, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n, v\u00e0 \u0111\u1ea3m b\u1ea3o responsive tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb. D\u00f9 c\u00f3 nhi\u1ec1u l\u1ef1a ch\u1ecdn m\u1edbi nh\u01b0 Tailwind hay Chakra UI, Bootstrap v\u1eabn \u0111\u01b0\u1ee3c \u01b0a chu\u1ed9ng nh\u1edd d\u1ec5 h\u1ecdc, \u1ed5n \u0111\u1ecbnh v\u00e0 ph\u00f9 h\u1ee3p [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":93373,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-92447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u l\u1ed9 tr\u00ecnh h\u1ecdc Bootstrap cho ng\u01b0\u1eddi m\u1edbi: t\u1eeb c\u00e0i \u0111\u1eb7t, grid, flexbox, responsive \u0111\u1ebfn components v\u00e0 tips h\u1ecdc nhanh.\" \/>\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\/lo-trinh-tu-hoc-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u\" \/>\n<meta property=\"og:description\" content=\"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Bootstrap v\u1eabn l\u00e0 \u201cb\u1ed9 khung\u201d \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 b\u1ea1n d\u1ef1ng layout nhanh, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n, v\u00e0 \u0111\u1ea3m b\u1ea3o responsive tr\u00ean m\u1ecdi thi\u1ebft\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-30T15:29:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T02:47:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-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=\"32 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u - ITviec Blog","description":"T\u00ecm hi\u1ec3u l\u1ed9 tr\u00ecnh h\u1ecdc Bootstrap cho ng\u01b0\u1eddi m\u1edbi: t\u1eeb c\u00e0i \u0111\u1eb7t, grid, flexbox, responsive \u0111\u1ebfn components v\u00e0 tips h\u1ecdc nhanh.","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\/lo-trinh-tu-hoc-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u","og_description":"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, Bootstrap v\u1eabn l\u00e0 \u201cb\u1ed9 khung\u201d \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 b\u1ea1n d\u1ef1ng layout nhanh, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n, v\u00e0 \u0111\u1ea3m b\u1ea3o responsive tr\u00ean m\u1ecdi thi\u1ebft","og_url":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-11-30T15:29:30+00:00","article_modified_time":"2025-12-02T02:47:11+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-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":"32 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u","datePublished":"2025-11-30T15:29:30+00:00","dateModified":"2025-12-02T02:47:11+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/"},"wordCount":7531,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/","url":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/","name":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-bootstrap-scaled.png","datePublished":"2025-11-30T15:29:30+00:00","dateModified":"2025-12-02T02:47:11+00:00","description":"T\u00ecm hi\u1ec3u l\u1ed9 tr\u00ecnh h\u1ecdc Bootstrap cho ng\u01b0\u1eddi m\u1edbi: t\u1eeb c\u00e0i \u0111\u1eb7t, grid, flexbox, responsive \u0111\u1ebfn components v\u00e0 tips h\u1ecdc nhanh.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/hoc-bootstrap-scaled.png","width":800,"height":421,"caption":"h\u1ecdc bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/lo-trinh-tu-hoc-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"T\u1ef1 h\u1ecdc Bootstrap: L\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc hi\u1ec7u qu\u1ea3 cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u"}]},{"@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\/92447","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=92447"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/92447\/revisions"}],"predecessor-version":[{"id":93416,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/92447\/revisions\/93416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/93373"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=92447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=92447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=92447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}