{"id":87179,"date":"2025-05-24T21:05:40","date_gmt":"2025-05-24T14:05:40","guid":{"rendered":"https:\/\/itviec1.uptech.vn\/?p=87179"},"modified":"2025-07-10T11:23:05","modified_gmt":"2025-07-10T04:23:05","slug":"cach-tuy-chinh-bootstrap-responsive","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/","title":{"rendered":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn 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\/cach-tuy-chinh-bootstrap-responsive\/#Responsive_Bootstrap_la_gi\" >Responsive Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#Cac_breakpoint_Responsive_trong_Bootstrap_xs_sm_md_lg_xl_xxl\" >C\u00e1c breakpoint Responsive trong Bootstrap (xs, sm, md, lg, xl, xxl)<\/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\/cach-tuy-chinh-bootstrap-responsive\/#Vi_du_su_dung_Responsive_ket_hop_voi_cac_lop_tien_ich\" >V\u00ed d\u1ee5 s\u1eed d\u1ee5ng Responsive k\u1ebft h\u1ee3p v\u1edbi c\u00e1c l\u1edbp ti\u1ec7n \u00edch<\/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\/cach-tuy-chinh-bootstrap-responsive\/#Tuy_chinh_responsive_nang_cao_trong_Bootstrap\" >T\u00f9y ch\u1ec9nh responsive n\u00e2ng cao trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#Nhung_luu_y_khi_thiet_ke_responsive_voi_Bootstrap\" >Nh\u1eefng l\u01b0u \u00fd khi thi\u1ebft k\u1ebf responsive v\u1edbi 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\/cach-tuy-chinh-bootstrap-responsive\/#Cau_hoi_thuong_gap_ve_Bootstrap_responsive\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap responsive<\/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\/cach-tuy-chinh-bootstrap-responsive\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n responsive \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb \u0111i\u1ec7n tho\u1ea1i, tablet cho \u0111\u1ebfn m\u00e1y t\u00ednh g\u1ea7n nh\u01b0 l\u00e0 \u0111i\u1ec1u b\u1eaft bu\u1ed9c. Bootstrap gi\u00fap vi\u1ec7c n\u00e0y tr\u1edf n\u00ean \u0111\u01a1n gi\u1ea3n h\u01a1n r\u1ea5t nhi\u1ec1u nh\u1edd tri\u1ebft l\u00fd thi\u1ebft k\u1ebf \u201cmobile-first\u201d v\u00e0 h\u1ec7 th\u1ed1ng l\u1edbp ti\u1ec7n \u00edch responsive c\u1ef1c k\u1ef3 linh ho\u1ea1t.<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">T\u1ed5ng quan v\u1ec1 responsive trong Bootstrap<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1ch s\u1eed d\u1ee5ng l\u1edbp ti\u1ec7n \u00edch \u0111\u1ec3 hi\u1ec3n th\u1ecb, \u1ea9n, c\u0103n l\u1ec1, padding\/margin responsive<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1ch responsive c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 navbar, \u1ea3nh, b\u1ea3ng<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1ch t\u00f9y ch\u1ec9nh responsive n\u00e2ng cao<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng khi l\u00e0m vi\u1ec7c v\u1edbi responsive trong Bootstrap<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-responsive-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Responsive_Bootstrap_la_gi\"><\/span><b>Responsive Bootstrap l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-la-gi\"><b>Responsive l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Responsive Web Design (thi\u1ebft k\u1ebf web \u0111\u00e1p \u1ee9ng) l\u00e0 c\u00e1ch thi\u1ebft k\u1ebf trang web sao cho giao di\u1ec7n c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh c\u1ee7a thi\u1ebft b\u1ecb m\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111ang s\u1eed d\u1ee5ng (\u0111i\u1ec7n tho\u1ea1i, tablet, laptop, m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 n\u1ed9i dung tr\u00ean trang c\u00f3 th\u1ec3 co gi\u00e3n, s\u1eafp x\u1ebfp l\u1ea1i, ho\u1eb7c th\u1eadm ch\u00ed l\u00e0 \u1ea9n \u0111i m\u1ed9t s\u1ed1 ph\u1ea7n \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng lu\u00f4n th\u1ea5y \u0111\u01b0\u1ee3c th\u00f4ng tin m\u1ed9t c\u00e1ch d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 thao t\u00e1c nh\u1ea5t.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thi\u1ebft k\u1ebf responsive gi\u00fap website tr\u00f4ng \u0111\u1eb9p v\u00e0 ho\u1ea1t \u0111\u1ed9ng t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea1o nhi\u1ec1u phi\u00ean b\u1ea3n kh\u00e1c nhau. C\u00e1c ph\u1ea7n t\u1eed nh\u01b0 menu c\u00f3 th\u1ec3 chuy\u1ec3n th\u00e0nh n\u00fat b\u1ea5m d\u1ea1ng th\u1ea3 xu\u1ed1ng (dropdown), ho\u1eb7c vu\u1ed1t sang tr\u00e1i\/ph\u1ea3i \u0111\u1ec3 truy c\u1eadp. Vi\u1ec7c n\u00e0y ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng HTML v\u00e0 CSS &#8211; \u0111\u1eb7c bi\u1ec7t l\u00e0 khi d\u00f9ng c\u00e1c phi\u00ean b\u1ea3n m\u1edbi nh\u01b0 HTML5 v\u00e0 CSS3.<\/span><\/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: <a href=\"https:\/\/itviec.com\/blog\/bootstrap-5-la-gi\/\" target=\"_blank\" rel=\"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-vi-sao-responsive-quan-tr\u1ecdng-trong-thi\u1ebft-k\u1ebf-web\"><b>V\u00ec sao Responsive quan tr\u1ecdng trong thi\u1ebft k\u1ebf web?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ng\u00e0y nay, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 truy c\u1eadp web t\u1eeb m\u00e1y t\u00ednh, \u0111i\u1ec7n tho\u1ea1i, tablet, laptop v\u1edbi \u0111\u1ee7 m\u1ecdi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau. N\u1ebfu website kh\u00f4ng t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh hi\u1ec3n th\u1ecb cho ph\u00f9 h\u1ee3p, n\u1ed9i dung s\u1ebd b\u1ecb v\u1ee1 layout, ch\u1eef qu\u00e1 nh\u1ecf, h\u00ecnh \u1ea3nh tr\u00e0n ra ngo\u00e0i ho\u1eb7c kh\u00f3 thao t\u00e1c.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"921\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-22-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87238\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-22-vippro.png 545w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-22-vippro-178x300.png 178w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-22-vippro-379x640.png 379w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-22-vippro-118x200.png 118w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh v\u00ed d\u1ee5 v\u1ec1 giao di\u1ec7n kh\u00f4ng responsive (n\u1ed9i dung b\u1ecb tr\u00e0n kh\u1ecfi viewport).<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Responsive gi\u00fap website:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Hi\u1ec3n th\u1ecb \u0111\u1eb9p v\u00e0 d\u1ec5 \u0111\u1ecdc tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Gi\u1eef tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng nh\u1ea5t qu\u00e1n, d\u00f9 h\u1ecd d\u00f9ng m\u00e0n h\u00ecnh nh\u1ecf hay l\u1edbn<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">T\u0103ng th\u1eddi gian ng\u01b0\u1eddi d\u00f9ng \u1edf l\u1ea1i trang, gi\u1ea3m t\u1ef7 l\u1ec7 tho\u00e1t trang<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">T\u1ed1t cho SEO, v\u00ec Google \u01b0u ti\u00ean c\u00e1c trang web th\u00e2n thi\u1ec7n v\u1edbi thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Ti\u1ebft ki\u1ec7m th\u1eddi gian ph\u00e1t tri\u1ec3n, v\u00ec ch\u1ec9 c\u1ea7n l\u00e0m m\u1ed9t phi\u00ean b\u1ea3n giao di\u1ec7n thay v\u00ec nhi\u1ec1u b\u1ea3n ri\u00eang cho desktop v\u00e0 mobile<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"913\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-23-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87239\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-23-vippro.png 531w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-23-vippro-174x300.png 174w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-23-vippro-372x640.png 372w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-23-vippro-116x200.png 116w\" sizes=\"auto, (max-width: 531px) 100vw, 531px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh giao di\u1ec7n c\u00f3 Bootstrap Responsive (n\u1ed9i dung \u0111\u01b0\u1ee3c canh ch\u1ec9nh n\u1eb1m trong viewport).<\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-breakpoint-responsive-trong-bootstrap-xs-sm-md-lg-xl-xxl\"><span class=\"ez-toc-section\" id=\"Cac_breakpoint_Responsive_trong_Bootstrap_xs_sm_md_lg_xl_xxl\"><\/span><b>C\u00e1c breakpoint Responsive trong Bootstrap (xs, sm, md, lg, xl, xxl)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Breakpoint trong Bootstrap l\u00e0 c\u00e1c \u0111i\u1ec3m ng\u1eaft gi\u00fap x\u00e1c \u0111\u1ecbnh khi n\u00e0o b\u1ed1 c\u1ee5c ho\u1eb7c giao di\u1ec7n n\u00ean thay \u0111\u1ed5i \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi \u0111\u1ed9 r\u1ed9ng c\u1ee7a thi\u1ebft b\u1ecb. Bootstrap s\u1eed d\u1ee5ng 6 breakpoint m\u1eb7c \u0111\u1ecbnh t\u01b0\u01a1ng \u1ee9ng v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc thi\u1ebft b\u1ecb ph\u1ed5 bi\u1ebfn. M\u1ed7i breakpoint cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t c\u00e1ch hi\u1ec3n th\u1ecb c\u1ee7a ph\u1ea7n t\u1eed t\u1ea1i m\u1ed9t m\u1ee9c \u0111\u1ed9 r\u1ed9ng m\u00e0n h\u00ecnh nh\u1ea5t \u0111\u1ecbnh tr\u1edf l\u00ean. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 chi ti\u1ebft t\u1eebng lo\u1ea1i:<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-xs-extra-small-r\u1ea5t-nh\u1ecf\"><b>xs \u2013 Extra small (r\u1ea5t nh\u1ecf)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00c1p d\u1ee5ng cho \u0111i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng (chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh d\u01b0\u1edbi <\/span><b>576px<\/b><span style=\"font-weight: 400;\">), \u0111\u00e2y l\u00e0 m\u1ee9c m\u1eb7c \u0111\u1ecbnh cho m\u1ecdi ph\u1ea7n t\u1eed.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sm-small-nh\u1ecf\"><b>sm &#8211; Small (nh\u1ecf)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c \u00e1p d\u1ee5ng cho m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i l\u1edbn ho\u1eb7c thi\u1ebft b\u1ecb c\u00f3 chi\u1ec1u r\u1ed9ng t\u1eeb <\/span><b>576px<\/b><span style=\"font-weight: 400;\"> tr\u1edf l\u00ean.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 d\u00f9ng <\/span><b>col-sm-*<\/b><span style=\"font-weight: 400;\"> khi b\u1ea1n mu\u1ed1n b\u1ed1 c\u1ee5c b\u1eaft \u0111\u1ea7u chia c\u1ed9t t\u1eeb m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i l\u1edbn tr\u1edf l\u00ean:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-sm-6\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; C\u1ed9t n\u00e0y chi\u1ebfm 6\/12 chi\u1ec1u r\u1ed9ng khi m\u00e0n h\u00ecnh \u2265 576px<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-md-medium-v\u1eeba\"><b>md \u2013 Medium (v\u1eeba)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00c1p d\u1ee5ng cho m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 thi\u1ebft b\u1ecb c\u1ee1 trung. \u0110\u00e2y l\u00e0 m\u1ed9t trong c\u00e1c breakpoint ph\u1ed5 bi\u1ebfn nh\u1ea5t, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 ph\u00e2n bi\u1ec7t gi\u1eefa mobile v\u00e0 desktop.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb m\u1ed9t n\u1ed9i dung khi \u1edf m\u00e0n h\u00ecnh ipad tr\u1edf l\u00ean:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-none d-md-block\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; Hi\u1ec7n tr\u00ean m\u00e1y t\u00ednh b\u1ea3ng tr\u1edf l\u00ean, \u1ea9n tr\u00ean \u0111i\u1ec7n tho\u1ea1i<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lg-large-l\u1edbn\"><b>lg \u2013 Large (l\u1edbn)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00c1p d\u1ee5ng cho m\u00e0n h\u00ecnh laptop, m\u00e0n h\u00ecnh desktop nh\u1ecf (t\u1eeb 992px tr\u1edf l\u00ean). Breakpoint n\u00e0y th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh layout desktop m\u00e0 v\u1eabn gi\u1eef s\u1ef1 g\u1ecdn g\u00e0ng \u1edf thi\u1ebft b\u1ecb nh\u1ecf.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"text-center text-lg-start\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; C\u0103n gi\u1eefa \u1edf mobile\/tablet, c\u0103n tr\u00e1i \u1edf desktop<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-xl-extra-large-r\u1ea5t-l\u1edbn\"><b>xl \u2013 Extra large (r\u1ea5t l\u1edbn)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c m\u00e0n h\u00ecnh r\u1ed9ng nh\u01b0 desktop l\u1edbn, m\u00e0n h\u00ecnh 20 inch tr\u1edf l\u00ean.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 d\u00f9ng xl khi b\u1ea1n mu\u1ed1n b\u1ed1 c\u1ee5c \u201cm\u1edf r\u1ed9ng\u201d \u1edf nh\u1eefng m\u00e0n h\u00ecnh l\u1edbn m\u00e0 kh\u00f4ng \u1ea3nh h\u01b0\u1edfng thi\u1ebft b\u1ecb nh\u1ecf h\u01a1n:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"container-xl\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; Container n\u00e0y ch\u1ec9 full width khi \u0111\u1ea1t t\u1eeb 1200px tr\u1edf l\u00ean<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-xxl-extra-extra-large-r\u1ea5t-r\u1ea5t-l\u1edbn\"><b>xxl \u2013 Extra extra large (r\u1ea5t r\u1ea5t l\u1edbn)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00c1p d\u1ee5ng cho m\u00e0n h\u00ecnh si\u00eau r\u1ed9ng (chi\u1ec1u r\u1ed9ng t\u1eeb 1400px tr\u1edf l\u00ean). Th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi thi\u1ebft k\u1ebf website cho m\u00f4i tr\u01b0\u1eddng hi\u1ec3n th\u1ecb c\u1ef1c l\u1edbn nh\u01b0 TV, b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n\u2026<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-12 col-xxl-8\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; Chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng \u1edf thi\u1ebft b\u1ecb nh\u1ecf, nh\u01b0ng ch\u1ec9 8\/12 \u1edf si\u00eau m\u00e0n h\u00ecnh<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c breakpoint m\u1eb7c \u0111\u1ecbnh trong Bootstrap:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>T\u00ean g\u1ecdi<\/b><\/td><td><b>K\u00fd hi\u1ec7u<\/b><\/td><td><b>K\u00edch th\u01b0\u1edbc t\u1ed1i thi\u1ec3u<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Extra small (r\u1ea5t nh\u1ecf)<\/span><\/td><td><span style=\"font-weight: 400;\">xs<\/span><\/td><td><span style=\"font-weight: 400;\">&lt;576px (t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng, kh\u00f4ng c\u1ea7n khai b\u00e1o)<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Small (nh\u1ecf)<\/span><\/td><td><span style=\"font-weight: 400;\">sm<\/span><\/td><td><span style=\"font-weight: 400;\">\u2265576px<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Medium (v\u1eeba)<\/span><\/td><td><span style=\"font-weight: 400;\">md<\/span><\/td><td><span style=\"font-weight: 400;\">\u2265768px<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Large (l\u1edbn)<\/span><\/td><td><span style=\"font-weight: 400;\">lg<\/span><\/td><td><span style=\"font-weight: 400;\">\u2265992px<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Extra large (r\u1ea5t l\u1edbn)<\/span><\/td><td><span style=\"font-weight: 400;\">xl<\/span><\/td><td><span style=\"font-weight: 400;\">\u22651200px<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Extra extra large<\/span><\/td><td><span style=\"font-weight: 400;\">xxl<\/span><\/td><td><span style=\"font-weight: 400;\">\u22651400px<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vi-d\u1ee5-s\u1eed-d\u1ee5ng-responsive-k\u1ebft-h\u1ee3p-v\u1edbi-cac-l\u1edbp-ti\u1ec7n-ich\"><span class=\"ez-toc-section\" id=\"Vi_du_su_dung_Responsive_ket_hop_voi_cac_lop_tien_ich\"><\/span><b>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng Responsive k\u1ebft h\u1ee3p v\u1edbi c\u00e1c l\u1edbp ti\u1ec7n \u00edch<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hi\u1ec3n-th\u1ecb-va-\u1ea9n-ph\u1ea7n-t\u1eed-theo-kich-th\u01b0\u1edbc\"><b>Hi\u1ec3n th\u1ecb v\u00e0 \u1ea9n ph\u1ea7n t\u1eed theo k\u00edch th\u01b0\u1edbc<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p c\u00e1c l\u1edbp <\/span><b>d-*<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ki\u1ec3m so\u00e1t hi\u1ec3n th\u1ecb (display) c\u1ee7a ph\u1ea7n t\u1eed, g\u1ed3m 2 ph\u1ea7n ch\u00ednh l\u00e0:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>d-none<\/b><span style=\"font-weight: 400;\">: \u1ea9n ph\u1ea7n t\u1eed (t\u01b0\u01a1ng \u0111\u01b0\u01a1ng <\/span><b>display: none;<\/b><span style=\"font-weight: 400;\">)<\/span><\/li>\n\n\n\n<li><b>d-block<\/b><span style=\"font-weight: 400;\">: hi\u1ec3n th\u1ecb ph\u1ea7n t\u1eed d\u01b0\u1edbi d\u1ea1ng kh\u1ed1i (t\u01b0\u01a1ng \u0111\u01b0\u01a1ng <\/span><b>display: block;<\/b><span style=\"font-weight: 400;\">)<\/span><\/li>\n\n\n\n<li><b>d-flex<\/b><span style=\"font-weight: 400;\">: bi\u1ebfn ph\u1ea7n t\u1eed th\u00e0nh m\u1ed9t flex container (t\u01b0\u01a1ng \u0111\u01b0\u01a1ng <\/span><b>display: flex;<\/b><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 ki\u1ec3m so\u00e1t vi\u1ec7c hi\u1ec3n th\u1ecb ho\u1eb7c \u1ea9n ph\u1ea7n t\u1eed theo m\u00e0n h\u00ecnh t\u01b0\u01a1ng \u1ee9ng, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c l\u1edbp <\/span><b>d-*<\/b><span style=\"font-weight: 400;\"> v\u00e0 breakpoint theo c\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">d-&lt;<\/span><span style=\"font-weight: 400;\">breakpoint<\/span><span style=\"font-weight: 400;\">&gt;-&lt;<\/span><span style=\"font-weight: 400;\">display<\/span><span style=\"font-weight: 400;\"> value&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: Hi\u1ec3n th\u1ecb v\u00e0 \u1ea9n ph\u1ea7n t\u1eed theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh:<\/span><\/p>\n\n\n\n<p>\u1ea8n ph\u1ea7n t\u1eed tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c thi\u1ebft b\u1ecb, ch\u1ec9 hi\u1ec3n th\u1ecb khi m\u00e0n h\u00ecnh l\u1edbn t\u1eeb lg tr\u1edf l\u00ean (\u2265992px).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-none d-lg-block\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; ITViec Blog (Hi\u1ec3n th\u1ecb t\u1eeb m\u00e0n h\u00ecnh \u2265992px)<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ea8n ph\u1ea7n t\u1eed tr\u00ean m\u00e0n h\u00ecnh r\u1ea5t nh\u1ecf (xs), hi\u1ec3n th\u1ecb tr\u00ean thi\u1ebft b\u1ecb t\u1eeb sm tr\u1edf l\u00ean (tablet, desktop).<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-none d-sm-block\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; ITViec Blog (\u1ea8n \u1edf xs (d\u01b0\u1edbi 576px), hi\u1ec3n th\u1ecb t\u1eeb sm (\u2265576px))<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ch\u1ec9 hi\u1ec3n th\u1ecb ph\u1ea7n t\u1eed tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf (mobile) c\u00f3 chi\u1ec1u r\u1ed9ng d\u01b0\u1edbi 576px, \u1ea9n tr\u00ean tablet tr\u1edf l\u00ean.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-block d-sm-none\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; ITViec Blog (Ch\u1ec9 hi\u1ec3n th\u1ecb d\u01b0\u1edbi 576px)<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a nh\u1eefng \u0111o\u1ea1n code tr\u00ean:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"950\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-5-vippro.jpg\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87221\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-5-vippro.jpg 1160w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-5-vippro-300x246.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-5-vippro-768x629.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-5-vippro-200x164.jpg 200w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh tablet:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1840\" height=\"1512\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-6-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87222\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-6-vippro.png 1840w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-6-vippro-300x247.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-6-vippro-1536x1262.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-6-vippro-200x164.png 200w\" sizes=\"auto, (max-width: 1840px) 100vw, 1840px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh desktop:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2234\" height=\"1042\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-4-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87220\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-4-vippro.png 2234w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-4-vippro-300x140.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-4-vippro-2048x955.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-4-vippro-200x93.png 200w\" sizes=\"auto, (max-width: 2234px) 100vw, 2234px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-canh-l\u1ec1-can-gi\u1eefa-v\u1edbi-responsive\"><b>Canh l\u1ec1, c\u0103n gi\u1eefa v\u1edbi responsive<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap h\u1ed7 tr\u1ee3 c\u00e1c l\u1edbp <\/span><b>text-{alignment}<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 b\u1ea1n c\u0103n v\u0103n b\u1ea3n tr\u00e1i (start), gi\u1eefa (center) ho\u1eb7c ph\u1ea3i (end) t\u00f9y theo k\u00edch th\u01b0\u1edbc thi\u1ebft b\u1ecb. Vi\u1ec7c k\u1ebft h\u1ee3p v\u1edbi breakpoint theo c\u00fa ph\u00e1p: <\/span><b>text-{breakpoint}-{alignment} <\/b><span style=\"font-weight: 400;\">s\u1ebd gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng ki\u1ec3m so\u00e1t canh l\u1ec1 cho ph\u1ea7n t\u1eed.<\/span><\/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: <a href=\"https:\/\/itviec.com\/blog\/text-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Text Bootstrap: 10+ c\u00e1ch \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 \u0111\u1ec3 c\u0103n gi\u1eefa v\u0103n b\u1ea3n tr\u00ean mobile, tr\u00e1i \u1edf tablet, v\u00e0 ph\u1ea3i \u1edf desktop, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng code sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">p<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"text-center text-sm-start text-md-end\"<\/span><span style=\"font-weight: 400;\">&gt;ITViec Blog - \u0111\u00e2y l\u00e0 n\u1ed9i dung \u0111\u01b0\u1ee3c canh l\u1ec1&lt;\/<\/span><span style=\"font-weight: 400;\">p<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1040\" height=\"1600\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-7-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87223\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-7-vippro.png 1040w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-7-vippro-195x300.png 195w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-7-vippro-998x1536.png 416w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-7-vippro-130x200.png 130w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh tablet:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1442\" height=\"1336\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-8-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87224\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-8-vippro.png 1442w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-8-vippro-300x278.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-8-vippro-768x712.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-8-vippro-200x185.png 200w\" sizes=\"auto, (max-width: 1442px) 100vw, 1442px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi nh\u1eefng ph\u1ea7n t\u1eed c\u00f3 <\/span><b>display: flex<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t th\u1ee9 t\u1ef1 n\u00e0y cho t\u1eebng m\u00e0n h\u00ecnh thi\u1ebft b\u1ecb theo \u00fd mu\u1ed1n b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p nhi\u1ec1u l\u1edbp <\/span><b>justify-content-*<\/b><span style=\"font-weight: 400;\"> v\u1edbi t\u1eebng breakpoint theo c\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>justify-content-{breakpoint}-{alignment}<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 m\u1ed9t n\u00fat n\u1eb1m b\u00ean tr\u00e1i \u1edf mobile, n\u1eb1m \u1edf gi\u1eefa \u1edf tablet, n\u1eb1m b\u00ean ph\u1ea3i \u1edf desktop, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-flex justify-content-start justify-content-sm-center justify-content-md-end\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &lt;<\/span><span style=\"font-weight: 400;\">button<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"btn btn-primary\"<\/span><span style=\"font-weight: 400;\">&gt;ITViec Button&lt;\/<\/span><span style=\"font-weight: 400;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed div c\u00f3 display flex (<\/span><b>d-flex<\/b><span style=\"font-weight: 400;\">)<\/span><\/li>\n\n\n\n<li><b>justify-content-start<\/b><span style=\"font-weight: 400;\">: \u0111\u1ecbnh d\u1ea1ng n\u00fat n\u1eb1m b\u00ean tr\u00e1i (theo thi\u1ebft k\u1ebf Left To Right), s\u1eed d\u1ee5ng breakpoint m\u1eb7c \u0111\u1ecbnh l\u00e0 xs (\u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 m\u00e0n h\u00ecnh n\u1ebfu kh\u00f4ng c\u00f3 breakpoint cao h\u01a1n)<\/span><\/li>\n\n\n\n<li><b>justify-content-sm-center<\/b><span style=\"font-weight: 400;\">: \u0111\u1ecbnh d\u1ea1ng canh gi\u1eefa cho n\u00fat khi \u1edf m\u00e0n h\u00ecnh \u2265576px<\/span><\/li>\n\n\n\n<li><b>justify-content-md-end<\/b><span style=\"font-weight: 400;\">: \u0111\u1ecbnh d\u1ea1ng canh ph\u1ea3i cho n\u00fat khi \u1edf m\u00e0n h\u00ecnh \u2265768px<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh mobile:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"986\" height=\"1136\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-10-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87226\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-10-vippro.png 986w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-10-vippro-260x300.png 260w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-10-vippro-768x885.png 555w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-10-vippro-174x200.png 174w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh tablet:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1488\" height=\"1268\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-9-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87225\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-9-vippro.png 1488w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-9-vippro-300x256.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-9-vippro-768x654.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-9-vippro-200x170.png 200w\" sizes=\"auto, (max-width: 1488px) 100vw, 1488px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh desktop:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2274\" height=\"1448\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-11-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87227\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-11-vippro.png 2274w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-11-vippro-300x191.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-11-vippro-2048x1304.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-11-vippro-200x127.png 200w\" sizes=\"auto, (max-width: 2274px) 100vw, 2274px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-padding-margin-va-kich-th\u01b0\u1edbc-responsive\"><b>Padding, margin, v\u00e0 k\u00edch th\u01b0\u1edbc responsive<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p h\u1ec7 th\u1ed1ng l\u1edbp spacing ti\u1ec7n \u00edch (spacing utilities) c\u1ef1c k\u1ef3 linh ho\u1ea1t \u0111\u1ec3 thi\u1ebft l\u1eadp <a href=\"https:\/\/itviec.com\/blog\/padding-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\">padding<\/a>, <a href=\"https:\/\/itviec.com\/blog\/margin-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\">margin<\/a> v\u00e0 k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed. C\u00e1c l\u1edbp n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh theo t\u1eebng breakpoint, gi\u00fap giao di\u1ec7n hi\u1ec3n th\u1ecb \u0111\u1eb9p m\u1eaft tr\u00ean m\u1ecdi lo\u1ea1i thi\u1ebft b\u1ecb theo c\u00fa ph\u00e1p sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">{property}{sides}-{breakpoint}-{size}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">property: m = margin, p = padding<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Sides: t (top), b (bottom), s (start), e (end), x (start &amp; end), y (top &amp; bottom), n\u1ebfu kh\u00f4ng c\u00f3 gi\u00e1 tr\u1ecb, ngh\u0129a l\u00e0 \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c h\u01b0\u1edbng<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">breakpoint (tu\u1ef3 ch\u1ecdn): sm, md, lg, xl, xxl<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">size: t\u1eeb 0 \u0111\u1ebfn 5, ho\u1eb7c auto<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh m\u1ed9t kh\u1ed1i n\u1ed9i dung c\u00f3 margin-top l\u1edbn h\u01a1n khi hi\u1ec3n th\u1ecb \u1edf m\u00e0n h\u00ecnh tablet tr\u1edf l\u00ean v\u00e0 t\u0103ng padding left\/right khi hi\u1ec3n th\u1ecb \u1edf m\u00e0n h\u00ecnh desktop ta l\u00e0m nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"mt-3 mt-md-5 px-2 px-lg-5\"<\/span><span style=\"font-weight: 400;\">&gt;ITViec Blog - spacing utilities with responsive &lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">mt-3: \u0111\u1ecbnh d\u1ea1ng margin-top 1rem \u1edf b\u1ea5t k\u00ec m\u00e0n h\u00ecnh n\u00e0o<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">mt-md-5: b\u1ed5 sung \u0111\u1ecbnh d\u1ea1ng margin-top 3rem \u1edf m\u00e0n h\u00ecnh c\u00f3 k\u00edch th\u01b0\u1edbc \u2265 768px<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">px-2: \u0111\u1ecbnh d\u1ea1ng padding 2 b\u00ean 0.5rem \u1edf b\u1ea5t k\u00ec m\u00e0n h\u00ecnh n\u00e0o<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">px-lg-5: b\u1ed5 sung \u0111\u1ecbnh d\u1ea1ng padding 2 b\u00ean 3rem \u1edf m\u00e0n h\u00ecnh c\u00f3 k\u00edch th\u01b0\u1edbc \u2265 992px<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh mobile:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1054\" height=\"1066\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-12-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87228\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-12-vippro.png 1054w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-12-vippro-297x300.png 297w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-12-vippro-768x777.png 633w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-12-vippro-198x200.png 198w\" sizes=\"auto, (max-width: 1054px) 100vw, 1054px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh tablet:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1554\" height=\"930\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-13-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87229\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-13-vippro.png 1554w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-13-vippro-300x180.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-13-vippro-1536x919.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-13-vippro-200x120.png 200w\" sizes=\"auto, (max-width: 1554px) 100vw, 1554px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh desktop:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2180\" height=\"992\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-14-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87230\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-14-vippro.png 2180w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-14-vippro-300x137.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-14-vippro-2048x932.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-14-vippro-200x91.png 200w\" sizes=\"auto, (max-width: 2180px) 100vw, 2180px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-v\u1edbi-grid-system\"><b>Responsive v\u1edbi Grid System<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid system (h\u1ec7 th\u1ed1ng l\u01b0\u1edbi) l\u00e0 th\u00e0nh ph\u1ea7n ch\u1ee7 \u0111\u1ea1o v\u1ec1 thi\u1ebft k\u1ebf responsive trong Bootstrap. Nh\u1edd h\u1ec7 th\u1ed1ng l\u01b0\u1edbi 12 c\u1ed9t v\u00e0 kh\u1ea3 n\u0103ng k\u1ebft h\u1ee3p linh ho\u1ea1t v\u1edbi c\u00e1c breakpoint, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c co gi\u00e3n m\u01b0\u1ee3t m\u00e0 theo t\u1eebng k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 grid c\u01a1 b\u1ea3n:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"container\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"row\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 1&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 2&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, 2 c\u1ed9t s\u1ebd lu\u00f4n chia \u0111\u1ec1u 50% \u0111\u1ed9 r\u1ed9ng, d\u00f9 b\u1ea5t k\u1ec3 \u1edf m\u00e0n h\u00ecnh n\u00e0o.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-theo-breakpoint-trong-grid-system\"><b>Responsive theo breakpoint trong Grid system<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh s\u1ed1 c\u1ed9t theo t\u1eebng \u0111\u1ed9 r\u1ed9ng m\u00e0n h\u00ecnh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng breakpoint trong class col theo c\u00fa ph\u00e1p sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">col-{breakpoint}-{s\u1ed1_c\u1ed9t}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 m\u1ed9t danh s\u00e1ch hi\u1ec3n th\u1ecb 2 c\u1ed9t m\u1ed7i d\u00f2ng tr\u00ean mobile, v\u00e0 4 c\u1ed9t tr\u00ean tablet tr\u1edf l\u00ean, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng code sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"container\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"row\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-6 col-md-3\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 1&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-6 col-md-3\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 2&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-6 col-md-3\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 3&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"col-6 col-md-3\"<\/span><span style=\"font-weight: 400;\">&gt;C\u1ed9t 4&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">col-6: tr\u00ean mobile (&lt;768px), m\u1ed7i c\u1ed9t chi\u1ebfm 50% chi\u1ec1u r\u1ed9ng (2 c\u1ed9t\/1 h\u00e0ng)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">col-md-3: t\u1eeb tablet tr\u1edf l\u00ean (\u2265768px), m\u1ed7i c\u1ed9t chi\u1ebfm 3\/12 = 25% (4 c\u1ed9t\/1 h\u00e0ng)<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh mobile:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1062\" height=\"1366\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro.jpg\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87236\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro.jpg 1062w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro-233x300.jpg 233w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro-498x640.jpg 498w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro-155x200.jpg 155w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-20-vippro-768x988.jpg 497w\" sizes=\"auto, (max-width: 1062px) 100vw, 1062px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh tablet tr\u1edf l\u00ean:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2184\" height=\"958\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-21-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87237\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-21-vippro.png 2184w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-21-vippro-300x132.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-21-vippro-2048x898.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-21-vippro-200x88.png 200w\" sizes=\"auto, (max-width: 2184px) 100vw, 2184px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-trong-cac-thanh-ph\u1ea7n-giao-di\u1ec7n\"><b>Responsive trong c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap kh\u00f4ng ch\u1ec9 h\u1ed7 tr\u1ee3 responsive cho layout, spacing v\u00e0 c\u0103n ch\u1ec9nh, m\u00e0 c\u00f2n t\u00edch h\u1ee3p kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng linh ho\u1ea1t v\u1edbi nhi\u1ec1u lo\u1ea1i th\u00e0nh ph\u1ea7n giao di\u1ec7n ph\u1ed5 bi\u1ebfn nh\u01b0 navbar, h\u00ecnh \u1ea3nh v\u00e0 b\u1ea3ng d\u1eef li\u1ec7u. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch b\u1ea1n c\u00f3 th\u1ec3 tri\u1ec3n khai ch\u00fang m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-v\u1edbi-navbar\"><b>Responsive v\u1edbi navbar<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong Bootstrap, thanh \u0111i\u1ec1u h\u01b0\u1edbng (navbar) c\u00f3 th\u1ec3 thu g\u1ecdn (collapse) th\u00e0nh m\u1ed9t n\u00fat b\u1ea5m tr\u00ean c\u00e1c m\u00e0n h\u00ecnh nh\u1ecf. \u0110\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y, b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c l\u1edbp:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>.navbar-toggler<\/b><span style=\"font-weight: 400;\">: n\u00fat b\u1ea5m \u0111\u1ec3 m\u1edf\/\u0111\u00f3ng menu.<\/span><\/li>\n\n\n\n<li><b>.navbar-collapse<\/b><span style=\"font-weight: 400;\">: ph\u1ea7n n\u1ed9i dung s\u1ebd \u1ea9n\/hi\u1ec7n khi nh\u1ea5n n\u00fat.<\/span><\/li>\n\n\n\n<li><b>.navbar-expand-{breakpoint}<\/b><span style=\"font-weight: 400;\">: x\u00e1c \u0111\u1ecbnh khi n\u00e0o thanh \u0111i\u1ec1u h\u01b0\u1edbng s\u1ebd m\u1edf r\u1ed9ng (hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 menu) thay v\u00ec thu g\u1ecdn.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1ch ho\u1ea1t \u0111\u1ed9ng:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n menu hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 tr\u00ean m\u00e0n h\u00ecnh t\u1eeb k\u00edch th\u01b0\u1edbc trung b\u00ecnh (md) tr\u1edf l\u00ean, d\u00f9ng:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">nav<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"navbar navbar-expand-md\"<\/span><span style=\"font-weight: 400;\">&gt;...&lt;\/<\/span><span style=\"font-weight: 400;\">nav<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n menu lu\u00f4n hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 (kh\u00f4ng bao gi\u1edd thu g\u1ecdn), d\u00f9ng:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">nav<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"navbar navbar-expand\"<\/span><span style=\"font-weight: 400;\">&gt;...&lt;\/<\/span><span style=\"font-weight: 400;\">nav<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n menu lu\u00f4n thu g\u1ecdn, kh\u00f4ng c\u1ea7n th\u00eam .navbar-expand:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar\"&gt;...&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 t\u1ea1o ra m\u1ed9t thanh menu s\u1ebd hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 \u1edf m\u00e0n h\u00ecnh l\u1edbn v\u00e0 thu g\u1ecdn \u1edf m\u00e0n h\u00ecnh mobile, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng code sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-sm bg-light\"&gt;\n&nbsp; &lt;div class=\"container-fluid\"&gt;\n&nbsp; &nbsp; &lt;a class=\"navbar-brand\" href=\"#\"&gt;ITViec Blog&lt;\/a&gt;\n&nbsp; &nbsp; &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#menu1\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n&nbsp; &nbsp; &lt;\/button&gt;\n&nbsp; &nbsp; &lt;div class=\"collapse navbar-collapse\" id=\"menu1\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;ul class=\"navbar-nav\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Trang ch\u1ee7&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &lt;\/div&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, s\u1eed d\u1ee5ng <\/span><b>navbar-expand-sm <\/b><span style=\"font-weight: 400;\">\u0111\u1ec3 m\u1edf navbar khi hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh \u2265 576px. K\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh &lt; 576px (mobile):<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"1210\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-15-vippro.jpg\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87231\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-15-vippro.jpg 980w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-15-vippro-243x300.jpg 243w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-15-vippro-768x948.jpg 518w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-15-vippro-162x200.jpg 162w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede m\u00e0n h\u00ecnh \u2265 576px:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2184\" height=\"970\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-16-vippro.png\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87232\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-16-vippro.png 2184w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-16-vippro-300x133.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-16-vippro-2048x910.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-16-vippro-200x89.png 200w\" sizes=\"auto, (max-width: 2184px) 100vw, 2184px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-trong-hinh-\u1ea3nh-img-fluid-ratio\"><b>Responsive trong h\u00ecnh \u1ea3nh (img-fluid, ratio)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong Bootstrap, \u0111\u1ec3 h\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb \u0111\u1eb9p tr\u00ean m\u1ecdi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh, b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam l\u1edbp <\/span><b>.img-fluid<\/b><span style=\"font-weight: 400;\">. L\u1edbp n\u00e0y \u00e1p d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh <\/span><b>max-width: 100%<\/b><span style=\"font-weight: 400;\">; v\u00e0 <\/span><b>height: auto;<\/b><span style=\"font-weight: 400;\"> cho h\u00ecnh \u1ea3nh, gi\u00fap n\u00f3 \u0111i\u1ec1u ch\u1ec9nh h\u00ecnh \u1ea3nh sao cho kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed ch\u1ee9a n\u00f3, \u0111\u1ed3ng th\u1eddi gi\u1eef nguy\u00ean t\u1ef7 l\u1ec7, gi\u00fap h\u00ecnh \u1ea3nh lu\u00f4n hi\u1ec3n th\u1ecb s\u1eafc n\u00e9t v\u00e0 ph\u00f9 h\u1ee3p tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">img<\/span><span style=\"font-weight: 400;\"> src=<\/span><span style=\"font-weight: 400;\">\"https:\/\/itviec.com\/assets\/logo_black_text-04776232a37ae9091cddb3df1973277252b12ad19a16715f4486e603ade3b6a4.png\"<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"img-fluid\"<\/span><span style=\"font-weight: 400;\"> alt=<\/span><span style=\"font-weight: 400;\">\"Responsive image\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-v\u1edbi-b\u1ea3ng-table-responsive\"><b>Responsive v\u1edbi b\u1ea3ng (table-responsive)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi hi\u1ec3n th\u1ecb b\u1ea3ng d\u1eef li\u1ec7u tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng, m\u1ed9t v\u1ea5n \u0111\u1ec1 th\u01b0\u1eddng g\u1eb7p l\u00e0 b\u1ea3ng qu\u00e1 r\u1ed9ng v\u00e0 b\u1ecb tr\u00e0n kh\u1ecfi m\u00e0n h\u00ecnh. Bootstrap gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch cung c\u1ea5p m\u1ed9t c\u00f4ng c\u1ee5 c\u1ef1c k\u1ef3 ti\u1ec7n l\u1ee3i l\u00e0 <\/span><b>.table-responsive<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o ra m\u1ed9t table responsive b\u1eb1ng c\u00e1ch b\u1ecdc b\u1ea3ng trong m\u1ed9t th\u1ebb div c\u00f3 class <\/span><b>.table-responsive. <\/b><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"table-responsive\"&gt;\n&nbsp; &lt;table class=\"table\"&gt;\n&nbsp; &nbsp; &lt;thead&gt;\n&nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;#&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;H\u1ecd t\u00ean&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Email&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;\u0110\u1ecba ch\u1ec9&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;S\u1ed1 \u0111i\u1ec7n tho\u1ea1i&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &lt;\/thead&gt;\n&nbsp; &nbsp; &lt;tbody&gt;\n&nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;1&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Nguy\u1ec5n V\u0103n A&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;vana@example.com&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;H\u00e0 N\u1ed9i&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;0123456789&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &lt;\/tbody&gt;\n&nbsp; &lt;\/table&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3: Tr\u00ean mobile, b\u1ea3ng s\u1ebd c\u00f3 thanh cu\u1ed9n ngang, gi\u00fap ng\u01b0\u1eddi d\u00f9ng xem \u0111\u1ea7y \u0111\u1ee7 n\u1ed9i dung m\u00e0 kh\u00f4ng l\u00e0m v\u1ee1 b\u1ed1 c\u1ee5c:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"990\" height=\"1020\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-19-vippro.jpg\" alt=\"bootstrap responsive - itviec blog\" class=\"wp-image-87235\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-19-vippro.jpg 990w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-19-vippro-291x300.jpg 291w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-19-vippro-768x791.jpg 621w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-19-vippro-194x200.jpg 194w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 gi\u1edbi h\u1ea1n b\u1ea3ng ch\u1ec9 responsive t\u1edbi m\u1ed9t k\u00edch th\u01b0\u1edbc nh\u1ea5t \u0111\u1ecbnh, b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c class theo breakpoint v\u1edbi c\u00fa ph\u00e1p sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.table-responsive-{breakpoint}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"table-responsive-md\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; <\/span><span style=\"font-weight: 400;\">&lt;!-- B\u1ea3ng s\u1ebd ch\u1ec9 cu\u1ed9n ngang t\u1eeb m\u00e0n h\u00ecnh nh\u1ecf h\u01a1n 768px --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-responsive-nang-cao-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Tuy_chinh_responsive_nang_cao_trong_Bootstrap\"><\/span><b>T\u00f9y ch\u1ec9nh responsive n\u00e2ng cao trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p h\u1ec7 th\u1ed1ng responsive m\u1eb7c \u0111\u1ecbnh r\u1ea5t m\u1ea1nh m\u1ebd, nh\u01b0ng \u0111\u1ec3 x\u00e2y d\u1ef1ng nh\u1eefng giao di\u1ec7n ph\u1ee9c t\u1ea1p, chuy\u00ean nghi\u1ec7p, b\u1ea1n s\u1ebd c\u1ea7n \u0111\u1ebfn t\u00f9y ch\u1ec9nh responsive n\u00e2ng cao.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1o-utility-class-responsive-rieng\"><b>T\u1ea1o utility class responsive ri\u00eang<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u1ea3 s\u1eed b\u1ea1n mu\u1ed1n c\u00f3 m\u1ed9t class fs-responsive \u0111\u1ec3 thay \u0111\u1ed5i font size theo m\u00e0n h\u00ecnh, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.fs-responsive {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; font-size: 14px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp; @include media-breakpoint-up(md) {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; font-size: 16px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; }<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp; @include media-breakpoint-up(xl) {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; font-size: 18px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; }<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp; @include media-breakpoint-up(xxxl) {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; font-size: 20px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; }<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3 bi\u00ean d\u1ecbch file SCSS c\u1ee7a b\u1ea1n (b\u1eb1ng Webpack, Vite, Laravel Mix ho\u1eb7c Sass CLI) \u0111\u1ec3 s\u1eed d\u1ee5ng class n\u00e0y trong HTML nh\u01b0 nh\u1eefng class responsive kh\u00e1c.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-them-ho\u1eb7c-s\u1eeda-breakpoint-tuy-ch\u1ec9nh\"><b>Th\u00eam ho\u1eb7c s\u1eeda breakpoint t\u00f9y ch\u1ec9nh<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap s\u1eed d\u1ee5ng Sass \u0111\u1ec3 qu\u1ea3n l\u00fd breakpoints, v\u00ec v\u1eady b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda ho\u1eb7c th\u00eam breakpoint m\u1edbi trong qu\u00e1 tr\u00ecnh bi\u00ean d\u1ecbch Bootstrap.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 \u0111\u1ec3 b\u1ed5 sung th\u00eam 1 breakpoint cho m\u00e0n h\u00ecnh c\u1ef1c l\u1edbn (&gt;= 1600px):<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">\/\/ Ghi \u0111\u00e8 breakpoints tr\u01b0\u1edbc khi import<\/span>\n<span style=\"font-weight: 400;\">$grid-breakpoints: (<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xs: 0,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; sm: 576px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; md: 768px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; lg: 992px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xl: 1200px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xxl: 1400px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; \/\/ Th\u00eam breakpoint t\u00f9y ch\u1ec9nh<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xxxl: 1600px<\/span>\n<span style=\"font-weight: 400;\">);<\/span>\n\n<span style=\"font-weight: 400;\">\/\/ Import Bootstrap core<\/span>\n<span style=\"font-weight: 400;\">@import \"node_modules\/bootstrap\/scss\/bootstrap\";<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, b\u1ea1n b\u1ed5 sung th\u00eam <\/span><b>xxxl: 1600px;<\/b><span style=\"font-weight: 400;\"> v\u00e0 th\u1ef1c hi\u1ec7n import n\u1ed9i dung ch\u1ec9nh s\u1eeda v\u00e0o module Bootstrap. Sau \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng breakpoint m\u1edbi n\u00e0y \u0111\u1ec3 t\u1ea1o c\u00e1c class ti\u1ec7n \u00edch ri\u00eang cho xxxl.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">@include media-breakpoint-up(xxxl) {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; .text-xxxl-start {<\/span>\n<span style=\"font-weight: 400;\">&nbsp; &nbsp; text-align: left !important;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; }<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-thi\u1ebft-k\u1ebf-responsive-v\u1edbi-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_thiet_ke_responsive_voi_Bootstrap\"><\/span><b>Nh\u1eefng l\u01b0u \u00fd khi thi\u1ebft k\u1ebf responsive v\u1edbi Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap l\u00e0 m\u1ed9t framework m\u1ea1nh m\u1ebd gi\u00fap t\u1ea1o giao di\u1ec7n responsive nhanh ch\u00f3ng. Tuy nhi\u00ean, \u0111\u1ec3 t\u1eadn d\u1ee5ng t\u1ed1i \u0111a kh\u1ea3 n\u0103ng c\u1ee7a n\u00f3, b\u1ea1n c\u1ea7n n\u1eafm \u0111\u01b0\u1ee3c nh\u1eefng nguy\u00ean t\u1eafc v\u00e0 l\u01b0u \u00fd quan tr\u1ecdng khi thi\u1ebft k\u1ebf giao di\u1ec7n responsive. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 danh s\u00e1ch nh\u1eefng \u0111i\u1ec1u b\u1ea1n n\u00ean l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c v\u1edbi Bootstrap:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>N\u1eafm r\u00f5 h\u1ec7 th\u1ed1ng Breakpoint c\u1ee7a Bootstrap: <\/b><span style=\"font-weight: 400;\">Vi\u1ec7c n\u1eafm v\u1eefng c\u00e1c breakpoints c\u1ee7a Bootstrap gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng ph\u00e2n ph\u1ed1i \u0111\u1ecbnh d\u1ea1ng ph\u00f9 h\u1ee3p cho t\u1eebng k\u00edch th\u01b0\u1edbc. Tr\u00e1nh vi\u1ec7c ch\u1ed3ng ch\u00e9o CSS.<\/span><\/li>\n\n\n\n<li><b>T\u1eadn d\u1ee5ng s\u1ee9c m\u1ea1nh c\u1ee7a Grid system: <\/b><span style=\"font-weight: 400;\">H\u1ec7 th\u1ed1ng<\/span><b> .container<\/b><span style=\"font-weight: 400;\">, <\/span><b>.row<\/b><span style=\"font-weight: 400;\">, <\/span><b>.col<\/b><span style=\"font-weight: 400;\"> gi\u00fap b\u1ea1n chia layout linh ho\u1ea1t, v\u00e0 t\u1ef1 \u0111\u1ed9ng co gi\u00e3n theo k\u00edch th\u01b0\u1edbc thi\u1ebft b\u1ecb. Vi\u1ec7c t\u1ef1 t\u1ea1o layout b\u1eb1ng <\/span><b>float<\/b><span style=\"font-weight: 400;\">, <\/span><b>position: absolute<\/b><span style=\"font-weight: 400;\">, hay <\/span><b>width: %<\/b><span style=\"font-weight: 400;\"> d\u1ec5 khi\u1ebfn giao di\u1ec7n b\u1ecb v\u1ee1 \u1edf c\u00e1c \u0111\u1ed9 r\u1ed9ng kh\u00e1c nhau.<\/span><\/li>\n\n\n\n<li><b>Kh\u00f4ng l\u1ea1m d\u1ee5ng !important:<\/b><span style=\"font-weight: 400;\"> S\u1eed d\u1ee5ng<\/span><b> !important <\/b><span style=\"font-weight: 400;\">\u0111\u1ec3 ghi \u0111\u00e8 class Bootstrap c\u00f3 th\u1ec3 g\u00e2y l\u1ed7i kh\u00f4ng mong mu\u1ed1n v\u1ec1 responsive (V\u00ec thu\u1ed9c t\u00ednh CSS s\u1eed d\u1ee5ng <\/span><b>!important <\/b><span style=\"font-weight: 400;\">s\u1ebd kh\u00f4ng b\u1ecb ghi \u0111\u00e8 b\u1edfi \u0111\u1ecbnh d\u1ea1ng kh\u00e1c. Thay v\u00e0o \u0111\u00f3, h\u00e3y s\u1eed d\u1ee5ng \u0111\u00fang breakpoint v\u00e0 class ti\u1ec7n \u00edch m\u00e0 Bootstrap cung c\u1ea5p.<\/span><\/li>\n\n\n\n<li><b>Kh\u00f4ng b\u1ecf qua overflow v\u00e0 c\u1eaft n\u1ed9i dung:<\/b><span style=\"font-weight: 400;\"> Khi d\u00f9ng<\/span><b> .table-responsive<\/b><span style=\"font-weight: 400;\"> ho\u1eb7c layout c\u00f3 nhi\u1ec1u c\u1ed9t, h\u00e3y ki\u1ec3m tra tr\u00e0n n\u1ed9i dung v\u00e0 \u0111\u1ea3m b\u1ea3o overflow kh\u00f4ng b\u1ecb ch\u1eb7n.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-bootstrap-responsive\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Bootstrap_responsive\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap responsive<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bootstrap-co-h\u1ed7-tr\u1ee3-mobile-first-khong\"><b>Bootstrap c\u00f3 h\u1ed7 tr\u1ee3 mobile-first kh\u00f4ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap 5 \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo tri\u1ebft l\u00fd \u201cmobile-first\u201d, ngh\u0129a l\u00e0 giao di\u1ec7n s\u1ebd \u01b0u ti\u00ean hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf tr\u01b0\u1edbc, sau \u0111\u00f3 m\u1edbi m\u1edf r\u1ed9ng cho c\u00e1c m\u00e0n h\u00ecnh l\u1edbn h\u01a1n b\u1eb1ng c\u00e1c breakpoint (sm, md, lg&#8230;). V\u00ec v\u1eady, n\u1ebfu b\u1ea1n kh\u00f4ng ch\u1ec9 \u0111\u1ecbnh breakpoint, class s\u1ebd m\u1eb7c \u0111\u1ecbnh \u00e1p d\u1ee5ng cho thi\u1ebft b\u1ecb nh\u1ecf (\u0111i\u1ec7n tho\u1ea1i).<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-breakpoint-nao-la-ph\u1ed5-bi\u1ebfn-nh\u1ea5t\"><b>Breakpoint n\u00e0o l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">md (\u2265768px) l\u00e0 breakpoint ph\u1ed5 bi\u1ebfn v\u00e0 \u0111\u01b0\u1ee3c d\u00f9ng nhi\u1ec1u nh\u1ea5t. V\u00ec \u0111\u00e2y l\u00e0 ng\u01b0\u1ee1ng chuy\u1ec3n ti\u1ebfp gi\u1eefa mobile v\u00e0 tablet, d\u00e3n \u0111\u1ebfn nhi\u1ec1u b\u1ed1 c\u1ee5c c\u1ea7n thay \u0111\u1ed5i t\u1eeb d\u1ea1ng d\u1ecdc (mobile) sang ngang (tablet tr\u1edf l\u00ean). M\u1ed9t s\u1ed1 class hay d\u00f9ng t\u1ea1i md: <\/span><b>d-none d-md-block, col-12 col-md-6, text-md-start<\/b><span style=\"font-weight: 400;\">, v.v.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-t\u1ef1-d\u1ecbnh-nghia-breakpoint-m\u1edbi-khong\"><b>C\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ecbnh ngh\u0129a breakpoint m\u1edbi kh\u00f4ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Bootstrap cho ph\u00e9p t\u00f9y ch\u1ec9nh breakpoint n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng b\u1ea3n SCSS (Sass source code). B\u1ea1n c\u00f3 th\u1ec3 s\u1eeda $grid-breakpoints trong file CSS \u0111\u1ec3 th\u00eam breakpoint m\u1edbi nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">$grid-breakpoints: (<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xs: 0,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; sm: 576px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; md: 768px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; lg: 992px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xl: 1200px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xxl: 1400px,<\/span>\n<span style=\"font-weight: 400;\">&nbsp; xxxl: 1600px \/\/ breakpoint m\u1edbi<\/span>\n<span style=\"font-weight: 400;\">);<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft c\u00e1c class responsive t\u00f9y ch\u1ec9nh cho k\u00edch th\u01b0\u1edbc m\u1edbi b\u1eb1ng c\u00e1ch d\u00f9ng:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">@include media-breakpoint-up(xxxl)<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-\u1ea9n-ph\u1ea7n-t\u1eed-tren-di\u1ec7n-tho\u1ea1i-nh\u01b0ng-hi\u1ec3n-th\u1ecb-\u1edf-desktop\"><b>L\u00e0m sao \u1ea9n ph\u1ea7n t\u1eed tr\u00ean \u0111i\u1ec7n tho\u1ea1i nh\u01b0ng hi\u1ec3n th\u1ecb \u1edf desktop?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p class <\/span><b>d-none<\/b><span style=\"font-weight: 400;\"> v\u00e0 <\/span><b>d-{breakpoint}-block<\/b><span style=\"font-weight: 400;\">. \u1ede tr\u01b0\u1eddng h\u1ee3p n\u00e0y, \u0111\u1ec3 hi\u1ec3n th\u1ecb ph\u1ea7n t\u1eed t\u1eeb m\u00e0n h\u00ecnh desktop b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng breakpoint <\/span><b>md:<\/b><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"d-none d-md-block\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&nbsp; Ph\u1ea7n t\u1eed n\u00e0y \u1ea9n tr\u00ean mobile, hi\u1ec7n t\u1eeb tablet tr\u1edf l\u00ean (\u2265768px)<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Responsive l\u00e0 y\u1ebfu t\u1ed1 c\u1ed1t l\u00f5i trong thi\u1ebft k\u1ebf web hi\u1ec7n \u0111\u1ea1i, gi\u00fap giao di\u1ec7n hi\u1ec3n th\u1ecb t\u1ed1i \u01b0u tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb \u0111i\u1ec7n tho\u1ea1i \u0111\u1ebfn m\u00e0n h\u00ecnh l\u1edbn. V\u1edbi h\u1ec7 th\u1ed1ng breakpoint r\u00f5 r\u00e0ng, c\u00e1c l\u1edbp ti\u1ec7n \u00edch m\u1ea1nh m\u1ebd v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh linh ho\u1ea1t, Bootstrap mang \u0111\u1ebfn cho l\u1eadp tr\u00ecnh vi\u00ean m\u1ed9t c\u00f4ng c\u1ee5 to\u00e0n di\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n responsive hi\u1ec7u qu\u1ea3. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc nh\u1eefng th\u00f4ng tin b\u1ed5 \u00edch v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng responsive trong Bootstrap, c\u00e1c l\u01b0u \u00fd v\u00e0 c\u00e1ch m\u1edf r\u1ed9ng h\u1ec7 th\u1ed1ng responsive theo nhu c\u1ea7u th\u1ef1c t\u1ebf.<\/span><\/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: <a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Bootstrap l\u00e0 g\u00ec? 7 t\u00ednh n\u0103ng c\u1ea7n bi\u1ebft trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n responsive \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb \u0111i\u1ec7n tho\u1ea1i, tablet cho \u0111\u1ebfn m\u00e1y t\u00ednh g\u1ea7n nh\u01b0 l\u00e0 \u0111i\u1ec1u b\u1eaft bu\u1ed9c. Bootstrap gi\u00fap vi\u1ec7c n\u00e0y tr\u1edf n\u00ean \u0111\u01a1n gi\u1ea3n h\u01a1n r\u1ea5t nhi\u1ec1u nh\u1edd tri\u1ebft l\u00fd thi\u1ebft k\u1ebf \u201cmobile-first\u201d v\u00e0 h\u1ec7 th\u1ed1ng l\u1edbp [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":87240,"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-87179","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>Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng responsive Bootstrap chi ti\u1ebft v\u1edbi c\u00e1c breakpoints, l\u1edbp ti\u1ec7n \u00edch k\u00e8m v\u00ed d\u1ee5 minh h\u1ecda t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao\" \/>\n<meta property=\"og:description\" content=\"Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n responsive \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb \u0111i\u1ec7n tho\u1ea1i, tablet cho \u0111\u1ebfn m\u00e1y t\u00ednh g\u1ea7n nh\u01b0 l\u00e0 \u0111i\u1ec1u b\u1eaft\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" \/>\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-05-24T14:05:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:23:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\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=\"20 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng responsive Bootstrap chi ti\u1ebft v\u1edbi c\u00e1c breakpoints, l\u1edbp ti\u1ec7n \u00edch k\u00e8m v\u00ed d\u1ee5 minh h\u1ecda t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/","og_locale":"vi_VN","og_type":"article","og_title":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","og_description":"Trong thi\u1ebft k\u1ebf web ng\u00e0y nay, y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n responsive \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb \u0111i\u1ec7n tho\u1ea1i, tablet cho \u0111\u1ebfn m\u00e1y t\u00ednh g\u1ea7n nh\u01b0 l\u00e0 \u0111i\u1ec1u b\u1eaft","og_url":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-05-24T14:05:40+00:00","article_modified_time":"2025-07-10T04:23:05+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-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":"20 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","datePublished":"2025-05-24T14:05:40+00:00","dateModified":"2025-07-10T04:23:05+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/"},"wordCount":4178,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/","url":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/","name":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn 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\/cach-tuy-chinh-bootstrap-responsive\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-vippro-scaled.png","datePublished":"2025-05-24T14:05:40+00:00","dateModified":"2025-07-10T04:23:05+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng responsive Bootstrap chi ti\u1ebft v\u1edbi c\u00e1c breakpoints, l\u1edbp ti\u1ec7n \u00edch k\u00e8m v\u00ed d\u1ee5 minh h\u1ecda t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/bootstrap-responsive-vippro-scaled.png","width":640,"height":337,"caption":"bootstrap responsive - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/#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":"Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn 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\/87179","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=87179"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/87179\/revisions"}],"predecessor-version":[{"id":89252,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/87179\/revisions\/89252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/87240"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=87179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=87179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=87179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}