{"id":89954,"date":"2025-07-31T23:52:12","date_gmt":"2025-07-31T16:52:12","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=89954"},"modified":"2025-08-01T00:12:33","modified_gmt":"2025-07-31T17:12:33","slug":"bootstrap-footer-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/","title":{"rendered":"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#Gioi_thieu_ve_Footer_trong_Bootstrap\" >Gi\u1edbi thi\u1ec7u v\u1ec1 Footer trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#Cac_thanh_phan_pho_bien_trong_Footer\" >C\u00e1c th\u00e0nh ph\u1ea7n ph\u1ed5 bi\u1ebfn trong Footer<\/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\/bootstrap-footer-la-gi\/#Huong_dan_xay_dung_cau_truc_co_ban_cua_Footer_bang_Bootstrap\" >H\u01b0\u1edbng d\u1eabn x\u00e2y d\u1ef1ng c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Footer b\u1eb1ng 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\/bootstrap-footer-la-gi\/#Vi_du_mot_so_mau_footer_pho_bien_voi_Bootstrap\" >V\u00ed d\u1ee5 m\u1ed9t s\u1ed1 m\u1eabu footer ph\u1ed5 bi\u1ebfn v\u1edbi Bootstrap&nbsp;<\/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\/bootstrap-footer-la-gi\/#Mot_so_luu_y_khi_su_dung_Footer_trong_Bootstrap\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Footer trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#Cau_hoi_thuong_gap_ve_Footer_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Footer 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\/bootstrap-footer-la-gi\/#Tong_Ket\" >T\u1ed5ng K\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong m\u1ed9t giao di\u1ec7n web, footer l\u00e0 n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng tin b\u1ed5 sung nh\u01b0 b\u1ea3n quy\u1ec1n, li\u00ean k\u1ebft ph\u1ee5, m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c form \u0111\u0103ng k\u00fd. V\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng x\u00e2y d\u1ef1ng footer \u0111\u1eb9p, responsive b\u1eb1ng h\u1ec7 th\u1ed1ng Grid, Flexbox v\u00e0 c\u00e1c class ti\u1ec7n \u00edch.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 t\u00ecm hi\u1ec3u v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vai tr\u00f2 c\u1ee7a footer v\u00e0 l\u00fd do n\u00ean t\u1ea1o footer v\u1edbi Bootstrap<\/li>\n\n\n\n<li>C\u00e1ch x\u00e2y d\u1ef1ng c\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n c\u1ee7a footer b\u1eb1ng Bootstrap<\/li>\n\n\n\n<li>Tham kh\u1ea3o c\u00e1c m\u1eabu footer ph\u1ed5 bi\u1ebfn k\u00e8m h\u01b0\u1edbng d\u1eabn \u00e1p d\u1ee5ng<\/li>\n\n\n\n<li>Nh\u1eefng l\u01b0u \u00fd khi x\u00e2y d\u1ef1ng footer b\u1eb1ng Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gi\u1edbi-thi\u1ec7u-v\u1ec1-footer-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_Footer_trong_Bootstrap\"><\/span><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Footer trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-la-gi-vai-tro-c\u1ee7a-no-trong-giao-di\u1ec7n-web\"><strong>Footer l\u00e0 g\u00ec? Vai tr\u00f2 c\u1ee7a n\u00f3 trong giao di\u1ec7n web<\/strong><\/h3>\n\n\n\n<p>Footer (ch\u00e2n trang) l\u00e0 ph\u1ea7n n\u1eb1m \u1edf cu\u1ed1i c\u00f9ng c\u1ee7a m\u1ed9t trang web. \u0110\u00e2y th\u01b0\u1eddng l\u00e0 n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng tin b\u1ed5 sung m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u1ea7n, v\u00ed d\u1ee5 nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u00f4ng tin b\u1ea3n quy\u1ec1n (\u00a9 Copyright)<\/li>\n\n\n\n<li>C\u00e1c li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng ph\u1ee5 (menu ph\u1ee5, sitemap)<\/li>\n\n\n\n<li>Bi\u1ec3u t\u01b0\u1ee3ng m\u1ea1ng x\u00e3 h\u1ed9i (Facebook, YouTube, LinkedIn&#8230;)<\/li>\n\n\n\n<li>Form \u0111\u0103ng k\u00fd nh\u1eadn b\u1ea3n tin<\/li>\n\n\n\n<li>\u0110\u1ecba ch\u1ec9 c\u00f4ng ty, th\u00f4ng tin li\u00ean h\u1ec7 ho\u1eb7c slogan th\u01b0\u01a1ng hi\u1ec7u<\/li>\n<\/ul>\n\n\n\n<p>M\u1eb7c d\u00f9 kh\u00f4ng n\u1eb1m \u1edf v\u1ecb tr\u00ed n\u1ed5i b\u1eadt nh\u01b0 header, nh\u01b0ng footer l\u1ea1i \u0111\u00f3ng m\u1ed9t vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX). N\u00f3 gi\u00fap t\u1ed5 ch\u1ee9c th\u00f4ng tin r\u00f5 r\u00e0ng, t\u0103ng s\u1ef1 chuy\u00ean nghi\u1ec7p cho website v\u00e0 h\u1ed7 tr\u1ee3 \u0111i\u1ec1u h\u01b0\u1edbng \u1edf ph\u1ea7n cu\u1ed1i trang, n\u01a1i m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng d\u1eebng l\u1ea1i sau khi xem xong n\u1ed9i dung ch\u00ednh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"239\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86.png\" alt=\"\" class=\"wp-image-89957\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86-300x89.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86-640x191.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86-200x60.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86-768x229.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-86-1536x458.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>H\u00ecnh \u1ea3nh v\u00ed d\u1ee5 v\u1ec1 footer trong website<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vi-sao-nen-dung-bootstrap-d\u1ec3-xay-d\u1ef1ng-footer\"><strong>V\u00ec sao n\u00ean d\u00f9ng Bootstrap \u0111\u1ec3 x\u00e2y d\u1ef1ng footer?<\/strong><\/h3>\n\n\n\n<p>Bootstrap kh\u00f4ng c\u00f3 component \u201cfooter\u201d ri\u00eang bi\u1ec7t nh\u01b0 navbar bootstrap d\u00e0nh cho header, nh\u01b0ng l\u1ea1i cung c\u1ea5p r\u1ea5t nhi\u1ec1u c\u00f4ng c\u1ee5 ti\u1ec7n l\u1ee3i \u0111\u1ec3 b\u1ea1n t\u1ef1 t\u1ea1o m\u1ed9t footer \u0111\u1eb9p v\u00e0 linh ho\u1ea1t nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grid system<\/a> gi\u00fap d\u1ec5 d\u00e0ng chia c\u1ed9t (v\u00ed d\u1ee5: 2 c\u1ed9t, 3 c\u1ed9t, 4 c\u1ed9t&#8230;) m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng<\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox<\/a> gi\u00fap c\u0103n ch\u1ec9nh n\u1ed9i dung trong footer (tr\u00e1i &#8211; ph\u1ea3i, gi\u1eefa, gi\u00e3n c\u00e1ch \u0111\u1ec1u&#8230;)<\/li>\n\n\n\n<li>C\u00e1c class ti\u1ec7n \u00edch nh\u01b0 <strong>.bg-dark, .text-light, .text-center<\/strong>,&#8230; gi\u00fap \u0111\u1ecbnh d\u1ea1ng nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam nhi\u1ec1u d\u00f2ng CSS<\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive<\/a> c\u00f3 s\u1eb5n gi\u00fap footer t\u1ef1 \u0111\u1ed9ng co gi\u00e3n \u0111\u1eb9p tr\u00ean mobile, tablet, desktop<\/li>\n\n\n\n<li>K\u1ebft h\u1ee3p t\u1ed1t v\u1edbi HTML kh\u00e1c gi\u00fap d\u1ec5 d\u00e0ng ch\u00e8n icon, form, h\u00ecnh \u1ea3nh&#8230;<\/li>\n<\/ul>\n\n\n\n<p>Nh\u1edd nh\u1eefng l\u1ee3i th\u1ebf \u0111\u00f3 m\u00e0 Bootstrap l\u00e0 l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u1ea1o c\u00e1c footer cho website m\u1ed9t c\u00e1ch nhanh ch\u00f3ng v\u00e0 chuy\u00ean nghi\u1ec7p.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thanh-ph\u1ea7n-ph\u1ed5-bi\u1ebfn-trong-footer\"><span class=\"ez-toc-section\" id=\"Cac_thanh_phan_pho_bien_trong_Footer\"><\/span><strong>C\u00e1c th\u00e0nh ph\u1ea7n ph\u1ed5 bi\u1ebfn trong Footer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Th\u00e0nh ph\u1ea7n trong m\u1ed9t footer s\u1ebd t\u00f9y theo m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng v\u00e0 lo\u1ea1i footer. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n ph\u1ed5 bi\u1ebfn th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u1eb7t trong ph\u1ea7n footer c\u1ee7a trang web:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thong-tin-b\u1ea3n-quy\u1ec1n-copyright\"><strong>Th\u00f4ng tin b\u1ea3n quy\u1ec1n (copyright)<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y g\u1ea7n nh\u01b0 l\u00e0 th\u00e0nh ph\u1ea7n xu\u1ea5t hi\u1ec7n nhi\u1ec1u nh\u1ea5t trong c\u00e1c footer. N\u00f3 th\u01b0\u1eddng hi\u1ec3n th\u1ecb n\u0103m hi\u1ec7n t\u1ea1i v\u00e0 t\u00ean c\u00e1 nh\u00e2n ho\u1eb7c c\u00f4ng ty s\u1edf h\u1eefu website.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch t\u1ea1o th\u00f4ng tin b\u1ea3n quy\u1ec1n b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;footer class=\"bg-light py-3 mt-5\"&gt;\n     &lt;div class=\"container text-center\"&gt;\n       &lt;p class=\"text-muted mb-0\"&gt;&amp;copy; 2025 ITViec. All rights reserved.&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&amp;copy; l\u00e0 <a href=\"https:\/\/itviec.com\/blog\/ki-tu-dac-biet-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML entity<\/a> d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb bi\u1ec3u t\u01b0\u1ee3ng b\u1ea3n quy\u1ec1n \u00a9<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"82\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-87.png\" alt=\"\" class=\"wp-image-89958\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-87.png 629w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-87-300x39.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-87-200x26.png 200w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<p>N\u1ebfu kh\u00f4ng mu\u1ed1n c\u1eadp nh\u1eadt n\u0103m th\u1ee7 c\u00f4ng m\u1ed7i n\u0103m, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng Javascript \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb n\u0103m hi\u1ec7n t\u1ea1i:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;p class=\"text-muted mb-0\"&gt;\n     &amp;copy; &lt;script&gt;document.write(new Date().getFullYear())&lt;\/script&gt; ITviec. All rights reserved.\n   &lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lien-k\u1ebft-di\u1ec1u-h\u01b0\u1edbng-ph\u1ee5-footer-nav\"><strong>Li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng ph\u1ee5 (footer nav)<\/strong><\/h3>\n\n\n\n<p>Danh s\u00e1ch menu \u0111i\u1ec1u h\u01b0\u1edbng th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf footer \u0111\u1ec3 gi\u00fap ng\u01b0\u1eddi d\u00f9ng t\u00ecm \u0111\u01b0\u1ee3c c\u00e1c trang quan tr\u1ecdng m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng, m\u00e0 kh\u00f4ng c\u1ea7n cu\u1ed9n l\u00ean ph\u1ea7n header \u1edf \u0111\u1ea7u trang.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 th\u00eam ph\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0o footer Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-light py-4 mt-5 border-top\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row justify-content-center\"&gt;\n           &lt;div class=\"col-md-auto\"&gt;\n             &lt;ul class=\"nav justify-content-center flex-column flex-md-row gap-2 gap-md-4 mb-3\"&gt;\n               &lt;li class=\"nav-item\"&gt;\n                 &lt;a href=\"#\" class=\"nav-link px-0 text-muted\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;\n               &lt;\/li&gt;\n               &lt;li class=\"nav-item\"&gt;\n                 &lt;a href=\"#\" class=\"nav-link px-0 text-muted\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n               &lt;\/li&gt;\n               &lt;li class=\"nav-item\"&gt;\n                 &lt;a href=\"#\" class=\"nav-link px-0 text-muted\"&gt;Ch\u00ednh s\u00e1ch&lt;\/a&gt;\n               &lt;\/li&gt;\n               &lt;li class=\"nav-item\"&gt;\n                 &lt;a href=\"#\" class=\"nav-link px-0 text-muted\"&gt;FAQ&lt;\/a&gt;\n               &lt;\/li&gt;\n             &lt;\/ul&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n         &lt;p class=\"text-center text-muted mb-0\"&gt;&amp;copy; 2025. ITViec Blog&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3: Ph\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng s\u1eed d\u1ee5ng <strong>ul, li<\/strong><\/p>\n\n\n\n<p>H\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"102\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88.png\" alt=\"\" class=\"wp-image-89959\" style=\"width:720px;height:auto\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88-300x38.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88-640x81.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88-200x25.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-88-768x98.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-m\u1ea1ng-xa-h\u1ed9i-social-icons\"><strong>M\u1ea1ng x\u00e3 h\u1ed9i (social icons)<\/strong><\/h3>\n\n\n\n<p>Nhi\u1ec1u website th\u01b0\u1eddng th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng m\u1ea1ng x\u00e3 h\u1ed9i \u1edf ph\u1ea7n footer \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng truy c\u1eadp fanpage, k\u00eanh YouTube, Instagram ho\u1eb7c LinkedIn. C\u00e1c icon n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1eb7t chung h\u00e0ng ho\u1eb7c ri\u00eang th\u00e0nh m\u1ed9t nh\u00f3m \u1edf gi\u1eefa ho\u1eb7c b\u00ean ph\u1ea3i\/footer. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng th\u01b0 vi\u1ec7n <a href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap Icons<\/a> ho\u1eb7c Font Awesome \u0111\u1ec3 hi\u1ec3n th\u1ecb icon.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 t\u1ea1o footer c\u00f3 icon m\u1ea1ng x\u00e3 h\u1ed9i b\u1eb1ng Bootstrap 5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white py-4 mt-5\"&gt;\n       &lt;div class=\"container text-center\"&gt;\n         &lt;p class=\"mb-2\"&gt;Theo d\u00f5i ch\u00fang t\u00f4i:&lt;\/p&gt;\n         &lt;div class=\"d-flex justify-content-center gap-3 mb-3\"&gt;\n           &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-facebook fs-4\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-twitter fs-4\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-instagram fs-4\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>bi bi-facebook, bi bi-twitter, bi bi-instagram<\/strong> l\u00e0 class c\u1ee7a Bootstrap Icons<\/li>\n\n\n\n<li><strong>fs-4<\/strong> l\u00e0 class Bootstrap \u0111\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc font\/icon<\/li>\n\n\n\n<li><strong>gap-3<\/strong> gi\u00fap t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c icon<\/li>\n\n\n\n<li><strong>text-white<\/strong> \u0111\u1ea3m b\u1ea3o icon hi\u1ec3n th\u1ecb r\u00f5 tr\u00ean n\u1ec1n t\u1ed1i<\/li>\n<\/ul>\n\n\n\n<p>N\u1ebfu b\u1ea1n d\u00f9ng Font Awesome th\u00ec ch\u1ec9 c\u1ea7n \u0111\u1ed5i class icon t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n h\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"126\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89.png\" alt=\"\" class=\"wp-image-89961\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89-300x47.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89-640x101.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89-200x32.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-89-768x121.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-logo-th\u01b0\u01a1ng-hi\u1ec7u-ho\u1eb7c-slogan\"><strong>Logo th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c slogan<\/strong><\/h3>\n\n\n\n<p>Logo ho\u1eb7c slogan c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n n\u00ean \u0111\u01b0\u1ee3c th\u00eam v\u00e0o footer \u0111\u1ec3 nh\u1ea5n m\u1ea1nh th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c t\u1ea1o c\u1ea3m gi\u00e1c nh\u1eadn di\u1ec7n xuy\u00ean su\u1ed1t cho website. B\u1ea1n c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb logo (\u1ea3nh) v\u00e0 slogan (d\u00f2ng ch\u1eef ng\u1eafn) trong m\u1ed9t kh\u1ed1i \u1edf gi\u1eefa footer.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch \u0111\u1eb7t logo v\u00e0 slogan \u1edf footer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white py-4\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row align-items-center\"&gt;\n           &lt;div class=\"col-md-6 text-center mb-3 mb-md-0\"&gt;\n             &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\" alt=\"Logo ITviec\" height=\"40\"&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"col-md-6 text-center\"&gt;\n             &lt;p class=\"mb-0\"&gt;N\u01a1i Ph\u00e1t Tri\u1ec3n S\u1ef1 Nghi\u1ec7p IT C\u1ee7a B\u1ea1n&lt;\/p&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n         &lt;p class=\"text-center mt-3 mb-0\"&gt;&amp;copy; 2025 ITViec Blog&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bg-dark t\u1ea1o n\u1ec1n t\u1ed1i<\/li>\n\n\n\n<li>N\u00ean d\u00f9ng logo c\u00f3 m\u00e0u s\u00e1ng ho\u1eb7c n\u1ec1n trong su\u1ed1t \u0111\u1ec3 kh\u00f4ng b\u1ecb ch\u00ecm tr\u00ean n\u1ec1n t\u1ed1i<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"128\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-90.png\" alt=\"\" class=\"wp-image-89962\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-90.png 594w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-90-300x65.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-90-200x43.png 200w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-dang-ky-email-email-signup-newsletter\"><strong>Form \u0111\u0103ng k\u00fd email (email signup \/ newsletter)<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t s\u1ed1 website, \u0111\u1eb7c bi\u1ec7t l\u00e0 blog, trang s\u1ea3n ph\u1ea9m ho\u1eb7c d\u1ecbch v\u1ee5 th\u01b0\u1eddng \u0111\u1eb7t form \u0111\u0103ng k\u00fd email \u1edf footer. M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng \u0111\u0103ng k\u00fd nh\u1eadn tin m\u1edbi, t\u00e0i li\u1ec7u, \u01b0u \u0111\u00e3i ho\u1eb7c b\u1ea3n tin h\u00e0ng tu\u1ea7n.<\/p>\n\n\n\n<p>V\u00ec footer th\u01b0\u1eddng c\u00f3 kh\u00f4ng gian h\u1ea1n ch\u1ebf, form n\u00ean \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u01a1n gi\u1ea3n, g\u1ecdn g\u00e0ng v\u00e0 d\u1ec5 thao t\u00e1c tr\u00ean c\u1ea3 desktop l\u1eabn mobile.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 t\u1ea1o footer c\u00f3 form \u0111\u0103ng k\u00fd b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"text-white pt-5 pb-4\" style=\"background: linear-gradient(to right, #111111, #3a0d0d);\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row justify-content-center text-center\"&gt;\n           &lt;div class=\"col-lg-6 mb-4\"&gt;\n             &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\" alt=\"ITviec logo\" class=\"mb-3\" height=\"60\"&gt;\n             &lt;form&gt;\n               &lt;input type=\"email\" class=\"form-control mb-2\" placeholder=\"Nh\u1eadp email c\u1ee7a b\u1ea1n\"&gt;\n               &lt;button type=\"submit\" class=\"btn btn-danger w-100\"&gt;\u0110\u0103ng k\u00ed nh\u1eadn tin&lt;\/button&gt;\n             &lt;\/form&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n form g\u1ed3m \u00f4 nh\u1eadp email v\u00e0 n\u00fat g\u1eedi<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"207\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91.png\" alt=\"\" class=\"wp-image-89963\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91-300x78.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91-640x166.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91-200x52.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-91-768x199.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong>V\u00ed d\u1ee5 m\u1ed9t footer t\u1ed5ng h\u1ee3p c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ed5 bi\u1ebfn \u0111\u01b0\u1ee3c n\u00eau tr\u00ean:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"text-white pt-5 pb-4\" style=\"background: linear-gradient(to right, #111111, #3a0d0d);\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row\"&gt;\n    \n           &lt;!-- Ph\u1ea7n logo &amp; form \u0111\u0103ng k\u00fd --&gt;\n           &lt;div class=\"col-md-4 mb-4\"&gt;\n             &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\" alt=\"ITviec logo\" class=\"mb-3\" height=\"40\"&gt;\n    \n             &lt;form class=\"mb-3\"&gt;\n               &lt;input type=\"email\" class=\"form-control mb-2\" placeholder=\"Nh\u1eadp email c\u1ee7a b\u1ea1n\"&gt;\n               &lt;button type=\"submit\" class=\"btn btn-danger w-100\"&gt;\u0110\u0103ng k\u00ed nh\u1eadn tin&lt;\/button&gt;\n             &lt;\/form&gt;\n           &lt;\/div&gt;\n\n\n           &lt;div class=\"col-md-6\"&gt;\n             &lt;div class=\"row\"&gt;\n               &lt;!-- Ph\u1ea7n li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng --&gt;\n               &lt;div class=\"col-6 col-lg-3 mb-3\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Vi\u1ec7c l\u00e0m IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo k\u1ef9 n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo khu v\u1ef1c&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n\n\n               &lt;div class=\"col-6 col-lg-3 mb-3\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Chuy\u1ec7n IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Chia s\u1ebb chuy\u1ec7n IT&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n    \n               &lt;!-- Ph\u1ea7n th\u00f4ng tin li\u00ean h\u1ec7 --&gt;\n               &lt;div class=\"col-6 col-lg-4 mb-4\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;V\u1ec1 ITviec&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;\n                     &lt;a href=\"mailto:blog@itviec.com\" class=\"text-white-50 text-decoration-none\"&gt;\n                       Li\u00ean h\u1ec7: blog@itviec.com\n                     &lt;\/a&gt;\n                   &lt;\/li&gt;\n                 &lt;\/ul&gt;\n    \n                 &lt;!-- Ph\u1ea7n Icon m\u1ea1ng x\u00e3 h\u1ed9i --&gt;\n                 &lt;div class=\"d-flex gap-3 mt-2\"&gt;\n                   &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n                   &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-youtube fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n                   &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-linkedin fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n                 &lt;\/div&gt;\n               &lt;\/div&gt;\n             &lt;\/div&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n logo v\u00e0 form \u0111\u0103ng k\u00fd (\u1edf b\u00ean tr\u00e1i)<\/li>\n\n\n\n<li>Ph\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn c\u00e1c trang c\u00e1c (\u1edf gi\u1eefa)<\/li>\n\n\n\n<li>Ph\u1ea7n th\u00f4ng tin li\u00ean h\u1ec7 v\u00e0 m\u1ea1ng x\u00e3 h\u1ed9i (\u1edf b\u00ean ph\u1ea3i)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"141\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92.png\" alt=\"\" class=\"wp-image-89964\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92-300x53.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92-640x113.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92-200x35.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-92-768x135.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-xay-d\u1ef1ng-c\u1ea5u-truc-c\u01a1-b\u1ea3n-c\u1ee7a-footer-b\u1eb1ng-bootstrap\"><span class=\"ez-toc-section\" id=\"Huong_dan_xay_dung_cau_truc_co_ban_cua_Footer_bang_Bootstrap\"><\/span><strong>H\u01b0\u1edbng d\u1eabn x\u00e2y d\u1ef1ng c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Footer b\u1eb1ng Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sau khi \u0111\u00e3 bi\u1ebft footer bao g\u1ed3m nh\u1eefng th\u00e0nh ph\u1ea7n g\u00ec, b\u01b0\u1edbc ti\u1ebfp theo ch\u00fang ta s\u1ebd x\u00e2y d\u1ef1ng c\u1ea5u tr\u00fac layout cho footer b\u1eb1ng c\u00e1c c\u00f4ng c\u1ee5 c\u00f3 s\u1eb5n trong Bootstrap. \u1ede ph\u1ea7n n\u00e0y, b\u1ea1n s\u1ebd hi\u1ec3u c\u00e1ch d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u1ebb &lt;footer&gt; (chu\u1ea9n HTML5)<\/li>\n\n\n\n<li>Grid system \u0111\u1ec3 chia c\u1ed9t<\/li>\n\n\n\n<li>Flexbox \u0111\u1ec3 c\u0103n ch\u1ec9nh n\u1ed9i dung<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-html5-tag\"><strong>Footer HTML5 tag<\/strong><\/h3>\n\n\n\n<p>Trong HTML5, th\u1ebb <strong>&lt;footer&gt;<\/strong> \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u ph\u1ea7n ch\u00e2n trang c\u1ee7a m\u1ed9t trang web ho\u1eb7c m\u1ed9t section. Vi\u1ec7c s\u1eed d\u1ee5ng \u0111\u00fang th\u1ebb nh\u01b0 <strong>&lt;footer&gt;<\/strong> kh\u00f4ng ch\u1ec9 gi\u00fap m\u00e3 HTML r\u00f5 r\u00e0ng h\u01a1n m\u00e0 c\u00f2n c\u00f3 l\u1ee3i cho SEO v\u00e0 kh\u1ea3 n\u0103ng truy c\u1eadp (accessibility).<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00fa ph\u00e1p c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer&gt;\n       &lt;!-- N\u1ed9i dung footer n\u1eb1m \u1edf \u0111\u00e2y --&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Khi d\u00f9ng v\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam c\u00e1c class nh\u01b0 <strong>.bg-dark, .text-white, .pt-5, .pb-4&#8230; <\/strong>\u0111\u1ec3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc v\u00e0 kho\u1ea3ng c\u00e1ch.<\/p>\n\n\n\n<p><strong>V\u00ed d\u1ee5 footer n\u1ec1n t\u1ed1i (Dark footer) trong Bootstrap<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white pt-4 pb-4\"&gt;\n       &lt;div class=\"container text-center\"&gt;\n         &lt;p class=\"mb-1\"&gt;\u0110\u00e2y l\u00e0 footer n\u1ec1n t\u1ed1i&lt;\/p&gt;\n         &lt;p class=\"mb-0\"&gt;&amp;copy; 2025 ITViec Blog&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.bg-dark<\/strong>: t\u1ea1o n\u1ec1n \u0111en<\/li>\n\n\n\n<li><strong>.text-white<\/strong>: \u0111\u1ecbnh d\u1ea1ng ch\u1eef tr\u1eafng<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"96\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-93.png\" alt=\"\" class=\"wp-image-89966\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-93.png 494w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-93-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-93-200x39.png 200w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<p><strong>V\u00ed d\u1ee5 footer n\u1ec1n s\u00e1ng (Light footer) trong Bootstrap<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-light text-dark pt-4 pb-4\"&gt;\n       &lt;div class=\"container text-center\"&gt;\n         &lt;p class=\"mb-1\"&gt;\u0110\u00e2y l\u00e0 footer n\u1ec1n t\u1ed1i&lt;\/p&gt;\n         &lt;p class=\"mb-0\"&gt;&amp;copy; 2025 ITViec Blog&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.bg-light:<\/strong> t\u1ea1o n\u1ec1n s\u00e1ng<\/li>\n\n\n\n<li><strong>.text-dark<\/strong>: \u0111\u1ecbnh d\u1ea1ng ch\u1eef tr\u1eafng<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"97\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-94.png\" alt=\"\" class=\"wp-image-89967\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-94.png 491w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-94-300x59.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-94-200x40.png 200w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-grid-d\u1ec3-chia-c\u1ed9t-cho-footer\"><strong>S\u1eed d\u1ee5ng Grid \u0111\u1ec3 chia c\u1ed9t cho Footer<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p h\u1ec7 th\u1ed1ng l\u01b0\u1edbi 12 c\u1ed9t, r\u1ea5t linh ho\u1ea1t \u0111\u1ec3 chia layout trong footer (\u0111\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grid System<\/a>). V\u00ed d\u1ee5 b\u1ea1n mu\u1ed1n chia footer th\u00e0nh 2 ph\u1ea7n (ch\u1eb3ng h\u1ea1n nh\u01b0 th\u00f4ng tin \u0111i\u1ec1u h\u01b0\u1edbng), b\u1ea1n c\u00f3 th\u1ec3 chia \u0111\u1ec1u m\u1ed7i ph\u1ea7n chi\u1ebfm 6 c\u1ed9t:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"text-white pt-5 pb-4\" style=\"background: linear-gradient(to right, #111111, #3a0d0d);\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row\"&gt;\n           &lt;div class=\"col-6\"&gt;\n             &lt;div class=\"row\"&gt;\n               &lt;!-- C\u1ed9t menu 1 --&gt;\n               &lt;div class=\"col-6\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Vi\u1ec7c l\u00e0m IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo k\u1ef9 n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo khu v\u1ef1c&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n               &lt;!-- C\u1ed9t menu 2 --&gt;\n               &lt;div class=\"col-6\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Chuy\u1ec7n IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Chia s\u1ebb chuy\u1ec7n IT&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n             &lt;\/div&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>row l\u00e0 h\u00e0ng ch\u1ee9a c\u00e1c c\u1ed9t. Khi b\u1ea1n \u0111\u1eb7t c\u00e1c col-* v\u00e0o b\u00ean trong row, Bootstrap s\u1ebd t\u1ef1 chia layout theo h\u1ec7 th\u1ed1ng l\u01b0\u1edbi 12 c\u1ed9t.<\/li>\n\n\n\n<li>col-6 c\u00f3 ngh\u0129a l\u00e0 chi\u1ebfm 6 tr\u00ean t\u1ed5ng 12 c\u1ed9t, t\u1ee9c l\u00e0 n\u1eeda chi\u1ec1u ngang c\u1ee7a m\u1ed9t h\u00e0ng.<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"142\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95.png\" alt=\"\" class=\"wp-image-89968\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95-300x53.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95-640x114.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95-200x36.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-95-768x137.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>H\u1ec7 th\u1ed1ng Grid c\u1ee7a Bootstrap kh\u00f4ng ch\u1ec9 gi\u00fap b\u1ea1n chia layout d\u1ec5 d\u00e0ng, m\u00e0 c\u00f2n t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh d\u1ef1a v\u00e0o c\u01a1 ch\u1ebf responsive c\u00f3 s\u1eb5n trong Bootstrap. \u0110i\u1ec1u n\u00e0y r\u1ea5t quan tr\u1ecdng v\u1edbi footer, b\u1edfi v\u00ec n\u00f3 gi\u00fap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean desktop: c\u00f3 th\u1ec3 chia nhi\u1ec1u c\u1ed9t n\u1eb1m ngang<\/li>\n\n\n\n<li>Tr\u00ean mobile: n\u00ean chuy\u1ec3n sang d\u1ea1ng c\u1ed9t d\u1ecdc (stacked), d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 b\u1ea5m<\/li>\n<\/ul>\n\n\n\n<p>Nh\u01b0 v\u00ed d\u1ee5 ph\u00eda tr\u00ean, thay v\u00ec ch\u1ec9 d\u00f9ng <strong>.col-6 <\/strong>\u0111\u1ec3 chia footer th\u00e0nh 2 c\u1ed9t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam class responsive nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=\"col-12 col-md-6\"&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.col-12<\/strong>: Tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf (mobile), c\u1ed9t chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u ngang, gi\u00fap n\u1ed9i dung n\u1eb1m theo h\u00e0ng d\u1ecdc<\/li>\n\n\n\n<li><strong>.col-md-6<\/strong>: T\u1eeb k\u00edch th\u01b0\u1edbc <strong>md<\/strong> (\u2265768px) tr\u1edf l\u00ean, c\u1ed9t chi\u1ebfm 50% chi\u1ec1u ngang gi\u00fap hi\u1ec3n th\u1ecb 2 c\u1ed9t ngang<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 khi \u1edf m\u00e0n h\u00ecnh mobile khi \u0111\u00e3 \u00e1p d\u1ee5ng repsonsive cho v\u00ed d\u1ee5 ph\u00eda tr\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"text-white pt-5 pb-4\" style=\"background: linear-gradient(to right, #111111, #3a0d0d);\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row\"&gt;\n           &lt;div class=\"col-12 col-md-6 mb-4 mb-md-0\"&gt;\n             &lt;div class=\"row\"&gt;\n               &lt;!-- C\u1ed9t menu 1 --&gt;\n               &lt;div class=\"col-12 col-sm-6 mb-4 mb-sm-0\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Vi\u1ec7c l\u00e0m IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo k\u1ef9 n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo khu v\u1ef1c&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n    \n               &lt;!-- C\u1ed9t menu 2 --&gt;\n               &lt;div class=\"col-12 col-sm-6\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Chuy\u1ec7n IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Chia s\u1ebb chuy\u1ec7n IT&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n             &lt;\/div&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"505\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-96.png\" alt=\"\" class=\"wp-image-89969\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-96.png 515w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-96-300x294.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-96-200x196.png 200w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-flexbox-d\u1ec3-can-ch\u1ec9nh-n\u1ed9i-dung-footer\"><strong>S\u1eed d\u1ee5ng Flexbox \u0111\u1ec3 c\u0103n ch\u1ec9nh n\u1ed9i dung Footer<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i Grid, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox<\/a>, m\u1ed9t c\u00f4ng c\u1ee5 c\u1ef1c k\u1ef3 h\u1eefu \u00edch \u0111\u1ec3 c\u0103n ch\u1ec9nh v\u1ecb tr\u00ed v\u00e0 kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed b\u00ean trong footer (theo chi\u1ec1u ngang ho\u1eb7c chi\u1ec1u d\u1ecdc).<\/p>\n\n\n\n<p>Flexbox th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u0103n logo b\u00ean tr\u00e1i v\u00e0 slogan b\u00ean ph\u1ea3i<\/li>\n\n\n\n<li>C\u0103n gi\u1eefa form ho\u1eb7c n\u1ed9i dung<\/li>\n\n\n\n<li>Gi\u00e3n \u0111\u1ec1u c\u00e1c c\u1ed9t, icon ho\u1eb7c d\u00f2ng ch\u1eef<\/li>\n\n\n\n<li>C\u0103n ch\u1ec9nh l\u1ea1i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb tr\u00ean mobile (n\u1ebfu c\u1ea7n)<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u00f9ng Flexbox trong footer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white py-4\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"d-flex flex-column justify-content-between align-items-center text-center gap-3\"&gt;\n           &lt;div class=\"footer-logo\"&gt;\n             &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\" alt=\"Logo ITviec\" height=\"50\"&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"footer-slogan\"&gt;\n             &lt;p class=\"mb-0\"&gt;N\u01a1i Ph\u00e1t Tri\u1ec3n S\u1ef1 Nghi\u1ec7p IT C\u1ee7a B\u1ea1n&lt;\/p&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;p class=\"text-center text-white-50 mt-4\"&gt;&amp;copy; 2025 ITViec Blog&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>d-flex<\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t Flexbox<\/li>\n\n\n\n<li><strong>.flex-column<\/strong> gi\u00fap hi\u1ec3n th\u1ecb ngang<\/li>\n\n\n\n<li><strong>.justify-content-between<\/strong> s\u1ebd \u0111\u1ea9y logo sang tr\u00e1i, slogan sang ph\u1ea3i<\/li>\n\n\n\n<li><strong>.align-items-center<\/strong> gi\u00fap c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc (khi n\u1eb1m tr\u00ean c\u00f9ng m\u1ed9t h\u00e0ng)<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"191\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-97.png\" alt=\"\" class=\"wp-image-89971\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-97.png 580w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-97-300x99.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-97-200x66.png 200w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p>Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, khi thi\u1ebft k\u1ebf footer b\u1ea1n th\u01b0\u1eddng mu\u1ed1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3n th\u1ecb c\u00e1c th\u00e0nh ph\u1ea7n x\u1ebfp d\u1ecdc tr\u00ean mobile (\u0111\u1ee1 ch\u1eadt)<\/li>\n\n\n\n<li>V\u00e0 x\u1ebfp ngang khi l\u00ean desktop (d\u1ec5 \u0111\u1ecdc, d\u1ec5 nh\u00ecn)<\/li>\n<\/ul>\n\n\n\n<p>Bootstrap gi\u00fap b\u1ea1n l\u00e0m \u0111i\u1ec1u n\u00e0y r\u1ea5t d\u1ec5 b\u1eb1ng c\u00e1c class responsive Flexbox nh\u01b0: <strong>flex-column, .flex-md-row, text-center text-md-start, gap-3 <\/strong>v\u00e0 d\u1ef1a v\u00e0o c\u00e1c breakpoint c\u00f3 s\u1eb5n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white py-4\"&gt;\n       &lt;div class=\"d-flex flex-column flex-md-row justify-content-between align-items-center text-center text-md-start gap-3\"&gt;\n         &lt;div&gt;\n           &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\"  height=\"50\"&gt;\n         &lt;\/div&gt;\n         &lt;div&gt;\n           &lt;p class=\"me-2\"&gt;N\u01a1i ph\u00e1t tri\u1ec3n s\u1ef1 nghi\u1ec7p c\u1ee7a b\u1ea1n &lt;\/p&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.flex-column .flex-md-row:<\/strong> th\u00e0nh ph\u1ea7n flex chia ph\u1ea7n t\u1eed theo c\u1ed9t khi \u1edf m\u00e0n h\u00ecnh nh\u1ecf (mobile) v\u00e0 s\u1eafp x\u1ebfp theo c\u1ed9t \u1edf m\u00e0n h\u00ecnh l\u1edbn h\u01a1n<\/li>\n\n\n\n<li><strong>.text-center .text-md-start:<\/strong> v\u0103n b\u1ea3n s\u1ebd canh gi\u1eefa \u1edf m\u00e0n h\u00ecnh nh\u1ecf v\u00e0 c\u0103n tr\u00e1i theo m\u00e0n h\u00ecnh moblie<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 khi \u1edf m\u00e0n h\u00ecnh mobile:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"537\" height=\"323\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-98.png\" alt=\"\" class=\"wp-image-89972\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-98.png 537w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-98-300x180.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-98-200x120.png 200w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vi-d\u1ee5-m\u1ed9t-s\u1ed1-m\u1eabu-footer-ph\u1ed5-bi\u1ebfn-v\u1edbi-bootstrap-nbsp\"><span class=\"ez-toc-section\" id=\"Vi_du_mot_so_mau_footer_pho_bien_voi_Bootstrap\"><\/span><strong>V\u00ed d\u1ee5 m\u1ed9t s\u1ed1 m\u1eabu footer ph\u1ed5 bi\u1ebfn v\u1edbi Bootstrap&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>T\u00f9y v\u00e0o m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng v\u00e0 thi\u1ebft k\u1ebf c\u1ee7a website, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn c\u00e1c ki\u1ec3u footer kh\u00e1c nhau. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c m\u1eabu ph\u1ed5 bi\u1ebfn m\u00e0 b\u1ea1n d\u1ec5 d\u00e0ng d\u1ef1ng b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-d\u01a1n-gi\u1ea3n-ch\u1ec9-1-dong-ch\u1eef\"><strong>Footer \u0111\u01a1n gi\u1ea3n (ch\u1ec9 1 d\u00f2ng ch\u1eef)<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 lo\u1ea1i footer t\u1ed1i gi\u1ea3n, ch\u1ec9 g\u1ed3m m\u1ed9t d\u00f2ng v\u0103n b\u1ea3n n\u1eb1m gi\u1eefa, th\u01b0\u1eddng d\u00f9ng th\u1ebb &lt;p&gt; b\u00ean trong &lt;footer&gt; c\u00f3 text-center. Lo\u1ea1i n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c trang blog c\u00e1 nh\u00e2n, landing page, trang portfolio nh\u1ecf.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-light text-center py-3 border-top\"&gt;\n       &lt;p class=\"mb-0 text-muted\"&gt;&amp;copy; 2025 ITViec Blog. All rights reserved.&lt;\/p&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"146\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-99.png\" alt=\"\" class=\"wp-image-89973\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-99.png 637w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-99-300x69.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-99-200x46.png 200w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/figure>\n\n\n\n<p>\u01afu \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>G\u1ecdn nh\u1eb9, d\u1ec5 tri\u1ec3n khai<\/li>\n\n\n\n<li>Ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c website nh\u1ecf, landing page<\/li>\n\n\n\n<li>Gi\u00fap trang web t\u1ea3i nhanh, kh\u00f4ng t\u1ed1n t\u00e0i nguy\u00ean<\/li>\n<\/ul>\n\n\n\n<p>Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Thi\u1ebfu th\u00f4ng tin b\u1ed5 sung (li\u00ean h\u1ec7, m\u1ea1ng x\u00e3 h\u1ed9i\u2026)<\/li>\n\n\n\n<li>Kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi website c\u00f3 c\u1ea5u tr\u00fac n\u1ed9i dung l\u1edbn<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-chia-2-3-c\u1ed9t-thong-tin-contact-link-social\"><strong>Footer chia 2-3 c\u1ed9t th\u00f4ng tin (contact, link, social)<\/strong><\/h3>\n\n\n\n<p>Lo\u1ea1i footer n\u00e0y d\u00f9ng h\u1ec7 th\u1ed1ng Grid chia layout th\u00e0nh 2 ho\u1eb7c 3 c\u1ed9t v\u1edbi c\u00e1c kh\u1ed1i n\u1ed9i dung ri\u00eang bi\u1ec7t nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u1ed9t 1: menu \u0111i\u1ec1u h\u01b0\u1edbng<\/li>\n\n\n\n<li>C\u1ed9t 2: th\u00f4ng tin li\u00ean h\u1ec7<\/li>\n\n\n\n<li>C\u1ed9t 3: icon m\u1ea1ng x\u00e3 h\u1ed9i<\/li>\n<\/ul>\n\n\n\n<p>Lo\u1ea1i n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho c\u00e1c website c\u00f4ng ty, trang tin t\u1ee9c\/blog chuy\u00ean nghi\u1ec7p.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"bg-dark text-white pt-5 pb-4\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row\"&gt;\n           &lt;div class=\"col-md-4\"&gt;\n             &lt;h6 class=\"fw-bold\"&gt;Li\u00ean h\u1ec7&lt;\/h6&gt;\n             &lt;p&gt;Email: contact@abc.com&lt;\/p&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"col-md-4\"&gt;\n             &lt;h6 class=\"fw-bold\"&gt;\u0110i\u1ec1u h\u01b0\u1edbng&lt;\/h6&gt;\n             &lt;ul class=\"list-unstyled\"&gt;\n               &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;&lt;\/li&gt;\n               &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Tuy\u1ec3n d\u1ee5ng&lt;\/a&gt;&lt;\/li&gt;\n             &lt;\/ul&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"col-md-4 d-flex align-items-center gap-3\"&gt;\n             &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n             &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-instagram fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"188\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100.png\" alt=\"\" class=\"wp-image-89974\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100-640x151.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-100-768x181.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>\u01afu \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ecnh b\u00e0y th\u00f4ng tin r\u00f5 r\u00e0ng, ph\u00e2n nh\u00f3m h\u1ee3p l\u00fd<\/li>\n\n\n\n<li>D\u1ec5 m\u1edf r\u1ed9ng<\/li>\n\n\n\n<li>C\u00f3 th\u1ec3 responsive t\u1ed1t v\u1edbi Grid + Flexbox<\/li>\n<\/ul>\n\n\n\n<p>Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u1ea7n c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh b\u1ed1 c\u1ee5c r\u1ed1i n\u1ebfu th\u00eam qu\u00e1 nhi\u1ec1u n\u1ed9i dung<\/li>\n\n\n\n<li>Tr\u00ean mobile c\u1ea7n \u0111\u1ea3m b\u1ea3o c\u00e1c c\u1ed9t x\u1ebfp d\u1ecdc h\u1ee3p l\u00fd<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-co-logo-slogan-va-form-dang-ky\"><strong>Footer c\u00f3 logo, slogan v\u00e0 form \u0111\u0103ng k\u00fd<\/strong><\/h3>\n\n\n\n<p>Footer n\u00e0y c\u00f3 c\u1ea5u tr\u00fac ph\u1ee9c t\u1ea1p h\u01a1n c\u00e1c lo\u1ea1i ph\u00eda tr\u00ean. Lo\u1ea1i n\u00e0y k\u1ebft h\u1ee3p vi\u1ec7c s\u1eed d\u1ee5ng Grid system v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u1ec3 t\u1ea1o ra m\u1ed9t footer \u0111a n\u0103ng ch\u1ee9 nhi\u1ec1u th\u00f4ng tin nh\u01b0 logo th\u01b0\u01a1ng hi\u1ec7u, slogan, form \u0111\u0103ng k\u00fd\/ li\u00ean h\u1ec7.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"text-white pt-5 pb-4\" style=\"background: linear-gradient(to right, #111111, #3a0d0d);\"&gt;\n       &lt;div class=\"container\"&gt;\n         &lt;div class=\"row\"&gt;\n    \n           &lt;!-- Logo + Slogan + Form \u0111\u0103ng k\u00fd --&gt;\n           &lt;div class=\"col-md-4 mb-4 text-center text-md-start\"&gt;\n             &lt;!-- Logo --&gt;\n             &lt;img src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2020\/12\/blog_logo_retina.png\" alt=\"ITviec logo\" class=\"mb-3\" height=\"40\"&gt;\n            \n             &lt;!-- Slogan --&gt;\n             &lt;p class=\"mb-3\"&gt;N\u01a1i ph\u00e1t tri\u1ec3n s\u1ef1 nghi\u1ec7p IT c\u1ee7a b\u1ea1n&lt;\/p&gt;\n            \n             &lt;!-- Form \u0111\u0103ng k\u00fd --&gt;\n             &lt;form&gt;\n               &lt;input type=\"email\" class=\"form-control mb-2\" placeholder=\"Nh\u1eadp email c\u1ee7a b\u1ea1n\"&gt;\n               &lt;button type=\"submit\" class=\"btn btn-danger w-100\"&gt;\u0110\u0103ng k\u00fd nh\u1eadn tin&lt;\/button&gt;\n             &lt;\/form&gt;\n           &lt;\/div&gt;\n    \n           &lt;!-- Li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng --&gt;\n           &lt;div class=\"col-md-5\"&gt;\n             &lt;div class=\"row\"&gt;\n               &lt;div class=\"col-6 col-lg-6 mb-3\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Vi\u1ec7c l\u00e0m IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo k\u1ef9 n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo khu v\u1ef1c&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n    \n               &lt;div class=\"col-6 col-lg-6 mb-3\"&gt;\n                 &lt;h6 class=\"fw-bold\"&gt;Chuy\u1ec7n IT&lt;\/h6&gt;\n                 &lt;ul class=\"list-unstyled\"&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Theo v\u1ecb tr\u00ed&lt;\/a&gt;&lt;\/li&gt;\n                   &lt;li&gt;&lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Chia s\u1ebb chuy\u1ec7n IT&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;\/ul&gt;\n               &lt;\/div&gt;\n             &lt;\/div&gt;\n           &lt;\/div&gt;\n    \n           &lt;!-- Li\u00ean h\u1ec7 + Icon m\u1ea1ng x\u00e3 h\u1ed9i --&gt;\n           &lt;div class=\"col-md-3\"&gt;\n             &lt;h6 class=\"fw-bold\"&gt;Li\u00ean h\u1ec7&lt;\/h6&gt;\n             &lt;p class=\"text-white-50 mb-2\"&gt;Email: &lt;a href=\"mailto:blog@itviec.com\" class=\"text-white-50 text-decoration-none\"&gt;blog@itviec.com&lt;\/a&gt;&lt;\/p&gt;\n    \n             &lt;!-- Social Icons --&gt;\n             &lt;div class=\"d-flex gap-3 mt-3\"&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-youtube fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-linkedin fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n             &lt;\/div&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;!-- D\u00f2ng th\u00f4ng tin b\u1ea3n quy\u1ec1n --&gt;\n        &lt;p class=\"text-center mt-4 text-white-50 mb-0\"&gt;&amp;copy; &lt;script&gt;document.write(new Date().getFullYear())&lt;\/script&gt; ITviec Blog. All rights reserved.&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"335\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101.png\" alt=\"\" class=\"wp-image-89976\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101-300x126.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101-640x268.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101-200x84.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-101-768x322.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>\u01afu \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>K\u1ebft h\u1ee3p \u0111\u01b0\u1ee3c branding (logo + slogan), marketing (form \u0111\u0103ng k\u00fd), \u0111i\u1ec1u h\u01b0\u1edbng UX v\u00e0 social t\u1ea1o n\u00ean s\u1ef1 chuy\u00ean nghi\u1ec7p cho website<\/li>\n\n\n\n<li>Cung c\u1ea5p \u0111\u1ea7y \u0111\u1ee7 th\u00f4ng tin cho ng\u01b0\u1eddi d\u00f9ng khi cu\u1ed9n trang xu\u1ed1ng cu\u1ed1i<\/li>\n\n\n\n<li>Gi\u00fap trang web c\u00f3 s\u1ef1 minh b\u1ea1ch cao v\u00e0 t\u0103ng \u0111\u1ed9 tin c\u1eady \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi d\u00f9ng<\/li>\n<\/ul>\n\n\n\n<p>Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chi\u1ebfm nhi\u1ec1u kh\u00f4ng gian chi\u1ec1u d\u1ecdc v\u00ec c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n<\/li>\n\n\n\n<li>D\u1ec5 b\u1ecb r\u1ed1i n\u1ebfu th\u00eam qu\u00e1 nhi\u1ec1u nh\u00f3m li\u00ean k\u1ebft<\/li>\n<\/ul>\n\n\n\n<p>Lo\u1ea1i Footer n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho website doanh nghi\u1ec7p, trang blog chuy\u00ean nghi\u1ec7p, t\u1ea1p ch\u00ed online ho\u1eb7c landing page s\u1ea3n ph\u1ea9m\/ SaaS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-footer-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_Footer_trong_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Footer trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi x\u00e2y d\u1ef1ng footer b\u1eb1ng Bootstrap, d\u00f9 l\u00e0 \u0111\u01a1n gi\u1ea3n hay ph\u1ee9c t\u1ea1p, b\u1ea1n c\u0169ng n\u00ean l\u01b0u \u00fd nh\u1eefng \u0111i\u1ec1u sau \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o giao di\u1ec7n \u0111\u1eb9p, hi\u1ec7u qu\u1ea3 s\u1eed d\u1ee5ng t\u1ed1t v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec v\u1ec1 sau:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-khong-t\u1ef1-c\u1ed1-d\u1ecbnh-\u1edf-day-trang\"><strong>Footer kh\u00f4ng t\u1ef1 c\u1ed1 \u0111\u1ecbnh \u1edf \u0111\u00e1y trang<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t l\u1ed7i ph\u1ed5 bi\u1ebfn l\u00e0 khi trang ch\u1ec9 c\u00f3 \u00edt n\u1ed9i dung, footer kh\u00f4ng t\u1ef1 \u0111\u1ed9ng n\u1eb1m cu\u1ed1i m\u00e0n h\u00ecnh m\u00e0 s\u1ebd \u201cb\u00e1m\u201d ngay d\u01b0\u1edbi n\u1ed9i dung trang web, t\u1ea1o kho\u1ea3ng tr\u1ed1ng tr\u00f4ng kh\u00f4ng \u0111\u1eb9p m\u1eaft.<\/p>\n\n\n\n<p>H\u00ecnh \u1ea3nh v\u00ed d\u1ee5:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"555\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102.png\" alt=\"\" class=\"wp-image-89977\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102-300x208.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102-640x444.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102-200x139.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-102-768x533.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>C\u00e1ch kh\u1eafc ph\u1ee5c l\u00e0 d\u00f9ng CSS Flexbox cho to\u00e0n trang \u0111\u1ec3 \u0111\u1ea9y footer xu\u1ed1ng \u0111\u00e1y.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  html, body {\n     height: 100%;\n  }\n  body {\n     display: flex;\n     flex-direction: column;\n  }\n  main {\n     flex: 1;\n  }\n&lt;\/style&gt;\n&lt;body&gt;\n &lt;!-- Header --&gt;\n &lt;header class=\"bg-primary text-white text-center py-4 shadow-sm\"&gt;\n   &lt;h1 class=\"h3 mb-0\"&gt;Trang Gi\u1edbi Thi\u1ec7u&lt;\/h1&gt;\n &lt;\/header&gt;\n &lt;!-- Main content --&gt;\n &lt;main class=\"container my-5 text-center\"&gt;\n   &lt;p class=\"lead\"&gt;N\u1ed9i dung trang n\u00e0y r\u1ea5t ng\u1eafn, ch\u1ec9 c\u00f3 m\u1ed9t \u0111o\u1ea1n v\u0103n demo.&lt;\/p&gt;\n &lt;\/main&gt;\n &lt;!-- Footer --&gt;\n &lt;footer class=\"bg-dark text-white py-4\"&gt;\n   &lt;div class=\"container text-center\"&gt;\n     &lt;div class=\"mb-2\"&gt;\n       &lt;a href=\"#\" class=\"text-white-50 text-decoration-none me-3\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"text-white-50 text-decoration-none me-3\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"text-white-50 text-decoration-none\"&gt;Ch\u00ednh s\u00e1ch&lt;\/a&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"mb-2\"&gt;\n       &lt;a href=\"#\" class=\"text-white me-3\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"text-white me-3\"&gt;&lt;i class=\"bi bi-youtube fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n       &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-instagram fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n     &lt;\/div&gt;\n     &lt;p class=\"mb-0 text-white-50\"&gt;&amp;copy; &lt;script&gt;document.write(new Date().getFullYear())&lt;\/script&gt; MyCompany. All rights reserved.&lt;\/p&gt;\n   &lt;\/div&gt;\n &lt;\/footer&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"794\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103.png\" alt=\"\" class=\"wp-image-89978\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103-300x298.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103-640x636.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103-200x200.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-103-768x763.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-class-padding-py-pt-pb-d\u1ec3-t\u1ea1o-kho\u1ea3ng-cach\"><strong>S\u1eed d\u1ee5ng class padding (py-*, pt-*, pb-*) \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch<\/strong><\/h3>\n\n\n\n<p>Footer n\u1ebfu kh\u00f4ng c\u00f3 kho\u1ea3ng c\u00e1ch s\u1ebd khi\u1ebfn n\u1ed9i dung b\u00ed b\u00e1ch, kh\u00f3 \u0111\u1ecdc. B\u1ea1n n\u00ean s\u1eed d\u1ee5ng c\u00e1c class nh\u01b0: <strong>.py-4 <\/strong>(t\u1ea1o padding tr\u00ean d\u01b0\u1edbi), <strong>.pt-5, .pb-3<\/strong> (t\u1ea1o padding ri\u00eang t\u1eebng h\u01b0\u1edbng)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-\u01b0u-tien-dung-class-mau-ch\u1eef-co-s\u1eb5n-c\u1ee7a-bootstrap-thay-vi-css-th\u1ee7-cong\"><strong>\u01afu ti\u00ean d\u00f9ng class m\u00e0u ch\u1eef c\u00f3 s\u1eb5n c\u1ee7a Bootstrap thay v\u00ec CSS th\u1ee7 c\u00f4ng<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n nhi\u1ec1u class m\u00e0u ch\u1eef ph\u00f9 h\u1ee3p cho n\u1ec1n t\u1ed1i\/s\u00e1ng nh\u01b0 <strong>&nbsp;text-white, text-muted, text-white-50.<\/strong> Khi c\u1ea7n \u0111\u1ecbnh d\u1ea1ng n\u1ed9i dung cho footer, b\u1ea1n n\u00ean s\u1eed d\u1ee5ng class Bootstrap \u0111\u1ec3 gi\u00fap code ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-la-b\u1eaft-bu\u1ed9c-khong-ph\u1ea3i-tuy-ch\u1ecdn\"><strong>Responsive l\u00e0 b\u1eaft bu\u1ed9c, kh\u00f4ng ph\u1ea3i t\u00f9y ch\u1ecdn<\/strong><\/h3>\n\n\n\n<p>Footer l\u00e0 ph\u1ea7n ng\u01b0\u1eddi d\u00f9ng th\u1ea5y sau c\u00f9ng v\u00e0 th\u01b0\u1eddng l\u00e0 l\u00fac h\u1ecd \u0111ang d\u00f9ng mobile. H\u00e3y \u0111\u1ea3m b\u1ea3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng <strong>Grid (col-12 col-md-6) <\/strong>\u0111\u1ec3 c\u00e1c c\u1ed9t t\u1ef1 x\u1ebfp d\u1ecdc tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf<\/li>\n\n\n\n<li>D\u00f9ng <strong>.flex-column .flex-md-row<\/strong> n\u1ebfu s\u1eafp x\u1ebfp n\u1ed9i dung b\u1eb1ng Flexbox<\/li>\n\n\n\n<li>Ki\u1ec3m tra l\u1ea1i hi\u1ec3n th\u1ecb th\u1ef1c t\u1ebf tr\u00ean c\u00e1c breakpoint c\u1ee7a Bootstrap (xs, sm, md, lg&#8230;)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-footer-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Footer_Bootstrap\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Footer Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-co-\u1ea3nh-h\u01b0\u1edfng-d\u1ebfn-seo-khong\"><strong>Footer c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn SEO kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Footer c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn SEO, d\u00f9 kh\u00f4ng ph\u1ea3i l\u00e0 y\u1ebfu t\u1ed1 ch\u00ednh nh\u01b0 n\u1ed9i dung hay t\u1ed1c \u0111\u1ed9 t\u1ea3i trang. Tuy nhi\u00ean, m\u1ed9t footer \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng t\u1ed1t c\u00f3 th\u1ec3 h\u1ed7 tr\u1ee3 SEO theo c\u00e1c c\u00e1ch sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u1ea5u tr\u00fac HTML5 \u0111\u00fang chu\u1ea9n gi\u00fap Google hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 trang: <\/strong>s\u1eed d\u1ee5ng \u0111\u00fang th\u1ebb &lt;footer&gt; (thay v\u00ec &lt;div id=&#8221;footer&#8221;&gt;) gi\u00fap c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c \u0111\u00e2u l\u00e0 ph\u1ea7n ch\u00e2n trang c\u1ee7a website. \u0110i\u1ec1u n\u00e0y gi\u00fap Google hi\u1ec3u r\u00f5 c\u1ea5u tr\u00fac c\u1ee7a trang v\u00e0 \u01b0u ti\u00ean n\u1ed9i dung ch\u00ednh h\u01a1n ph\u1ea7n l\u1eb7p l\u1ea1i nh\u01b0 menu, b\u1ea3n quy\u1ec1n.<\/li>\n\n\n\n<li><strong>Li\u00ean k\u1ebft n\u1ed9i b\u1ed9 (internal links) trong footer h\u1ed7 tr\u1ee3 crawl v\u00e0 index: <\/strong>Nhi\u1ec1u website \u0111\u1eb7t c\u00e1c li\u00ean k\u1ebft quan tr\u1ecdng v\u00e0o footer nh\u01b0: Ch\u00ednh s\u00e1ch b\u1ea3o m\u1eadt, \u0111i\u1ec1u kho\u1ea3n s\u1eed d\u1ee5ng, Gi\u1edbi thi\u1ec7u, li\u00ean h\u1ec7, Sitemap, c\u00e1c chuy\u00ean m\u1ee5c ph\u1ed5 bi\u1ebfn. \u0110\u00e2y l\u00e0 c\u00e1ch h\u1eefu \u00edch \u0111\u1ec3 t\u0103ng t\u00ednh li\u00ean k\u1ebft n\u1ed9i b\u1ed9 (internal linking), gi\u00fap Googlebot d\u1ec5 d\u00e0ng thu th\u1eadp d\u1eef li\u1ec7u to\u00e0n b\u1ed9 website v\u00e0 ph\u00e2n b\u1ed5 PageRank \u0111\u1ec1u h\u01a1n.<\/li>\n\n\n\n<li><strong>Th\u00f4ng tin c\u00f4ng ty v\u00e0 d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac t\u0103ng \u0111\u1ed9 tin c\u1eady: <\/strong>Vi\u1ec7c cung c\u1ea5p th\u00f4ng tin minh b\u1ea1ch nh\u01b0 t\u00ean c\u00f4ng ty, \u0111\u1ecba ch\u1ec9, Email li\u00ean h\u1ec7, m\u00e3 s\u1ed1 thu\u1ebf, gi\u1ea5y ph\u00e9p (n\u1ebfu c\u00f3) s\u1ebd t\u0103ng \u0111\u1ed9 tin c\u1eady v\u1edbi ng\u01b0\u1eddi d\u00f9ng v\u00e0 c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm. N\u1ebfu b\u1ea1n th\u00eam Schema markup (LocalBusiness ho\u1eb7c Organization) v\u00e0o ph\u1ea7n footer, Google c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c chi ti\u1ebft n\u00e0y tr\u1ef1c ti\u1ebfp tr\u00ean k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-footer-co-th\u1ec3-dung-cung-navbar-d\u01b0\u1ee3c-khong\"><strong>Footer c\u00f3 th\u1ec3 d\u00f9ng c\u00f9ng Navbar \u0111\u01b0\u1ee3c kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng menu \u0111i\u1ec1u h\u01b0\u1edbng (Navbar) b\u00ean trong footer v\u1edbi mi\u1ec5n l\u00e0 n\u00f3 ph\u00f9 h\u1ee3p v\u1edbi m\u1ee5c \u0111\u00edch v\u00e0 ng\u1eef c\u1ea3nh c\u1ee7a trang web. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>             &lt;footer class=\"bg-light py-4\"&gt;\n               &lt;div class=\"container\"&gt;\n                 &lt;nav class=\"nav justify-content-center\"&gt;\n                   &lt;a class=\"nav-link text-muted\" href=\"#\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;\n                   &lt;a class=\"nav-link text-muted\" href=\"#\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n                   &lt;a class=\"nav-link text-muted\" href=\"#\"&gt;Ch\u00ednh s\u00e1ch&lt;\/a&gt;\n                 &lt;\/nav&gt;\n                 &lt;p class=\"text-center text-muted mb-0\"&gt;&amp;copy; 2025 MyWebsite&lt;\/p&gt;\n               &lt;\/div&gt;\n             &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Tuy nhi\u00ean \u0111i\u1ec1u n\u00e0y kh\u00f4ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch. V\u00e0 c\u1ea7n l\u01b0u \u00fd nh\u1eefng \u0111i\u1ec1u sau khi ph\u1ea3i s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kh\u00f4ng n\u00ean d\u00f9ng Navbar \u0111\u1ea7y \u0111\u1ee7 v\u1edbi menu s\u1ed5 (dropdown), hamburger,&#8230; trong footer v\u00ec s\u1ebd g\u00e2y n\u1eb7ng n\u1ec1, r\u1ed1i m\u1eaft.<\/li>\n\n\n\n<li>Footer ch\u1ec9 n\u00ean ch\u1ee9a menu \u0111\u01a1n gi\u1ea3n ho\u1eb7c nh\u00f3m li\u00ean k\u1ebft, kh\u00f4ng c\u1ea7n ph\u1ea3i d\u00f9ng \u0111\u1ebfn navbar-expand, navbar-toggler&#8230;<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 kh\u00f4ng n\u00ean d\u00f9ng navbar trong footer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"navbar navbar-expand-lg navbar-dark bg-dark mt-5\"&gt;\n       &lt;div class=\"container-fluid\"&gt;\n         &lt;a class=\"navbar-brand\" href=\"#\"&gt;\u00a9 2025 MyCompany&lt;\/a&gt;\n\n\n         &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#footerNavbar\"&gt;\n           &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n         &lt;\/button&gt;\n\n\n         &lt;div class=\"collapse navbar-collapse\" id=\"footerNavbar\"&gt;\n           &lt;ul class=\"navbar-nav ms-auto\"&gt;\n             &lt;li class=\"nav-item\"&gt;\n               &lt;a class=\"nav-link text-white\" href=\"#\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;\n             &lt;\/li&gt;\n             &lt;li class=\"nav-item dropdown\"&gt;\n               &lt;a class=\"nav-link dropdown-toggle text-white\" href=\"#\" id=\"footerDropdown\" role=\"button\" data-bs-toggle=\"dropdown\"&gt;\n                 Ch\u00ednh s\u00e1ch\n               &lt;\/a&gt;\n               &lt;ul class=\"dropdown-menu\"&gt;\n                 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;B\u1ea3o m\u1eadt&lt;\/a&gt;&lt;\/li&gt;\n                 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;\u0110i\u1ec1u kho\u1ea3n&lt;\/a&gt;&lt;\/li&gt;\n               &lt;\/ul&gt;\n             &lt;\/li&gt;\n             &lt;li class=\"nav-item\"&gt;\n               &lt;a class=\"nav-link text-white\" href=\"#\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n             &lt;\/li&gt;\n           &lt;\/ul&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>V\u1ea5n \u0111\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng navbar-expand-lg + toggler kh\u00f4ng c\u1ea7n thi\u1ebft trong footer<\/li>\n\n\n\n<li>Footer kh\u00f4ng n\u00ean c\u00f3 bi\u1ec3u t\u01b0\u1ee3ng hamburger ho\u1eb7c menu s\u1ed5<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3 (<em>tr\u00f4ng gi\u1ed1ng nh\u01b0 m\u1ed9t header<\/em>):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"165\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-104.png\" alt=\"\" class=\"wp-image-89979\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-104.png 493w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-104-300x100.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-104-200x67.png 200w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 navbar \u1edf footer nh\u01b0ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng h\u1ee3p l\u00fd:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;footer class=\"navbar bg-light py-4 border-top mt-5\"&gt;\n       &lt;div class=\"container flex-column\"&gt;\n         &lt;ul class=\"navbar-nav flex-row justify-content-center mb-2\"&gt;\n           &lt;li class=\"nav-item me-3\"&gt;\n             &lt;a class=\"nav-link text-muted px-2\" href=\"#\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;\n           &lt;\/li&gt;\n           &lt;li class=\"nav-item me-3\"&gt;\n             &lt;a class=\"nav-link text-muted px-2\" href=\"#\"&gt;Ch\u00ednh s\u00e1ch&lt;\/a&gt;\n           &lt;\/li&gt;\n           &lt;li class=\"nav-item\"&gt;\n             &lt;a class=\"nav-link text-muted px-2\" href=\"#\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;\n           &lt;\/li&gt;\n         &lt;\/ul&gt;\n         &lt;div class=\"mb-2 text-center\"&gt;\n           &lt;a href=\"#\" class=\"text-muted me-3\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-muted me-3\"&gt;&lt;i class=\"bi bi-youtube fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-muted\"&gt;&lt;i class=\"bi bi-instagram fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n         &lt;\/div&gt;\n         &lt;p class=\"text-muted text-center mb-0\"&gt;&amp;copy; 2025 MyCompany. All rights reserved.&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>T\u1eadn d\u1ee5ng layout g\u1ecdn g\u00e0ng s\u1eb5n c\u00f3 c\u1ee7a Navbar v\u1edbi class <strong>.navbar, . bg-light<\/strong> (kh\u00f4ng d\u00f9ng expand ho\u1eb7c toggler)<\/li>\n\n\n\n<li>B\u1ed1 tr\u00ed c\u00e1c ph\u1ea7n theo chi\u1ec1u d\u1ecdc trong container trung t\u00e2m b\u1eb1ng <strong>.flex-column, .container<\/strong><\/li>\n\n\n\n<li><strong>.navbar-nav, .flex-row<\/strong> \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c li\u00ean k\u1ebft th\u00e0nh 1 d\u00f2ng ngang<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"253\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-105.png\" alt=\"\" class=\"wp-image-89980\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-105.png 500w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-105-300x152.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-105-200x101.png 200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-chen-icon-vao-footer\"><strong>L\u00e0m sao \u0111\u1ec3 ch\u00e8n icon v\u00e0o footer?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 ch\u00e8n icon v\u00e0o footer, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng Bootstrap Icons ho\u1eb7c Font Awesome (ho\u1eb7c c\u00e1c th\u01b0 vi\u1ec7n icon kh\u00e1c). Ch\u1ec9 c\u1ea7n ch\u00e8n \u0111\u00fang class v\u00e0o th\u1ebb &lt;i&gt; l\u00e0 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c icon. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>             &lt;!-- Social Icons --&gt;\n             &lt;div class=\"d-flex gap-3 mt-3\"&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-facebook fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-youtube fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n               &lt;a href=\"#\" class=\"text-white\"&gt;&lt;i class=\"bi bi-linkedin fs-5\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n             &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>L\u01b0u \u00fd: b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng<strong> .fs-*<\/strong> \u0111\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc icon,<strong> .gap-*<\/strong> \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c icon, v\u00e0<strong> .text-white <\/strong>\u0111\u1ec3 icon n\u1ed5i b\u1eadt tr\u00ean n\u1ec1n t\u1ed1i.<\/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>Footer l\u00e0 m\u1ed9t ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu trong h\u1ea7u h\u1ebft c\u00e1c giao di\u1ec7n website hi\u1ec7n \u0111\u1ea1i. V\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng x\u00e2y d\u1ef1ng nh\u1eefng footer \u0111\u1eb9p m\u1eaft, responsive v\u00e0 chuy\u00ean nghi\u1ec7p nh\u1edd v\u00e0o h\u1ec7 th\u1ed1ng Grid linh ho\u1ea1t, Flexbox ti\u1ec7n d\u1ee5ng c\u00f9ng c\u00e1c class h\u1ed7 tr\u1ee3 \u0111\u1ecbnh d\u1ea1ng nhanh ch\u00f3ng.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch t\u1ea1o footer b\u1eb1ng Bootstrap, t\u1eeb c\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0 b\u1ea3n quy\u1ec1n, menu ph\u1ee5, social icon \u0111\u1ebfn form \u0111\u0103ng k\u00fd, \u0111\u1ec3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o website c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong m\u1ed9t giao di\u1ec7n web, footer l\u00e0 n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng tin b\u1ed5 sung nh\u01b0 b\u1ea3n quy\u1ec1n, li\u00ean k\u1ebft ph\u1ee5, m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c form \u0111\u0103ng k\u00fd. V\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng x\u00e2y d\u1ef1ng footer \u0111\u1eb9p, responsive b\u1eb1ng h\u1ec7 th\u1ed1ng Grid, Flexbox v\u00e0 c\u00e1c class ti\u1ec7n \u00edch.&nbsp; \u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":90301,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-89954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website - ITviec Blog<\/title>\n<meta name=\"description\" content=\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Bootstrap Footer t\u1eeb c\u1ea5u tr\u00fac HTML, chia c\u1ed9t v\u1edbi Grid, c\u0103n ch\u1ec9nh Flexbox \u0111\u1ebfn th\u00eam copyright, social icon, form \u0111\u0103ng k\u00fd,...\" \/>\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\/bootstrap-footer-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website\" \/>\n<meta property=\"og:description\" content=\"Trong m\u1ed9t giao di\u1ec7n web, footer l\u00e0 n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng tin b\u1ed5 sung nh\u01b0 b\u1ea3n quy\u1ec1n, li\u00ean k\u1ebft ph\u1ee5, m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c form \u0111\u0103ng k\u00fd. V\u1edbi Bootstrap, b\u1ea1n c\u00f3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-31T16:52:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T17:12:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website - ITviec Blog","description":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Bootstrap Footer t\u1eeb c\u1ea5u tr\u00fac HTML, chia c\u1ed9t v\u1edbi Grid, c\u0103n ch\u1ec9nh Flexbox \u0111\u1ebfn th\u00eam copyright, social icon, form \u0111\u0103ng k\u00fd,...","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\/bootstrap-footer-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website","og_description":"Trong m\u1ed9t giao di\u1ec7n web, footer l\u00e0 n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng tin b\u1ed5 sung nh\u01b0 b\u1ea3n quy\u1ec1n, li\u00ean k\u1ebft ph\u1ee5, m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c form \u0111\u0103ng k\u00fd. V\u1edbi Bootstrap, b\u1ea1n c\u00f3","og_url":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-31T16:52:12+00:00","article_modified_time":"2025-07-31T17:12:33+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"21 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website","datePublished":"2025-07-31T16:52:12+00:00","dateModified":"2025-07-31T17:12:33+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/"},"wordCount":4380,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/","url":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/","name":"Bootstrap Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png","datePublished":"2025-07-31T16:52:12+00:00","dateModified":"2025-07-31T17:12:33+00:00","description":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Bootstrap Footer t\u1eeb c\u1ea5u tr\u00fac HTML, chia c\u1ed9t v\u1edbi Grid, c\u0103n ch\u1ec9nh Flexbox \u0111\u1ebfn th\u00eam copyright, social icon, form \u0111\u0103ng k\u00fd,...","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/bootstrap-footer-scaled.png","width":800,"height":421,"caption":"bootstrap footer - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/bootstrap-footer-la-gi\/#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 Footer: T\u1ea1o ch\u00e2n trang chuy\u00ean nghi\u1ec7p cho website"}]},{"@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\/89954","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=89954"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89954\/revisions"}],"predecessor-version":[{"id":90308,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89954\/revisions\/90308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/90301"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=89954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=89954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=89954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}