{"id":88597,"date":"2025-06-29T21:45:17","date_gmt":"2025-06-29T14:45:17","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=88597"},"modified":"2025-07-10T11:32:02","modified_gmt":"2025-07-10T04:32:02","slug":"huong-dan-su-dung-bootstrap-grid","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/","title":{"rendered":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Bootstrap_Grid_la_gi\" >Bootstrap Grid l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Dac_diem_chinh_cua_Grid_System_trong_Bootstrap\" >\u0110\u1eb7c \u0111i\u1ec3m ch\u00ednh c\u1ee7a Grid System trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Loi_ich_khi_dung_Grid_System_cua_Bootstrap\" >L\u1ee3i \u00edch khi d\u00f9ng Grid System c\u1ee7a Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Cau_truc_co_ban_cua_Bootstrap_Grid\" >C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Bootstrap Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Cac_tinh_nang_nang_cao_trong_Grid_Bootstrap\" >C\u00e1c t\u00ednh n\u0103ng n\u00e2ng cao trong Grid Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Grid_responsive_voi_breakpoint_trong_Bootstrap\" >Grid responsive v\u1edbi breakpoint trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Khi_nao_dung_Grid_khi_nao_dung_Flex\" >Khi n\u00e0o d\u00f9ng Grid, khi n\u00e0o d\u00f9ng Flex?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Nhung_luu_y_khi_dung_Grid_trong_Bootstrap\" >Nh\u1eefng l\u01b0u \u00fd khi d\u00f9ng Grid trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#Bai_tap_luyen_tap_Grid_Bootstrap\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp Grid Bootstrap<\/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\/huong-dan-su-dung-bootstrap-grid\/#Cau_hoi_thuong_gap_ve_Bootstrap_Grid\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap Grid<\/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\/huong-dan-su-dung-bootstrap-grid\/#Tong_Ket\" >T\u1ed5ng K\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Khi thi\u1ebft k\u1ebf giao di\u1ec7n web, vi\u1ec7c chia b\u1ed1 c\u1ee5c sao cho h\u1ee3p l\u00fd, \u0111\u1eb9p m\u1eaft v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi thi\u1ebft b\u1ecb lu\u00f4n l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. Bootstrap gi\u00fap \u0111\u01a1n gi\u1ea3n ho\u00e1 \u0111i\u1ec1u \u0111\u00f3 v\u1edbi Grid System. \u0110\u00e2y l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi d\u1ef1a tr\u00ean Flexbox, cho ph\u00e9p b\u1ea1n d\u1ec5 d\u00e0ng chia layout th\u00e0nh c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t, linh ho\u1ea1t v\u00e0 responsive m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS.<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u h\u01a1n v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grid system trong Bootstrap l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>C\u00e1c k\u1ef9 thu\u1eadt s\u1eed d\u1ee5ng Grid t\u1eeb c\u01a1 b\u1ea3n v\u00e0 n\u00e2ng cao<\/li>\n\n\n\n<li>Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Grid trong Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bootstrap-grid-la-gi\"><span class=\"ez-toc-section\" id=\"Bootstrap_Grid_la_gi\"><\/span><strong>Bootstrap Grid l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ec7 th\u1ed1ng l\u01b0\u1edbi (Grid system) c\u1ee7a Bootstrap l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd, gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng c\u00e1c layout linh ho\u1ea1t v\u00e0 responsive m\u1ed9t c\u00e1ch nhanh ch\u00f3ng. D\u1ef1a tr\u00ean <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox trong Bootstrap<\/a> v\u00e0 thi\u1ebft k\u1ebf mobile-first, Bootstrap Grid cho ph\u00e9p b\u1ea1n t\u1ea1o b\u1ed1 c\u1ee5c m\u1ecdi h\u00ecnh d\u1ea1ng v\u00e0 k\u00edch th\u01b0\u1edbc, t\u1eeb \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn ph\u1ee9c t\u1ea1p, ch\u1ec9 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c class ti\u1ec7n \u00edch \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a s\u1eb5n.<\/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: <strong><a href=\"https:\/\/itviec.com\/blog\/bootstrap-5-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap 5 l\u00e0 g\u00ec? Nh\u1eefng thay \u0111\u1ed5i n\u1ed5i b\u1eadt \u1edf Bootstrap 5<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-d\u1eb7c-di\u1ec3m-chinh-c\u1ee7a-grid-system-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Dac_diem_chinh_cua_Grid_System_trong_Bootstrap\"><\/span><strong>\u0110\u1eb7c \u0111i\u1ec3m ch\u00ednh c\u1ee7a Grid System trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean Flexbox:<\/strong> Grid s\u1eed d\u1ee5ng Flexbox \u1edf c\u1ea5p \u0111\u1ed9 <strong><code>.row<\/code><\/strong>, mang l\u1ea1i kh\u1ea3 n\u0103ng c\u0103n ch\u1ec9nh theo c\u1ea3 chi\u1ec1u ngang v\u00e0 d\u1ecdc, \u0111\u1ed3ng th\u1eddi t\u01b0\u01a1ng th\u00edch v\u1edbi c\u00e1c ti\u1ec7n \u00edch kh\u00e1c c\u1ee7a Bootstrap nh\u01b0 <strong><code>justify-content-*<\/code><\/strong>, <strong><code>align-items-*<\/code><\/strong>, v.v.<\/li>\n\n\n\n<li><strong>Thi\u1ebfu k\u1ebf theo h\u01b0\u1edbng Mobile-first:<\/strong> T\u1ea5t c\u1ea3 c\u00e1c layout \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo h\u01b0\u1edbng ti\u1ebfp c\u1eadn mobile-first, ngh\u0129a l\u00e0 giao di\u1ec7n \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a tr\u01b0\u1edbc cho thi\u1ebft b\u1ecb nh\u1ecf, sau \u0111\u00f3 m\u1edf r\u1ed9ng d\u1ea7n cho m\u00e0n h\u00ecnh l\u1edbn h\u01a1n.<\/li>\n\n\n\n<li><strong>H\u1ec7 th\u1ed1ng bao g\u1ed3m 12 c\u1ed9t:<\/strong> M\u1ed7i h\u00e0ng (<strong>.row<\/strong>) \u0111\u01b0\u1ee3c chia th\u00e0nh <strong>12<\/strong> \u0111\u01a1n v\u1ecb c\u1ed9t, cho ph\u00e9p b\u1ea1n linh ho\u1ea1t chia nh\u1ecf kh\u00f4ng gian t\u00f9y theo t\u1ef7 l\u1ec7 mong mu\u1ed1n cho c\u00e1c ph\u1ea7n t\u1eed n\u1eb1m tr\u00ean m\u1ed9t h\u00e0ng (v\u00ed d\u1ee5: 6-6, 4-4-4, 3-9\u2026).<\/li>\n\n\n\n<li><strong>H\u1ed7 tr\u1ee3 responsive m\u1eb7c \u0111\u1ecbnh: <\/strong>Grid system c\u00f3 h\u1ed7 tr\u1ee3 c\u00e1c breakpoint s\u1eb5n g\u1ed3m <strong>xs<\/strong>, <strong>sm<\/strong>, <strong>md<\/strong>, <strong>lg<\/strong>, <strong>xl<\/strong>, v\u00e0 <strong>xxl<\/strong>, gi\u00fap b\u1ea1n t\u1ea1o layout t\u01b0\u01a1ng th\u00edch v\u1edbi m\u1ecdi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam media queries th\u1ee7 c\u00f4ng.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-l\u1ee3i-ich-khi-dung-grid-system-c\u1ee7a-bootstrap\"><span class=\"ez-toc-section\" id=\"Loi_ich_khi_dung_Grid_System_cua_Bootstrap\"><\/span><strong>L\u1ee3i \u00edch khi d\u00f9ng Grid System c\u1ee7a Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>S\u1eed d\u1ee5ng Grid System trong Bootstrap mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch r\u00f5 r\u1ec7t cho qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X\u00e2y d\u1ef1ng layout nhanh ch\u00f3ng: <\/strong>Grid system cung c\u1ea5p c\u00e1c class HTML nh\u01b0 <strong><code>.row<\/code><\/strong>, <strong><code>.col-6<\/code><\/strong>, <strong><code>.offset-md-2<\/code><\/strong>,&#8230; gi\u00fap nhanh ch\u00f3ng x\u00e2y d\u1ef1ng layout chuy\u00ean nghi\u1ec7p cho trang web.<\/li>\n\n\n\n<li><strong>T\u01b0\u01a1ng th\u00edch v\u1edbi nhi\u1ec1u thi\u1ebft b\u1ecb:<\/strong> Grid ho\u1ea1t \u0111\u1ed9ng theo thi\u1ebft k\u1ebf mobile-first, h\u1ed7 tr\u1ee3 6 c\u1ea5p breakpoint, t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh b\u1ed1 c\u1ee5c theo k\u00edch th\u01b0\u1edbc thi\u1ebft b\u1ecb.<\/li>\n\n\n\n<li><strong>D\u1ec5 d\u00e0ng b\u1ea3o tr\u00ec: <\/strong>H\u1ec7 th\u1ed1ng Grid v\u1edbi c\u00e1c class ti\u1ec7n \u00edch gi\u00fap \u0111\u1ecbnh d\u1ea1ng layout c\u00f3 c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng, d\u1ec5 \u0111\u1ecdc, gi\u00fap c\u1ea3 team l\u00e0m vi\u1ec7c th\u1ed1ng nh\u1ea5t, nhanh ch\u00f3ng c\u1eadp nh\u1eadt giao di\u1ec7n m\u00e0 kh\u00f4ng lo v\u1ee1 layout.<\/li>\n\n\n\n<li><strong>Linh ho\u1ea1t \u0111\u1ec3 m\u1edf r\u1ed9ng: <\/strong>Bootstrap h\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh Grid th\u00f4ng qua bi\u1ebfn Sass v\u00e0 mixin, cho ph\u00e9p \u0111i\u1ec1u ch\u1ec9nh s\u1ed1 c\u1ed9t, kho\u1ea3ng c\u00e1ch, breakpoint theo nhu c\u1ea7u.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-c\u01a1-b\u1ea3n-c\u1ee7a-bootstrap-grid\"><span class=\"ez-toc-section\" id=\"Cau_truc_co_ban_cua_Bootstrap_Grid\"><\/span><strong>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Bootstrap Grid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hang-row\"><strong>H\u00e0ng (.row)<\/strong><\/h3>\n\n\n\n<p>Trong h\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap, <strong><code>.row<\/code><\/strong> l\u00e0 th\u00e0nh ph\u1ea7n trung gian gi\u1eefa container v\u00e0 c\u1ed9t. N\u00f3 \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t flex container, gi\u00fap t\u1ed5 ch\u1ee9c c\u00e1c c\u1ed9t (<strong><code>.col-*<\/code><\/strong>) th\u00e0nh h\u00e0ng ngang, \u0111\u1ed3ng th\u1eddi qu\u1ea3n l\u00fd kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t th\u00f4ng qua h\u1ec7 th\u1ed1ng gutter (kho\u1ea3ng c\u00e1ch l\u1ec1 trong). N\u00f3i c\u00e1ch kh\u00e1c, <strong><code>.row<\/code><\/strong> l\u00e0 \u201cx\u01b0\u01a1ng s\u1ed1ng\u201d c\u1ee7a Grid, v\u00e0 n\u1ebfu kh\u00f4ng c\u00f3 n\u00f3, h\u1ec7 th\u1ed1ng c\u1ed9t s\u1ebd kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb \u0111\u00fang c\u1ea5u tr\u00fac.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng <strong><code>.row<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t 1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t 2&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t 3&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdzqwHKz9Vr8xxby4dud9uBTZ5FHCl8WcUIgQ4SuRizsJSMh5MhJFJ3DLqD-gId6mzEl_vJ_jIDvNhisw3Re08unMpJeZkjxuRXjgCwjFV_wRAEJLJRZVPmmShsxMWJS0h6ZSM1jQ?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi b\u1ea1n khai b\u00e1o <strong><code>&lt;div class=\"row\"&gt;<\/code><\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng <strong><code>display: flex<\/code><\/strong> v\u00e0 <strong><code>flex-wrap: wrap<\/code><\/strong> \u0111\u1ec3 s\u1eafp x\u1ebfp c\u00e1c c\u1ed9t theo h\u00e0ng ngang, \u0111\u1ed3ng th\u1eddi h\u1ed7 tr\u1ee3 xu\u1ed1ng d\u00f2ng khi c\u1ea7n thi\u1ebft.<\/li>\n\n\n\n<li>T\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed con<strong> <code>.col<\/code><\/strong>, <strong><code>.col-*<\/code><\/strong>, ho\u1eb7c <strong><code>.col-{breakpoint}-{s\u1ed1}<\/code><\/strong> ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1eb7t tr\u1ef1c ti\u1ebfp b\u00ean trong <strong><code>.row<\/code><\/strong>. N\u1ebfu b\u1ea1n b\u1ecf qua <strong><code>.row<\/code><\/strong>, c\u00e1c c\u1ed9t s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp \u0111\u00fang theo h\u1ec7 th\u1ed1ng l\u01b0\u1edbi.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ed9t-t\u1ef1-d\u1ed9ng-va-chia-t\u1ef7-l\u1ec7\"><strong>C\u1ed9t t\u1ef1 \u0111\u1ed9ng v\u00e0 chia t\u1ef7 l\u1ec7<\/strong><\/h3>\n\n\n\n<p>Bootstrap s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng 12 c\u1ed9t trong m\u1ed7i <strong><code>.row<\/code><\/strong>, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh \u0111\u1ed9 r\u1ed9ng c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed tr\u00ean m\u1ed9t <strong><code>.row<\/code><\/strong> b\u1eb1ng c\u00e1ch ch\u1ec9 \u0111\u1ecbnh s\u1ed1 c\u1ed9t m\u00e0 ph\u1ea7n t\u1eed \u0111\u00f3 s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdC2sEmtefqr1dGer2V5e8PFppxnYXXEr9fwWPVtKYe16IJwAhvC9ebHqAF7zKnLj43hsWEosZkclFixtVc51FjW-cePEBvVojaiCXAP__KSxxleg-2VUcQrp6RkTq306YMOnsnmw?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>C\u00f3 hai c\u00e1ch \u0111\u1ec3 chia c\u1ed9t:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>C\u1ed9t t\u1ef1 \u0111\u1ed9ng chia \u0111\u1ec1u (.col)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong>.col<\/strong> cho c\u00e1c ph\u1ea7n t\u1eed trong <strong><code>.row<\/code> <\/strong>\u0111\u1ec3 ch\u00fang t\u1ef1 \u0111\u1ed9ng chi\u1ebfm m\u1ed9t ph\u1ea7n kh\u00f4ng gian b\u1eb1ng nhau. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcyWTmoAV4te9jrjfmCD_sPBGy0_yJHbrvqxrq2eKWzEzNG5ct5sgShq81aqRwvsfk1vA8G1wvbWvv1PcsrPoUEnmzKFdzjmLKMA-a2CQunetq-pt-BLAdOWJZBFG_CyZ7ngzmBTg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Nh\u01b0 v\u00ed d\u1ee5 tr\u00ean, <strong><code>.row<\/code> <\/strong>c\u00f3 3 ph\u1ea7n t\u1eed <strong>div<\/strong> s\u1eed d\u1ee5ng class <strong><code>.col<\/code><\/strong>, m\u1ed7i ph\u1ea7n t\u1eed \u0111\u1ec1u chi\u1ebfm m\u1ed9t ph\u1ea7n di\u1ec7n t\u00edch b\u1eb1ng nhau (t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi 4 c\u1ed9t).<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>C\u1ed9t chia t\u1ef7 l\u1ec7 c\u1ed1 \u0111\u1ecbnh (.col-*)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 chia c\u1ee5 th\u1ec3 t\u1ef7 l\u1ec7 c\u1ed9t cho t\u1eebng ph\u1ea7n t\u1eed b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng .col-{s\u1ed1} (trong \u0111\u00f3 {s\u1ed1} l\u00e0 1\u201312):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col-4\">Chi\u1ebfm 4\/12&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col-8\">Chi\u1ebfm 8\/12&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcDJjDLVzDA3mwZyyQdUBQvXJiqOMEe4jzZGbbbRJATj1wGLXl0rRCgcWyobKfeKnTPYfVgVlyBE6ZAxqlA-EPnT6tpdhQ8F5BV51cN0x1YFF29HVcTofKvjh8teqFPG6FUg13gpg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, t\u1ed5ng s\u1ed1 c\u1ed9t kh\u00f4ng \u0111\u01b0\u1ee3c v\u01b0\u1ee3t qu\u00e1 12 \u0111\u1ec3 tr\u00e1nh t\u00ecnh tr\u1ea1ng b\u1ecb r\u1edbt d\u00f2ng ngo\u00e0i \u00fd mu\u1ed1n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-lo\u1ea1i-container\"><strong>C\u00e1c lo\u1ea1i Container<\/strong><\/h3>\n\n\n\n<p>Trong h\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap, Container \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t \u201ckhung n\u1ec1n\u201d bao quanh to\u00e0n b\u1ed9 layout. D\u00f9 b\u1ea1n c\u00f3 s\u1eed d\u1ee5ng bao nhi\u00eau h\u00e0ng (<strong><code>.row<\/code><\/strong>) v\u00e0 c\u1ed9t (<strong><code>.col-*<\/code><\/strong>), th\u00ec t\u1ea5t c\u1ea3 \u0111\u1ec1u c\u1ea7n \u0111\u01b0\u1ee3c b\u1ecdc trong m\u1ed9t container \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c c\u0103n l\u1ec1 ch\u00ednh x\u00e1c, kho\u1ea3ng c\u00e1ch \u0111\u1ec1u \u0111\u1eb7n, v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 h\u00e0nh vi responsive \u1ed5n \u0111\u1ecbnh.<\/p>\n\n\n\n<p>Container gi\u00fap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u0103n gi\u1eefa n\u1ed9i dung theo chi\u1ec1u ngang c\u1ee7a tr\u00ecnh duy\u1ec7t<\/li>\n\n\n\n<li>Th\u00eam padding hai b\u00ean \u0111\u1ec3 tr\u00e1nh n\u1ed9i dung s\u00e1t m\u00e9p<\/li>\n\n\n\n<li>Qu\u1ea3n l\u00fd chi\u1ec1u r\u1ed9ng t\u1ed1i \u0111a theo t\u1eebng breakpoint<\/li>\n\n\n\n<li>Kh\u1edfi t\u1ea1o context cho layout grid \u2013 t\u1ee9c l\u00e0 <strong><code>.row<\/code><\/strong> v\u00e0 <strong><code>.col<\/code><\/strong> ph\u1ea3i n\u1eb1m b\u00ean trong <strong><code>.container<\/code><\/strong> th\u00ec h\u1ec7 th\u1ed1ng l\u01b0\u1edbi m\u1edbi ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang<\/li>\n<\/ul>\n\n\n\n<p>Bootstrap cung c\u1ea5p 3 lo\u1ea1i container ch\u00ednh, m\u1ed7i lo\u1ea1i c\u00f3 h\u00e0nh vi kh\u00e1c nhau v\u1ec1 chi\u1ec1u r\u1ed9ng v\u00e0 kh\u1ea3 n\u0103ng responsive:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-container\"><strong>.container<\/strong><\/h4>\n\n\n\n<p>C\u1ed1 \u0111\u1ecbnh theo t\u1eebng k\u00edch th\u01b0\u1edbc.<\/p>\n\n\n\n<p>\u0110\u00e2y l\u00e0 lo\u1ea1i container m\u1eb7c \u0111\u1ecbnh. N\u00f3 c\u00f3 chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh v\u00e0 s\u1ebd t\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i theo breakpoint \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft b\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Breakpoint<\/strong><\/td><td><strong>Chi\u1ec1u r\u1ed9ng t\u1ed1i \u0111a (.container)<\/strong><\/td><\/tr><tr><td>sm (\u2265576px)<\/td><td>540px<\/td><\/tr><tr><td>md (\u2265768px)<\/td><td>720px<\/td><\/tr><tr><td>lg (\u2265992px)<\/td><td>960px<\/td><\/tr><tr><td>xl (\u22651200px)<\/td><td>1140px<\/td><\/tr><tr><td>xxl (\u22651400px)<\/td><td>1320px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">C\u1ed9t 1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">C\u1ed9t 2&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-container-fluid\"><strong>.container-fluid<\/strong><\/h4>\n\n\n\n<p>Lu\u00f4n 100% chi\u1ec1u ngang.<\/p>\n\n\n\n<p>Container n\u00e0y s\u1ebd c\u00f3 chi\u1ec1u r\u1ed9ng lu\u00f4n tr\u1ea3i d\u00e0i tr\u00ean to\u00e0n b\u1ed9 chi\u1ec1u ngang trong v\u00f9ng ch\u1ee9a, ph\u00f9 h\u1ee3p khi b\u1ea1n mu\u1ed1n n\u1ed9i dung d\u00e0n full chi\u1ec1u ngang kh\u00f4ng gi\u1edbi h\u1ea1n theo m\u00e0n h\u00ecnh nh\u01b0 dashboard, table nhi\u1ec1u c\u1ed9t, h\u00ecnh n\u1ec1n to\u00e0n trang.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container-fluid\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">n\u1ed9i dung chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-container-breakpoint\"><strong>.container-{breakpoint}<\/strong><\/h4>\n\n\n\n<p>Responsive theo breakpoint.<\/p>\n\n\n\n<p>Lo\u1ea1i container n\u00e0y k\u1ebft h\u1ee3p t\u00ednh n\u0103ng c\u1ee7a container th\u01b0\u1eddng v\u00e0 container-fluid. C\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1ede k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n breakpoint \u2192 r\u1ed9ng 100%<\/li>\n\n\n\n<li>\u1ede k\u00edch th\u01b0\u1edbc l\u1edbn h\u01a1n ho\u1eb7c b\u1eb1ng breakpoint \u2192 d\u00f9ng chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container-md\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">N\u1ed9i dung&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1ede mobile v\u00e0 tablet (&lt;768px): container c\u00f3 chi\u1ec1u r\u1ed9ng 100%<\/li>\n\n\n\n<li>\u1ede desktop (\u2265768px): container \u0111\u01b0\u1ee3c gi\u1edbi h\u1ea1n t\u1ed1i \u0111a 720px<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-tinh-nang-nang-cao-trong-grid-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_tinh_nang_nang_cao_trong_Grid_Bootstrap\"><\/span><strong>C\u00e1c t\u00ednh n\u0103ng n\u00e2ng cao trong Grid Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gutter\"><strong>Gutter<\/strong><\/h3>\n\n\n\n<p>Trong Bootstrap, gutter d\u00f9ng \u0111\u1ec3 ch\u1ec9 kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t trong m\u1ed9t h\u00e0ng (.row). N\u00f3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c c\u1ed9t trong layout kh\u00f4ng b\u1ecb \u201cd\u00ednh\u201d v\u00e0o nhau, t\u1eeb \u0111\u00f3 t\u1ea1o ra kho\u1ea3ng c\u00e1ch h\u1ee3p l\u00fd, th\u1ea9m m\u1ef9 v\u00e0 d\u1ec5 \u0111\u1ecdc gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed.<\/p>\n\n\n\n<p>Khi b\u1ea1n t\u1ea1o m\u1ed9t .row v\u00e0 \u0111\u1eb7t c\u00e1c .col v\u00e0o b\u00ean trong, Bootstrap s\u1ebd:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u00eam <strong><code>padding-left: 0.75rem<\/code><\/strong> v\u00e0 <strong><code>padding-right: 0.75rem<\/code><\/strong> cho m\u1ed7i .col, t\u1ed5ng c\u1ed9ng m\u1ed7i c\u1eb7p c\u1ed9t c\u00f3 1.5rem kho\u1ea3ng c\u00e1ch gi\u1eefa ch\u00fang.<\/li>\n\n\n\n<li>\u0110\u1ed3ng th\u1eddi, .row s\u1ebd c\u00f3 <strong><code>margin-left: -0.75rem<\/code><\/strong> v\u00e0 <strong><code>margin-right: -0.75rem<\/code><\/strong> \u0111\u1ec3 c\u00e2n b\u1eb1ng l\u1ea1i ph\u1ea7n padding, gi\u00fap c\u0103n n\u1ed9i dung th\u1eb3ng h\u00e0ng v\u1edbi container b\u00ean ngo\u00e0i.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdWFjqg_2vdq4YlVnvrM_Hj6u9swsePFY4cLNicse6yIvUZ2jzZ7VH__EtQZMHOami0DfO1t1CSpf1S_5UUjLLDhYnyR-C46QycbCEbO1osMxQmfRtIt_xiFdNgDoNJc_hW3Rfbgw?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd: Gutter ch\u1ec9 \u00e1p d\u1ee5ng cho kho\u1ea3ng c\u00e1ch ngang gi\u1eefa c\u00e1c c\u1ed9t. Kho\u1ea3ng c\u00e1ch d\u1ecdc gi\u1eefa c\u00e1c h\u00e0ng kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh l\u00e0 gutter m\u1eb7c \u0111\u1ecbnh \u2014 b\u1ea1n c\u1ea7n t\u1ef1 th\u00eam b\u1eb1ng margin ho\u1eb7c c\u00e1c class Bootstrap nh\u01b0 .mb-*, .gy-*.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u00e1ch tu\u1ef3 ch\u1ec9nh gutter<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Bootstrap 5 cung c\u1ea5p b\u1ed9 class ti\u1ec7n \u00edch \u0111\u1ec3 b\u1ea1n thay \u0111\u1ed5i gutter m\u1ed9t c\u00e1ch nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>T\u00e1c d\u1ee5ng<\/strong><\/td><\/tr><tr><td><strong>.g-{n}<\/strong><\/td><td>Thay \u0111\u1ed5i c\u1ea3 gutter ngang v\u00e0 d\u1ecdc<\/td><\/tr><tr><td><strong>.gx-{n}<\/strong><\/td><td>Ch\u1ec9 thay \u0111\u1ed5i gutter ngang (x-axis)<\/td><\/tr><tr><td><strong>.gy-{n}<\/strong><\/td><td>Ch\u1ec9 thay \u0111\u1ed5i gutter d\u1ecdc (y-axis)<\/td><\/tr><tr><td><strong>.g-0<\/strong><\/td><td>Xo\u00e1 ho\u00e0n to\u00e0n kho\u1ea3ng c\u00e1ch gi\u1eefa c\u1ed9t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u1edbi {n} t\u1eeb 0 \u2192 5 (t\u01b0\u01a1ng \u1ee9ng t\u1eeb 0 \u0111\u1ebfn ~3rem).<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 thay \u0111\u1ed5i gutter gi\u1eefa c\u00e1c c\u1ed9t:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi gx-1:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row gx-1\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t A&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t B&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdyuWC44xem_RE24M5DB-zClmvhVnh7cq3a4wem28QzF2bc16WBatqNlsC074FO1f-qgQIRCHRFNDPYk8Ec0mI6bwkgJaXYMx8BlMvBopSvrqKpIZ6F3IFRYZf2yzbQqynTFj6xCw?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi gx-5:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row gx-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t A (gx-5)&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col\">C\u1ed9t B (gx-5)&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf7eYohs2-V32nPO1a05DS2Rtyj9aqBdowFgkiq36oG4vbWmfwTAdjOyd3I-e-CEqDzTmdHM2-2wwJ8FKbqsQbRaY5o2yLVWZv8iy9NhorIExmxLabLodIYu8LheAvy-8ftOcmJ?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-offset-va-can-gi\u1eefa-c\u1ed9t\"><strong>Offset v\u00e0 c\u0103n gi\u1eefa c\u1ed9t<\/strong><\/h3>\n\n\n\n<p>Offset l\u00e0 k\u1ef9 thu\u1eadt cho ph\u00e9p b\u1ea1n t\u1ea1o kho\u1ea3ng tr\u1ed1ng b\u00ean tr\u00e1i m\u1ed9t c\u1ed9t, gi\u00fap c\u1ed9t \u0111\u00f3 \u201cl\u00f9i v\u00e0o trong\u201d m\u00e0 kh\u00f4ng c\u1ea7n th\u00eam ph\u1ea7n t\u1eed r\u1ed7ng. Bootstrap h\u1ed7 tr\u1ee3 c\u00e1c class d\u1ea1ng <strong><code>.offset-{breakpoint}-{s\u1ed1}<\/code><\/strong>, trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>{breakpoint}<\/code><\/strong>: l\u00e0 \u0111i\u1ec3m responsive nh\u01b0 <strong>sm, md, lg<\/strong>, v.v<\/li>\n\n\n\n<li><strong><code>{s\u1ed1}<\/code><\/strong>: l\u00e0 s\u1ed1 c\u1ed9t b\u1ea1n mu\u1ed1n d\u1ecbch sang (t\u1eeb 1 \u0111\u1ebfn 11)<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5: \u0111\u1ea9y m\u1ed9t ph\u1ea7n t\u1eed sang ph\u1ea3i<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row border\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col-md-4 offset-md-2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0C\u1ed9t n\u00e0y b\u1eaft \u0111\u1ea7u t\u1eeb v\u1ecb tr\u00ed c\u1ed9t th\u1ee9 3\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcKU9g-A-DKjsfufwiebw3nKX_0GgN6KMdPZ6YJ_xw9SFrGs0_42U0frqwf5ntpD53KJJNp16qfVGPceln1w3a8VlaR9k29WlLllBg_DXhk6bJFcSjw1X11snoNcj9_-LnEd8gaJA?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Mu\u1ed1n c\u0103n gi\u1eefa m\u1ed9t c\u1ed9t trong h\u00e0ng, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m theo 2 c\u00e1ch sau:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>D\u00f9ng offset th\u1ee7 c\u00f4ng<\/strong><\/li>\n<\/ol>\n\n\n\n<p>D\u1ef1a tr\u00ean nguy\u00ean l\u00fd chia layout th\u00e0nh 12 c\u1ed9t. B\u1ea1n c\u00f3 th\u1ec3 c\u0103n gi\u1eefa m\u1ed9t c\u1ed9t b\u1eb1ng c\u00e1ch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>T\u1ea1o c\u1ed9t c\u00f3 chi\u1ec1u r\u1ed9ng nh\u1ecf h\u01a1n 12<\/li>\n\n\n\n<li>C\u1ed9ng th\u00eam m\u1ed9t ph\u1ea7n offset \u1edf b\u00ean tr\u00e1i \u0111\u1ec3 \u0111\u1ea9y n\u00f3 ra gi\u1eefa<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5: c\u0103n gi\u1eefa c\u1ed9t r\u1ed9ng 6\/12 b\u1eb1ng offset<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row border\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border bg-primary text-white col-6 offset-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ph\u1ea7n t\u1eed \u1edf gi\u1eefa\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcpkRzGAadpXkdeHFTjhJNv7V3hbwL-1bhGdgeD_W5uKzWbmkVWSaPKhlblU8ESKXboRHF-Qhnc3A72lTAEy4LAv6KpX9JxZBUMbKzMbPGUe3wbraJGj73rD33qeimcnfjzrpOwcg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>D\u00f9ng Flexbox \u0111\u1ec3 c\u0103n gi\u1eefa<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch hi\u1ec7n \u0111\u1ea1i, linh ho\u1ea1t h\u01a1n, s\u1eed d\u1ee5ng s\u1ee9c m\u1ea1nh c\u1ee7a Flexbox (\u0111\u01b0\u1ee3c Bootstrap Grid t\u00edch h\u1ee3p s\u1eb5n t\u1eeb phi\u00ean b\u1ea3n 4 tr\u1edf \u0111i). Thay v\u00ec t\u00ednh to\u00e1n offset, b\u1ea1n ch\u1ec9 c\u1ea7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00c1p d\u1ee5ng <code>class justify-content-center<\/code> v\u00e0o .row<\/li>\n\n\n\n<li>\u0110\u1eb7t c\u1ed9t v\u00e0o trong nh\u01b0 b\u00ecnh th\u01b0\u1eddng<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5: c\u0103n gi\u1eefa c\u1ed9t b\u1ea5t k\u1ef3<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row border justify-content-center\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border bg-primary text-white col-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ph\u1ea7n t\u1eed \u1edf gi\u1eefa (Flexbox)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeaSKhoKAWY_vxasrGyoR-jFKzNYqEazKKGOKAPI4BLuEQmfW6DzNucto7cpaeM0iUTnjDaeUP2MwfEZzW1EOt8JSqUzcH0WGbDJ05uR14PSVDIk3WLA2rRG9Ea0sq1ERspnBTlnQ?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>B\u1ea1n kh\u00f4ng c\u1ea7n quan t\u00e2m \u0111\u1ebfn s\u1ed1 c\u1ed9t c\u00f2n l\u1ea1i, Flexbox s\u1ebd t\u1ef1 \u0111\u1ed9ng c\u0103n gi\u1eefa c\u1ed9t b\u00ean trong .row.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ed9t-t\u1ef1-d\u1ed9ng-theo-n\u1ed9i-dung\"><strong>C\u1ed9t t\u1ef1 \u0111\u1ed9ng theo n\u1ed9i dung<\/strong><\/h3>\n\n\n\n<p>Trong h\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap, ngo\u00e0i c\u00e1c c\u1ed9t chia theo t\u1ef7 l\u1ec7 nh\u01b0 <strong>.col-6<\/strong>, <strong>.col-md-4<\/strong>, b\u1ea1n c\u00f2n c\u00f3 m\u1ed9t l\u1ef1a ch\u1ecdn r\u1ea5t linh ho\u1ea1t \u0111\u00f3 l\u00e0 class <strong>.col-auto<\/strong>. Lo\u1ea1i c\u1ed9t n\u00e0y kh\u00f4ng tu\u00e2n theo h\u1ec7 12 c\u1ed9t m\u00e0 s\u1ebd co gi\u00e3n \u0111\u00fang b\u1eb1ng k\u00edch th\u01b0\u1edbc n\u1ed9i dung b\u00ean trong.<\/p>\n\n\n\n<p>\u0110\u00e2y l\u00e0 gi\u1ea3i ph\u00e1p l\u00fd t\u01b0\u1edfng khi b\u1ea1n c\u1ea7n m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 chi\u1ec1u r\u1ed9ng nh\u1ecf g\u1ecdn, kh\u00f4ng chi\u1ebfm kh\u00f4ng gian d\u01b0 th\u1eeba, v\u00ed d\u1ee5 nh\u01b0: n\u00fat, logo, bi\u1ec3u t\u01b0\u1ee3ng, label\u2026<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: .col-auto k\u1ebft h\u1ee3p v\u1edbi .col<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-auto\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"btn btn-primary\">N\u00fat nh\u1ecf&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ph\u1ea7n n\u1ed9i dung d\u00e0i h\u01a1n chi\u1ebfm ph\u1ea7n c\u00f2n l\u1ea1i\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcg_a_S0hG5VcJ-zDyEF9-zbkG_iOkLej0_f285p-IxwCTj51Y0JLkGrhATxgXLHqS2yDyFnyJbXfZJWZzTiS_nvcJ2bSi5tpsyO0ox-d6ZtuDJjfHz8D7x7JbjgfYSNYhKDnJkVg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, n\u00fat ch\u1ec9 chi\u1ebfm v\u1eeba \u0111\u1ee7 kh\u00f4ng gian ch\u1ee9a ch\u1eef \u201cN\u00fat nh\u1ecf\u201d, c\u00f2n n\u1ed9i dung c\u00f2n l\u1ea1i s\u1ebd \u0111\u01b0\u1ee3c <strong>.col<\/strong> co gi\u00e3n chi\u1ebfm h\u1ebft ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a h\u00e0ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d\u1ed5i-v\u1ecb-tri-c\u1ed9t-v\u1edbi-order\"><strong>\u0110\u1ed5i v\u1ecb tr\u00ed c\u1ed9t v\u1edbi order-*<\/strong><\/h3>\n\n\n\n<p>Trong m\u1ed9t s\u1ed1 layout, \u0111\u1eb7c bi\u1ec7t l\u00e0 giao di\u1ec7n responsive, b\u1ea1n c\u00f3 th\u1ec3 mu\u1ed1n thay \u0111\u1ed5i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c c\u1ed9t tr\u00ean t\u1eebng thi\u1ebft b\u1ecb, v\u00ed d\u1ee5: hi\u1ec3n th\u1ecb \u1ea3nh tr\u01b0\u1edbc v\u0103n b\u1ea3n tr\u00ean mobile, nh\u01b0ng ng\u01b0\u1ee3c l\u1ea1i tr\u00ean desktop. Bootstrap h\u1ed7 tr\u1ee3 gi\u1ea3i ph\u00e1p n\u00e0y th\u00f4ng qua class .<strong>order-*<\/strong>, d\u1ef1a tr\u00ean t\u00ednh n\u0103ng s\u1eafp x\u1ebfp ph\u1ea7n t\u1eed c\u1ee7a Flexbox.<\/p>\n\n\n\n<p>C\u00e1c class order-* c\u00f3 s\u1eb5n bao g\u1ed3m:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>Gi\u00e1 tr\u1ecb CSS<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><strong>.order-first<\/strong><\/td><td>order: -1<\/td><td>Lu\u00f4n hi\u1ec3n th\u1ecb \u0111\u1ea7u ti\u00ean<\/td><\/tr><tr><td><strong>.order-0<\/strong><\/td><td>order: 0<\/td><td>M\u1eb7c \u0111\u1ecbnh<\/td><\/tr><tr><td><strong>.order-1 \u2192 .order-5<\/strong><\/td><td>order: 1 \u2192 5<\/td><td>Hi\u1ec3n th\u1ecb theo th\u1ee9 t\u1ef1 t\u0103ng d\u1ea7n<\/td><\/tr><tr><td><strong>.order-last<\/strong><\/td><td>order: 6<\/td><td>Lu\u00f4n hi\u1ec3n th\u1ecb cu\u1ed1i c\u00f9ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5: \u0110\u1ea3o v\u1ecb tr\u00ed hai c\u1ed9t:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col order-2\">C\u1ed9t 1 (hi\u1ec3n th\u1ecb sau)&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"border col order-1\">C\u1ed9t 2 (hi\u1ec3n th\u1ecb tr\u01b0\u1edbc)&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcFedTHKpAJfez-4hS7_kxDi0DpQHpd4vJbSx4Rt846_mWGFW9fvUV1XR_7J9Ozs_cD_yH_gzk53Hde5G2_jcH2RI2K5ZHRKoHbeONkd2kxd8CEFrhKNUowqlw28scH2PojegXg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, m\u1eb7c d\u00f9 m\u00e3 HTML c\u00f3 \u201cC\u1ed9t 1\u201d n\u1eb1m tr\u01b0\u1edbc \u201cC\u1ed9t 2\u201d, nh\u01b0ng khi hi\u1ec3n th\u1ecb, \u201cC\u1ed9t 2\u201d s\u1ebd hi\u1ec3n th\u1ecb tr\u01b0\u1edbc nh\u1edd order-1 &lt; order-2.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nesting-grid\"><strong>Nesting Grid<\/strong><\/h3>\n\n\n\n<p>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n v\u1edbi Bootstrap, \u0111\u00f4i khi b\u1ea1n s\u1ebd c\u1ea7n chia c\u1ed9t b\u00ean trong m\u1ed9t c\u1ed9t kh\u00e1c. V\u00ed d\u1ee5: b\u1ed1 c\u1ee5c 2 c\u1ed9t l\u1edbn, m\u1ed7i c\u1ed9t l\u1ea1i chia th\u00e0nh 2 ph\u1ea7n nh\u1ecf. \u0110\u00f3 ch\u00ednh l\u00e0 l\u00fac Nesting Grid (l\u01b0\u1edbi l\u1ed3ng nhau) tr\u1edf n\u00ean c\u1ef1c k\u1ef3 h\u1eefu \u00edch.<\/p>\n\n\n\n<p>Bootstrap Grid h\u1ed7 tr\u1ee3 l\u1ed3ng c\u00e1c <strong>.row<\/strong> v\u00e0 <strong>.col-* <\/strong>b\u00ean trong m\u1ed9t <strong>.col<\/strong> kh\u00e1c. Mi\u1ec5n l\u00e0 b\u1ea1n gi\u1eef \u0111\u00fang c\u1ea5u tr\u00fac: <strong>.row<\/strong> ch\u1ee9a <strong>.col<\/strong>, th\u00ec b\u1ea1n c\u00f3 th\u1ec3 l\u1ed3ng bao nhi\u00eau c\u1ea5p tu\u1ef3 \u00fd (nh\u01b0ng n\u00ean gi\u1eef \u1edf m\u1ee9c v\u1eeba ph\u1ea3i \u0111\u1ec3 d\u1ec5 b\u1ea3o tr\u00ec).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeIDhq_bE98BrOrx2R14F-AZI1GxT4AnkzDbsr9V8-wKkcePytL2EzAcyjKnIbhLFY7T9nH8oYPp7VhIpSmZ8NMehWtGEmLxYjNAxg_I7iFhMFOVIu7GT6RWrU4KPUDV0SOFoS7xw?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h4>N\u1ed9i dung ch\u00ednh&lt;\/h4>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 bg-light\">H\u00ecnh \u1ea3nh s\u1ea3n ph\u1ea9m&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 bg-light\">M\u00f4 t\u1ea3 chi ti\u1ebft&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h4>Sidebar&lt;\/h4>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 bg-secondary text-white\">\ud83d\udd0e T\u00ecm ki\u1ebfm&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcQkGgGjoiB1LkLdyPm1JtTPiayDFyIdYEfjtQssoDDtgl2Stj2MvNWtA-Gnm8BXGvqQ9VWWHW5QwjD4q2EWP8Z-Yw4yVqZOIBeYd6zdbMO_KlKZvUP-oGCLuqoX-gIbwisQxUjKg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u1ed9t tr\u00e1i chi\u1ebfm 2\/3 chi\u1ec1u r\u1ed9ng (8 c\u1ed9t trong h\u1ec7 th\u1ed1ng 12 c\u1ed9t). B\u00ean trong chia th\u00e0nh 2 ph\u1ea7n nh\u1ecf \u0111\u1ec3 hi\u1ec3n th\u1ecb: h\u00ecnh \u1ea3nh v\u00e0 m\u00f4 t\u1ea3<\/li>\n\n\n\n<li>C\u1ed9t ph\u1ea3i chi\u1ebfm 1\/3 chi\u1ec1u r\u1ed9ng (4 c\u1ed9t) d\u00f9ng l\u00e0m sidebar<\/li>\n<\/ul>\n\n\n\n<p>L\u01b0u \u00fd khi tri\u1ec3n khai Grid l\u1ed3ng nhau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.row ph\u1ea3i n\u1eb1m trong .col:<\/strong> Kh\u00f4ng \u0111\u01b0\u1ee3c l\u1ed3ng .row tr\u1ef1c ti\u1ebfp trong .row<\/li>\n\n\n\n<li><strong>.row m\u1edbi chia l\u1ea1i 12 c\u1ed9t:<\/strong> C\u1ed9t con b\u00ean trong .col s\u1ebd t\u00ednh l\u1ea1i theo 12 c\u1ed9t<\/li>\n\n\n\n<li><strong>Gutter \u00e1p d\u1ee5ng \u0111\u1ed9c l\u1eadp:<\/strong> .row con c\u00f3 kho\u1ea3ng c\u00e1ch ri\u00eang (c\u00f3 th\u1ec3 d\u00f9ng .g-0 \u0111\u1ec3 xo\u00e1 n\u1ebfu c\u1ea7n)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grid-responsive-v\u1edbi-breakpoint-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Grid_responsive_voi_breakpoint_trong_Bootstrap\"><\/span><strong>Grid responsive v\u1edbi breakpoint trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng \u0111i\u1ec3m m\u1ea1nh nh\u1ea5t c\u1ee7a h\u1ec7 th\u1ed1ng Grid trong Bootstrap l\u00e0 kh\u1ea3 n\u0103ng responsive theo t\u1eebng k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh, nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng 6 breakpoint class \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a s\u1eb5n. V\u1edbi nh\u1eefng class n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ed9t theo t\u1eebng lo\u1ea1i thi\u1ebft b\u1ecb t\u1eeb mobile \u0111\u1ebfn desktop m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng hay media query.<\/p>\n\n\n\n<p>Bootstrap chia layout responsive th\u00e0nh 6 m\u1ed1c k\u00edch th\u01b0\u1edbc c\u1ee5 th\u1ec3:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Breakpoint<\/strong><\/td><td><strong>Class prefix<\/strong><\/td><td><strong>Chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh<\/strong><\/td><\/tr><tr><td>Extra small<\/td><td>.col-<\/td><td>&lt;576px<\/td><\/tr><tr><td>Small<\/td><td>.col-sm-<\/td><td>\u2265576px<\/td><\/tr><tr><td>Medium<\/td><td>.col-md-<\/td><td>\u2265768px<\/td><\/tr><tr><td>Large<\/td><td>.col-lg-<\/td><td>\u2265992px<\/td><\/tr><tr><td>Extra large<\/td><td>.col-xl-<\/td><td>\u22651200px<\/td><\/tr><tr><td>XXL<\/td><td>.col-xxl-<\/td><td>\u22651400px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng Grid responsive:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12 col-md-6 col-lg-4\">C\u1ed9t 1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12 col-md-6 col-lg-4\">C\u1ed9t 2&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12 col-md-12 col-lg-4\">C\u1ed9t 3&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mobile (&lt;768px): M\u1ed7i c\u1ed9t chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng (<strong>.col-12<\/strong>), hi\u1ec3n th\u1ecb theo chi\u1ec1u d\u1ecdc.<\/li>\n\n\n\n<li>Tablet (\u2265768px): Hai c\u1ed9t \u0111\u1ea7u chi\u1ebfm m\u1ed7i c\u1ed9t 6\/12 (<strong>.col-md-6<\/strong>), c\u1ed9t th\u1ee9 3 chi\u1ebfm tr\u1ecdn d\u00f2ng.<\/li>\n\n\n\n<li>Desktop (\u2265992px): M\u1ed7i c\u1ed9t ch\u1ec9 chi\u1ebfm 4\/12 (<strong>col-lg-4<\/strong>), ba c\u1ed9t n\u1eb1m tr\u00ean m\u1ed9t h\u00e0ng duy nh\u1ea5t.<\/li>\n<\/ul>\n\n\n\n<p>M\u1ed9t v\u00ed d\u1ee5 t\u1ed5ng h\u1ee3p nhi\u1ec1u t\u00ednh n\u0103ng reponsive trong Grid:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"border row\">\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"bg-warning col-12 col-sm-6 col-lg-3 order-3 order-lg-1\">Sidebar&lt;\/div>\n\u00a0\u00a0&lt;div class=\"bg-primary text-white col-12 col-lg-6 order-1 order-lg-2\">N\u1ed9i dung ch\u00ednh&lt;\/div>\n\u00a0&lt;div class=\"bg-secondary text-white col-12 col-sm-6 col-lg-3 order-2 order-lg-3\">Th\u00f4ng tin ph\u1ee5&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Tr\u00ean mobile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed7i th\u00e0nh ph\u1ea7n s\u1ebd n\u1eb1m tr\u00ean 1 h\u00e0ng (<strong>col-12<\/strong>)<\/li>\n\n\n\n<li>\u201cN\u1ed9i dung ch\u00ednh\u201d xu\u1ea5t hi\u1ec7n \u0111\u1ea7u ti\u00ean (<strong>order-1<\/strong>)<\/li>\n\n\n\n<li>\u201cTh\u00f4ng tin ph\u1ee5\u201d \u1edf gi\u1eefa (<strong>order-2<\/strong>)<\/li>\n\n\n\n<li>\u201cSidebar\u201d \u1edf cu\u1ed1i (<strong>order-3<\/strong>)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfgFYqJHtBs21o5emj6fHNmI_YS_Dv3Aj7_XlgdXIzUthXzkJV8wbasqrez1zS9Si9_4BlGREXUvg53cVCgDLUKWBuhy0z9rJmOvbzZlNJE-bihO92oCqUWaMsAPBxlcURgZ6Yj?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Tr\u00ean desktop:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cSidebar\u201d chuy\u1ec3n l\u00ean \u0111\u1ea7u (<strong>order-lg-1<\/strong>) chi\u1ebfm 3 c\u1ed9t (<strong>col-lg-3<\/strong>)<\/li>\n\n\n\n<li>\u201cN\u1ed9i dung ch\u00ednh\u201d \u1edf gi\u1eefa (<strong>order-lg-2<\/strong>) chi\u1ebfm 3 c\u1ed9t (<strong>col-lg-3<\/strong>)<\/li>\n\n\n\n<li>\u201cTh\u00f4ng tin ph\u1ee5\u201d \u1edf cu\u1ed1i (<strong>order-lg-3<\/strong>) chi\u1ebfm 6 c\u1ed9t (<strong>col-lg-6<\/strong>)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe_IcmlhTjvlQU6XjmGzmq5j9erBopgfPlVj1zPOnzp4vNb8K_NYkG9UqSWppv-_BvEbl9b_3uG56wn4zBGHgn-iksv288jj9ee1aX-jZSBvx_uZptktZ1SVfiEeMFpWO2eq7_KmA?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-khi-nao-dung-grid-khi-nao-dung-flex\"><span class=\"ez-toc-section\" id=\"Khi_nao_dung_Grid_khi_nao_dung_Flex\"><\/span><strong>Khi n\u00e0o d\u00f9ng Grid, khi n\u00e0o d\u00f9ng Flex?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong Bootstrap, c\u1ea3 Grid system v\u00e0 Flexbox \u0111\u1ec1u \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean Flex, nh\u01b0ng ch\u00fang ph\u1ee5c v\u1ee5 m\u1ee5c \u0111\u00edch kh\u00e1c nhau. Vi\u1ec7c l\u1ef1a ch\u1ecdn d\u00f9ng Grid hay Flex kh\u00f4ng ch\u1ec9 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u00fa ph\u00e1p, m\u00e0 c\u00f2n \u1ea3nh h\u01b0\u1edfng tr\u1ef1c ti\u1ebfp \u0111\u1ebfn c\u00e1ch b\u1ea1n thi\u1ebft k\u1ebf v\u00e0 ki\u1ec3m so\u00e1t b\u1ed1 c\u1ee5c.<\/p>\n\n\n\n<p><strong>D\u00f9ng Grid khi:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u1ea1n \u0111ang x\u00e2y d\u1ef1ng layout t\u1ed5ng th\u1ec3 c\u1ee7a trang ho\u1eb7c component (v\u00ed d\u1ee5: 2 c\u1ed9t n\u1ed9i dung ch\u00ednh v\u00e0 sidebar).<\/li>\n\n\n\n<li>Trang web c\u1ea7n chia t\u1ef7 l\u1ec7 b\u1ed1 c\u1ee5c theo h\u1ec7 12 c\u1ed9t v\u00e0 responsive t\u1ef1 \u0111\u1ed9ng theo breakpoint.<\/li>\n\n\n\n<li>H\u1ec7 th\u1ed1ng y\u00eau c\u1ea7u ph\u1ea3i d\u1ec5 b\u1ea3o tr\u00ec, m\u1edf r\u1ed9ng layout m\u00e0 kh\u00f4ng c\u1ea7n can thi\u1ec7p nhi\u1ec1u v\u00e0o CSS.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ec v\u1eady, Grid c\u1ef1c k\u1ef3 ph\u00f9 h\u1ee3p \u0111\u1ec3 thi\u1ebft k\u1ebf b\u1ed1 c\u1ee5c l\u1edbn ho\u1eb7c l\u01b0\u1edbi n\u1ed9i dung nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, card gallery, layout trang chi ti\u1ebft\u2026<\/p>\n\n\n\n<p><strong>D\u00f9ng Flex khi:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u1ea1n mu\u1ed1n canh gi\u1eefa, gi\u00e3n c\u00e1ch ho\u1eb7c thay \u0111\u1ed5i tr\u1eadt t\u1ef1 ph\u1ea7n t\u1eed trong m\u1ed9t h\u00e0ng ho\u1eb7c c\u1ed9t.<\/li>\n\n\n\n<li>B\u1ea1n ch\u1ec9 c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh layout nh\u1ecf trong component, kh\u00f4ng ph\u1ea3i to\u00e0n b\u1ed9 trang.<\/li>\n\n\n\n<li>B\u1ea1n \u0111ang x\u1eed l\u00fd c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng theo t\u1ef7 l\u1ec7 12 c\u1ed9t (v\u00ed d\u1ee5: logo + menu + n\u00fat \u0111\u0103ng nh\u1eadp).<\/li>\n<\/ul>\n\n\n\n<p>Flex r\u1ea5t h\u1eefu \u00edch cho vi\u1ec7c \u0111\u1ecbnh v\u1ecb nhanh, x\u1eed l\u00fd layout nh\u1ecf b\u00ean trong th\u1ebb nav, header, form, button group\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-dung-grid-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_dung_Grid_trong_Bootstrap\"><\/span><strong>Nh\u1eefng l\u01b0u \u00fd khi d\u00f9ng Grid trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap r\u1ea5t m\u1ea1nh v\u00e0 d\u1ec5 d\u00f9ng, nh\u01b0ng n\u1ebfu kh\u00f4ng n\u1eafm r\u00f5 m\u1ed9t s\u1ed1 nguy\u00ean t\u1eafc c\u1ed1t l\u00f5i, b\u1ea1n r\u1ea5t d\u1ec5 g\u1eb7p l\u1ed7i nh\u01b0 v\u1ee1 layout, sai th\u1ee9 t\u1ef1, ho\u1eb7c kh\u00f4ng responsive nh\u01b0 mong mu\u1ed1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng b\u1ea1n c\u1ea7n ghi nh\u1edb khi s\u1eed d\u1ee5ng Grid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u1ea7n t\u1eed s\u1eed d\u1ee5ng .row ph\u1ea3i n\u1eb1m trong .container ho\u1eb7c .container-fluid:<\/strong> .container gi\u00fap canh l\u1ec1, gi\u1edbi h\u1ea1n chi\u1ec1u r\u1ed9ng v\u00e0 cung c\u1ea5p ng\u1eef c\u1ea3nh \u0111\u1ec3 h\u1ec7 th\u1ed1ng Grid ho\u1ea1t \u0111\u1ed9ng ch\u00ednh x\u00e1c. N\u1ebfu b\u1ea1n \u0111\u1eb7t .row b\u00ean ngo\u00e0i .container, b\u1ed1 c\u1ee5c c\u00f3 th\u1ec3 b\u1ecb tr\u00e0n m\u00e9p ho\u1eb7c c\u0103n ch\u1ec9nh sai.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">...&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.col-* ph\u1ea3i n\u1eb1m tr\u1ef1c ti\u1ebfp b\u00ean trong .row:<\/strong> \u0110\u00e2y l\u00e0 nguy\u00ean t\u1eafc b\u1eaft bu\u1ed9c. N\u1ebfu b\u1ea1n \u0111\u1eb7t .col-* b\u00ean ngo\u00e0i ho\u1eb7c kh\u00f4ng n\u1eb1m tr\u1ef1c ti\u1ebfp trong .row, Bootstrap kh\u00f4ng th\u1ec3 x\u1eed l\u00fd Grid \u0111\u00fang c\u00e1ch.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">...&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">...&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">...&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u1ed5ng s\u1ed1 c\u1ed9t trong m\u1ed9t .row kh\u00f4ng \u0111\u01b0\u1ee3c v\u01b0\u1ee3t qu\u00e1 12<\/strong>: H\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap ho\u1ea1t \u0111\u1ed9ng tr\u00ean nguy\u00ean l\u00fd chia layout th\u00e0nh 12 c\u1ed9t. N\u1ebfu t\u1ed5ng s\u1ed1 .col-* trong m\u1ed9t h\u00e0ng v\u01b0\u1ee3t qu\u00e1 12, c\u00e1c ph\u1ea7n t\u1eed s\u1ebd t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng c\u00f3 th\u1ec3 kh\u00f4ng nh\u01b0 b\u1ea1n mong mu\u1ed1n.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-4\">4&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-4\">4&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-4\">4&lt;\/div> &lt;!-- T\u1ed5ng 12 -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tr\u00e1nh l\u1ea1m d\u1ee5ng Nesting (l\u01b0\u1edbi l\u1ed3ng nhau) qu\u00e1 nhi\u1ec1u c\u1ea5p:<\/strong> M\u1eb7c d\u00f9 Bootstrap cho ph\u00e9p b\u1ea1n l\u1ed3ng .row v\u00e0 .col nhi\u1ec1u c\u1ea5p \u0111\u1ec3 t\u1ea1o layout ph\u1ee9c t\u1ea1p, nh\u01b0ng n\u1ebfu l\u1ed3ng qu\u00e1 s\u00e2u s\u1ebd d\u1eabn \u0111\u1ebfn kh\u00f3 b\u1ea3o tr\u00ec, d\u1ec5 g\u00e2y xung \u0111\u1ed9t gutter v\u00e0 anh h\u01b0\u1edfng hi\u1ec7u su\u1ea5t tr\u00ecnh duy\u1ec7t. Ch\u1ec9 nesting khi c\u1ea7n chia nh\u1ecf layout b\u00ean trong m\u1ed9t c\u1ed9t l\u1edbn, v\u00e0 n\u00ean d\u1eebng \u1edf 1\u20132 c\u1ea5p t\u1ed1i \u0111a.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 nesting qu\u00e1 s\u00e2u (kh\u00f4ng t\u1ed1i \u01b0u):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">T\u00ean s\u1ea3n ph\u1ea9m&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">Gi\u00e1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>C\u00e1ch vi\u1ebft g\u1ecdn g\u00e0ng h\u01a1n (gi\u1eef nesting \u1edf m\u1ee9c h\u1ee3p l\u00fd):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">T\u00ean s\u1ea3n ph\u1ea9m&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">Gi\u00e1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-grid-bootstrap\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_Grid_Bootstrap\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp Grid Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1-c\u01a1-b\u1ea3n\"><strong>B\u00e0i t\u1eadp 1 \u2013 C\u01a1 b\u1ea3n<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t danh s\u00e1ch g\u1ed3m 4 s\u1ea3n ph\u1ea9m hi\u1ec3n th\u1ecb theo d\u1ea1ng l\u01b0\u1edbi.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean mobile: m\u1ed7i h\u00e0ng 1 s\u1ea3n ph\u1ea9m<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXctZ9t_pmCaL_IhojKeJmElr9Hj8UE3ZGenLKFwsnQ0UQUcjvDB3lRZkahN4IYGRNmUSHe6BffUAbvM6MHwMeJnwvyt3Neg07XhMwz3otnWPGo25rkzJZBxMDT9uBhKYs6uaJTIcA?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean tablet tr\u1edf l\u00ean (\u2265768px): m\u1ed7i h\u00e0ng 2 s\u1ea3n ph\u1ea9m<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfyoJtfYpUIlAnnojN3dl7S8u6k8IVNXkLJAGTVRW98mPO0Phv-lX91Xphgi34pM4wqE2Kp-WZDgI_R0q49v7vXcFZje__LBzGNPIub3dz6mt9x_eHJfPAekZMJztBxR2alGuT78A?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng<strong> .col-12<\/strong> \u0111\u1ec3 m\u1ed7i ph\u1ea7n t\u1eed \u0111\u1ec1u chi\u1ebfu 12 c\u1ed9t (1 h\u00e0ng) cho mobile<\/li>\n\n\n\n<li>D\u00f9ng <strong>.col-md-6<\/strong> cho tablet tr\u1edf l\u00ean \u0111\u1ec3 m\u1ed7i h\u00e0ng s\u1ebd c\u00f3 2 ph\u1ea7n t\u1eed (m\u1ed7i ph\u1ea7n t\u1eed chi\u1ebfm 6 c\u1ed9t)<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 col-12 col-md-6 border\">S\u1ea3n ph\u1ea9m 1&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 col-12 col-md-6 border\">S\u1ea3n ph\u1ea9m 2&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 col-12 col-md-6 border\">S\u1ea3n ph\u1ea9m 3&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-3 col-12 col-md-6 border\">S\u1ea3n ph\u1ea9m 4&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2-trung-binh\"><strong>B\u00e0i t\u1eadp 2 \u2013 Trung b\u00ecnh<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o layout blog c\u00f3: Sidebar b\u00ean tr\u00e1i (chi\u1ebfm 3\/12), n\u1ed9i dung b\u00e0i vi\u1ebft b\u00ean ph\u1ea3i (chi\u1ebfm 9\/12).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean mobile: Sidebar n\u1eb1m d\u01b0\u1edbi c\u00f9ng, n\u1ed9i dung \u1edf tr\u00ean<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd6GdWtSpA35dEititO8wfcfaxT2UsAfy7xqRufN-nGS5TBLpcJvv4A0vNbmcQq1AijbDW0IBYuQ6ywoGmzPMZXncuaWLl4XHabEXiTXi7u7yiW-IG6nNSsMUUDxA6-NLykwEUjJg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean desktop: Sidebar n\u1eb1m b\u00ean tr\u00e1i<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf8-HvUkNps0whZuSHp_T20Vc30v94TOMpEDGwpuzyPkPVyRcSZ4BUav2PBREilwW1eZmrBxDufcGlFQ5DuMzxmSOpTsdL9wecAwrKsEdHdzaS4TeYOOgCIxpA61llen51NDKCCVQ?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng .col-12 \u0111\u1ec3 t\u1ea5t c\u1ea3 c\u1ed9t hi\u1ec3n th\u1ecb 100% chi\u1ec1u ngang tr\u00ean mobile.<\/li>\n\n\n\n<li>D\u00f9ng .col-lg-3 v\u00e0 .col-lg-9 \u0111\u1ec3 chia layout sidebar\/n\u1ed9i dung theo t\u1ef7 l\u1ec7 3\/9 tr\u00ean desktop (\u2265992px).<\/li>\n\n\n\n<li>D\u00f9ng .order-2 v\u00e0 .order-lg-1 \u0111\u1ec3 thay \u0111\u1ed5i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb gi\u1eefa mobile v\u00e0 desktop \u2013 gi\u00fap n\u1ed9i dung ch\u00ednh l\u00ean tr\u01b0\u1edbc tr\u00ean mobile, sidebar l\u00ean tr\u01b0\u1edbc tr\u00ean desktop.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row g-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-2 col-12 col-lg-3 order-2 order-lg-1 border\">\ud83d\udcda Sidebar&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-2 col-12 col-lg-9 order-1 order-lg-2 border\">\ud83d\udcdd N\u1ed9i dung b\u00e0i vi\u1ebft&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3-kho\"><strong>B\u00e0i t\u1eadp 3 \u2013 Kh\u00f3<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o b\u1ed1 c\u1ee5c chi ti\u1ebft s\u1ea3n ph\u1ea9m v\u1edbi c\u1ea5u tr\u00fac sau:<\/p>\n\n\n\n<p>Tr\u00ean desktop:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u00ean tr\u00e1i (6\/12): \u1ea3nh l\u1edbn + \u1ea3nh ph\u1ee5 (chia 2 c\u1ed9t nh\u1ecf)<\/li>\n\n\n\n<li>B\u00ean ph\u1ea3i (6\/12): ti\u00eau \u0111\u1ec1, m\u00f4 t\u1ea3, gi\u00e1, n\u00fat mua<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcvDEGWBzoW8oeIIDfNZPWKJzA0oOONV4uPkw3nYFvSvnNzkl83k-KziUt4QDS81tcIT4EOlwY1Hz6k5r4qPCyls6OLdMmXR9taPU-CjWLp2GlfZcqwq_2IjXg4u76xnZpYpHdTsg?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Tr\u00ean mobile: \u1ea3nh v\u00e0 th\u00f4ng tin x\u1ebfp d\u1ecdc.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLTjcLhsmGtEqtX4Qi4WN994caMVQuG06RiygG6y73IVKaOpYEAzEnkQ-3JHJOx45VUWQXCRXq7oGfpdgikGgLe6XjDKrCPsVdcCjmiMRThJ0Mr0KTR1I9gkaC9sXZHyeoHKwt3A?key=ePc2w_d81lQVreismH_KXA\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<ul class=\"wp-block-list\">\n<li>Chia b\u1ed1 c\u1ee5c ch\u00ednh th\u00e0nh 2 ph\u1ea7n: \u1ea3nh (b\u00ean tr\u00e1i) v\u00e0 th\u00f4ng tin (b\u00ean ph\u1ea3i), m\u1ed7i ph\u1ea7n chi\u1ebfm .col-lg-6 (50%) tr\u00ean desktop, .col-12 tr\u00ean mobile.<\/li>\n\n\n\n<li>D\u00f9ng Grid l\u1ed3ng nhau (nesting) b\u00ean trong c\u1ed9t \u1ea3nh \u0111\u1ec3 chia ti\u1ebfp th\u00e0nh 1 \u1ea3nh l\u1edbn v\u00e0 2 \u1ea3nh nh\u1ecf.<\/li>\n\n\n\n<li>\u00c1p d\u1ee5ng img-fluid gi\u00fap \u1ea3nh co gi\u00e3n theo m\u00e0n h\u00ecnh, gi\u1eef \u0111\u01b0\u1ee3c t\u00ednh responsive.<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng .row v\u00e0 .g-4 t\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed, gi\u00fap layout th\u00f4ng tho\u00e1ng v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row g-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;!-- \u1ea2nh s\u1ea3n ph\u1ea9m -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12 col-lg-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row g-2\">\n\u00a0\u00a0\u00a0 &lt;div class=\"col-12\">&lt;img src=\"https:\/\/itviec.com\/assets\/logo_black_text-04776232a37ae9091cddb3df1973277252b12ad19a16715f4486e603ade3b6a4.png\" class=\"img-fluid\" alt=\"\u1ea2nh s\u1ea3n ph\u1ea9m l\u1edbn\">&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">&lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2016\/10\/homepage3-1.png\" class=\"img-fluid rounded border\" alt=\"\u1ea2nh ph\u1ee5 1\">&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-6\">&lt;img src=\"https:\/\/itviec.com\/assets\/it_stories\/social-image-thumbnail-64975e87e9fc54100844057f5cfb4a0e93082ab344dff63e0b5c480350a8b837.png\" class=\"img-fluid rounded border\" alt=\"\u1ea2nh ph\u1ee5 2\">&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;!-- Th\u00f4ng tin s\u1ea3n ph\u1ea9m -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-12 col-lg-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3>T\u00ean s\u1ea3n ph\u1ea9m&lt;\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>M\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn v\u1ec1 s\u1ea3n ph\u1ea9m...&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"mb-2 fw-bold text-danger\">Gi\u00e1: 1.290.000\u20ab&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"btn btn-primary\">\ud83d\uded2 Th\u00eam v\u00e0o gi\u1ecf&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-bootstrap-grid\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Bootstrap_Grid\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap Grid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-col-auto-va-col-khac-nhau-gi\"><strong>col-auto v\u00e0 col kh\u00e1c nhau g\u00ec?<\/strong><\/h3>\n\n\n\n<p>C\u1ea3 hai class \u0111\u1ec1u d\u00f9ng \u0111\u1ec3 t\u1ea1o c\u1ed9t trong h\u1ec7 th\u1ed1ng Grid, nh\u01b0ng m\u1ee5c \u0111\u00edch v\u00e0 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng l\u1ea1i r\u1ea5t kh\u00e1c nhau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.col<\/strong> l\u00e0 class chia \u0111\u1ec1u kh\u00f4ng gian c\u00f2n l\u1ea1i gi\u1eefa c\u00e1c c\u1ed9t. N\u1ebfu b\u1ea1n \u0111\u1eb7t nhi\u1ec1u c\u1ed9t col trong c\u00f9ng m\u1ed9t h\u00e0ng, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng ph\u00e2n chia chi\u1ec1u r\u1ed9ng c\u00e1c c\u1ed9t theo t\u1ef7 l\u1ec7 b\u1eb1ng nhau.<\/li>\n\n\n\n<li><strong>.col-auto<\/strong> ch\u1ec9 chi\u1ebfm v\u1eeba \u0111\u1ee7 kh\u00f4ng gian theo n\u1ed9i dung b\u00ean trong, kh\u00f4ng co gi\u00e3n hay chia \u0111\u1ec1u. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng cho c\u00e1c ph\u1ea7n t\u1eed nh\u1ecf nh\u01b0 n\u00fat, bi\u1ec3u t\u01b0\u1ee3ng, nh\u00e3n, v.v.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-auto\">N\u00fat nh\u1ecf&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col\">N\u1ed9i dung m\u1edf r\u1ed9ng&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-offset-khong-ho\u1ea1t-d\u1ed9ng\"><strong>T\u1ea1i sao offset kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng?<\/strong><\/h3>\n\n\n\n<p>Nhi\u1ec1u ng\u01b0\u1eddi m\u1edbi d\u00f9ng Grid th\u01b0\u1eddng g\u1eb7p t\u00ecnh hu\u1ed1ng offset kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u00fd do ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00f9ng sai breakpoint:<\/strong> V\u00ed d\u1ee5 class <strong>offset-md-2<\/strong> ch\u1ec9 c\u00f3 hi\u1ec7u l\u1ef1c khi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh t\u1eeb 768px tr\u1edf l\u00ean. N\u1ebfu b\u1ea1n \u0111ang xem tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf h\u01a1n, offset s\u1ebd kh\u00f4ng \u00e1p d\u1ee5ng.<\/li>\n\n\n\n<li><strong>Kh\u00f4ng n\u1eb1m trong .row:<\/strong> offset ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng khi c\u00e1c <strong>.col-*<\/strong> n\u1eb1m tr\u1ef1c ti\u1ebfp trong m\u1ed9t<strong> .row<\/strong>. N\u1ebfu b\u1ea1n b\u1ecf qua <strong>.row<\/strong>, h\u1ec7 th\u1ed1ng Grid s\u1ebd kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang, k\u00e9o theo offset c\u0169ng v\u00f4 hi\u1ec7u.<\/li>\n\n\n\n<li><strong>Thi\u1ebfu class .col-*:<\/strong> offset kh\u00f4ng th\u1ec3 ho\u1ea1t \u0111\u1ed9ng \u0111\u1ed9c l\u1eadp. B\u1ea1n c\u1ea7n k\u1ebft h\u1ee3p n\u00f3 v\u1edbi m\u1ed9t class <strong>.col-*<\/strong> t\u01b0\u01a1ng \u1ee9ng.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng \u0111\u00fang offset:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-6 offset-md-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0C\u1ed9t n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea9y v\u00e0o gi\u1eefa nh\u1edd offset\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-co-c\u1ea7n-flex-khong\"><strong>Grid c\u00f3 c\u1ea7n Flex kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>H\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean Flexbox, v\u00ec v\u1eady Grid c\u1ea7n c\u00f3 Flex \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang. C\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.row th\u1ef1c ch\u1ea5t l\u00e0 m\u1ed9t flex container (<strong>display: flex<\/strong>)<\/li>\n\n\n\n<li>C\u00e1c<strong> .col-*<\/strong> l\u00e0 c\u00e1c flex item<\/li>\n\n\n\n<li>H\u1ec7 th\u1ed1ng t\u1ef1 \u0111\u1ed9ng wrap, s\u1eafp x\u1ebfp, v\u00e0 gi\u00e3n c\u1ed9t \u0111\u1ec1u d\u1ef1a tr\u00ean nguy\u00ean t\u1eafc c\u1ee7a Flexbox<\/li>\n<\/ul>\n\n\n\n<p>V\u00ec v\u1eady, b\u1ea1n kh\u00f4ng b\u1eaft bu\u1ed9c ph\u1ea3i d\u00f9ng class Flex ri\u00eang, nh\u01b0ng ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p n\u1ebfu mu\u1ed1n t\u00f9y ch\u1ec9nh s\u00e2u h\u01a1n. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n t\u1eadn d\u1ee5ng t\u1ed1i \u0111a s\u1ee9c m\u1ea1nh layout hi\u1ec7n \u0111\u1ea1i m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_Ket\"><\/span><strong>T\u1ed5ng K\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ec7 th\u1ed1ng Grid trong Bootstrap l\u00e0 n\u1ec1n t\u1ea3ng m\u1ea1nh m\u1ebd gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c linh ho\u1ea1t, responsive v\u00e0 nh\u1ea5t qu\u00e1n m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS t\u00f9y ch\u1ec9nh. V\u1edbi c\u00e1ch t\u1ed5 ch\u1ee9c 12 c\u1ed9t, t\u00edch h\u1ee3p breakpoint v\u00e0 h\u1ed7 tr\u1ee3 Flexbox, Grid ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi d\u1ef1 \u00e1n web \u2013 t\u1eeb landing page \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn dashboard ph\u1ee9c t\u1ea1p. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm v\u1eefng c\u00e1ch s\u1eed d\u1ee5ng Grid \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n chu\u1ea9n, d\u1ec5 b\u1ea3o tr\u00ec v\u00e0 t\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi thi\u1ebft k\u1ebf giao di\u1ec7n web, vi\u1ec7c chia b\u1ed1 c\u1ee5c sao cho h\u1ee3p l\u00fd, \u0111\u1eb9p m\u1eaft v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi thi\u1ebft b\u1ecb lu\u00f4n l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. Bootstrap gi\u00fap \u0111\u01a1n gi\u1ea3n ho\u00e1 \u0111i\u1ec1u \u0111\u00f3 v\u1edbi Grid System. \u0110\u00e2y l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi d\u1ef1a tr\u00ean Flexbox, cho ph\u00e9p b\u1ea1n d\u1ec5 d\u00e0ng chia layout th\u00e0nh [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":88675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-88597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Chi ti\u1ebft Bootstrap Grid system - h\u1ec7 th\u1ed1ng l\u01b0\u1edbi trong Bootstrap, t\u1eeb k\u1ef9 thu\u1eadt c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao (offset, nesting, order...) &amp; v\u00ed d\u1ee5 th\u1ef1c t\u1ebf.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao\" \/>\n<meta property=\"og:description\" content=\"Khi thi\u1ebft k\u1ebf giao di\u1ec7n web, vi\u1ec7c chia b\u1ed1 c\u1ee5c sao cho h\u1ee3p l\u00fd, \u0111\u1eb9p m\u1eaft v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi thi\u1ebft b\u1ecb lu\u00f4n l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. Bootstrap gi\u00fap \u0111\u01a1n gi\u1ea3n ho\u00e1 \u0111i\u1ec1u\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" \/>\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-06-29T14:45:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:32:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","description":"Chi ti\u1ebft Bootstrap Grid system - h\u1ec7 th\u1ed1ng l\u01b0\u1edbi trong Bootstrap, t\u1eeb k\u1ef9 thu\u1eadt c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao (offset, nesting, order...) & v\u00ed d\u1ee5 th\u1ef1c t\u1ebf.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/","og_locale":"vi_VN","og_type":"article","og_title":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","og_description":"Khi thi\u1ebft k\u1ebf giao di\u1ec7n web, vi\u1ec7c chia b\u1ed1 c\u1ee5c sao cho h\u1ee3p l\u00fd, \u0111\u1eb9p m\u1eaft v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi thi\u1ebft b\u1ecb lu\u00f4n l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. Bootstrap gi\u00fap \u0111\u01a1n gi\u1ea3n ho\u00e1 \u0111i\u1ec1u","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-06-29T14:45:17+00:00","article_modified_time":"2025-07-10T04:32:02+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-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":"24 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","datePublished":"2025-06-29T14:45:17+00:00","dateModified":"2025-07-10T04:32:02+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/"},"wordCount":5065,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/","name":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-scaled.png","datePublished":"2025-06-29T14:45:17+00:00","dateModified":"2025-07-10T04:32:02+00:00","description":"Chi ti\u1ebft Bootstrap Grid system - h\u1ec7 th\u1ed1ng l\u01b0\u1edbi trong Bootstrap, t\u1eeb k\u1ef9 thu\u1eadt c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao (offset, nesting, order...) & v\u00ed d\u1ee5 th\u1ef1c t\u1ebf.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/bootstrap-grid-vippro-scaled.png","width":2560,"height":1347,"caption":"bootstrap grid - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Grid System l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"}]},{"@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\/88597","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=88597"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88597\/revisions"}],"predecessor-version":[{"id":89256,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88597\/revisions\/89256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/88675"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=88597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=88597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=88597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}