Trong một giao diện web, footer là nơi hiển thị các thông tin bổ sung như bản quyền, liên kết phụ, mạng xã hội hoặc form đăng ký. Với Bootstrap, bạn có thể dễ dàng xây dựng footer đẹp, responsive bằng hệ thống Grid, Flexbox và các class tiện ích.
Đọc bài viết này để tìm hiểu về:
- Vai trò của footer và lý do nên tạo footer với Bootstrap
- Cách xây dựng các thành phần cơ bản của footer bằng Bootstrap
- Tham khảo các mẫu footer phổ biến kèm hướng dẫn áp dụng
- Những lưu ý khi xây dựng footer bằng Bootstrap
Giới thiệu về Footer trong Bootstrap
Footer là gì? Vai trò của nó trong giao diện web
Footer (chân trang) là phần nằm ở cuối cùng của một trang web. Đây thường là nơi hiển thị các thông tin bổ sung mà người dùng có thể cần, ví dụ như:
- Thông tin bản quyền (© Copyright)
- Các liên kết điều hướng phụ (menu phụ, sitemap)
- Biểu tượng mạng xã hội (Facebook, YouTube, LinkedIn…)
- Form đăng ký nhận bản tin
- Địa chỉ công ty, thông tin liên hệ hoặc slogan thương hiệu
Mặc dù không nằm ở vị trí nổi bật như header, nhưng footer lại đóng một vai trò rất quan trọng trong trải nghiệm người dùng (UX). Nó giúp tổ chức thông tin rõ ràng, tăng sự chuyên nghiệp cho website và hỗ trợ điều hướng ở phần cuối trang, nơi mà người dùng thường dừng lại sau khi xem xong nội dung chính.
Hình ảnh ví dụ về footer trong website
Vì sao nên dùng Bootstrap để xây dựng footer?
Bootstrap không có component “footer” riêng biệt như navbar bootstrap dành cho header, nhưng lại cung cấp rất nhiều công cụ tiện lợi để bạn tự tạo một footer đẹp và linh hoạt như:
- Grid system giúp dễ dàng chia cột (ví dụ: 2 cột, 3 cột, 4 cột…) mà không cần viết CSS thủ công
- Flexbox giúp căn chỉnh nội dung trong footer (trái – phải, giữa, giãn cách đều…)
- Các class tiện ích như .bg-dark, .text-light, .text-center,… giúp định dạng nhanh mà không cần viết thêm nhiều dòng CSS
- Responsive có sẵn giúp footer tự động co giãn đẹp trên mobile, tablet, desktop
- Kết hợp tốt với HTML khác giúp dễ dàng chèn icon, form, hình ảnh…
Nhờ những lợi thế đó mà Bootstrap là lựa chọn phổ biến để tạo các footer cho website một cách nhanh chóng và chuyên nghiệp.
Các thành phần phổ biến trong Footer
Thành phần trong một footer sẽ tùy theo mục đích sử dụng và loại footer. Dưới đây là một số thành phần phổ biến thường được đặt trong phần footer của trang web:
Thông tin bản quyền (copyright)
Đây gần như là thành phần xuất hiện nhiều nhất trong các footer. Nó thường hiển thị năm hiện tại và tên cá nhân hoặc công ty sở hữu website.
Ví dụ cách tạo thông tin bản quyền bằng Bootstrap:
<footer class="bg-light py-3 mt-5">
<div class="container text-center">
<p class="text-muted mb-0">© 2025 ITViec. All rights reserved.</p>
</div>
</footer>Trong đó:
- © là HTML entity dùng để hiển thị biểu tượng bản quyền ©
Hình ảnh kết quả:
Nếu không muốn cập nhật năm thủ công mỗi năm, bạn có thể dùng Javascript để tự động hiển thị năm hiện tại:
<p class="text-muted mb-0">
© <script>document.write(new Date().getFullYear())</script> ITviec. All rights reserved.
</p>Liên kết điều hướng phụ (footer nav)
Danh sách menu điều hướng thường được đặt ở footer để giúp người dùng tìm được các trang quan trọng một cách dễ dàng, mà không cần cuộn lên phần header ở đầu trang.
Ví dụ thêm phần điều hướng vào footer Bootstrap:
<footer class="bg-light py-4 mt-5 border-top">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-auto">
<ul class="nav justify-content-center flex-column flex-md-row gap-2 gap-md-4 mb-3">
<li class="nav-item">
<a href="#" class="nav-link px-0 text-muted">Giới thiệu</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 text-muted">Liên hệ</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 text-muted">Chính sách</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 text-muted">FAQ</a>
</li>
</ul>
</div>
</div>
<p class="text-center text-muted mb-0">© 2025. ITViec Blog</p>
</div>
</footer>Trong đó: Phần điều hướng sử dụng ul, li
Hình ảnh hiển thị
Mạng xã hội (social icons)
Nhiều website thường thêm các biểu tượng mạng xã hội ở phần footer để người dùng có thể dễ dàng truy cập fanpage, kênh YouTube, Instagram hoặc LinkedIn. Các icon này có thể được đặt chung hàng hoặc riêng thành một nhóm ở giữa hoặc bên phải/footer. Bạn có thể dùng thư viện Bootstrap Icons hoặc Font Awesome để hiển thị icon.
Ví dụ tạo footer có icon mạng xã hội bằng Bootstrap 5:
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p class="mb-2">Theo dõi chúng tôi:</p>
<div class="d-flex justify-content-center gap-3 mb-3">
<a href="#" class="text-white"><i class="bi bi-facebook fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-twitter fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-instagram fs-4"></i></a>
</div>
</div>
</footer>Trong đó:
- bi bi-facebook, bi bi-twitter, bi bi-instagram là class của Bootstrap Icons
- fs-4 là class Bootstrap để tăng kích thước font/icon
- gap-3 giúp tạo khoảng cách giữa các icon
- text-white đảm bảo icon hiển thị rõ trên nền tối
Nếu bạn dùng Font Awesome thì chỉ cần đổi class icon tương ứng.
Kết quả hiển hị:
Logo thương hiệu hoặc slogan
Logo hoặc slogan cũng là thành phần nên được thêm vào footer để nhấn mạnh thương hiệu hoặc tạo cảm giác nhận diện xuyên suốt cho website. Bạn có thể hiển thị logo (ảnh) và slogan (dòng chữ ngắn) trong một khối ở giữa footer.
Ví dụ cách đặt logo và slogan ở footer:
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center mb-3 mb-md-0">
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" alt="Logo ITviec" height="40">
</div>
<div class="col-md-6 text-center">
<p class="mb-0">Nơi Phát Triển Sự Nghiệp IT Của Bạn</p>
</div>
</div>
<p class="text-center mt-3 mb-0">© 2025 ITViec Blog</p>
</div>
</footer>Trong đó:
- bg-dark tạo nền tối
- Nên dùng logo có màu sáng hoặc nền trong suốt để không bị chìm trên nền tối
Kết quả hiển thị:
Form đăng ký email (email signup / newsletter)
Một số website, đặc biệt là blog, trang sản phẩm hoặc dịch vụ thường đặt form đăng ký email ở footer. Mục đích là để người dùng có thể dễ dàng đăng ký nhận tin mới, tài liệu, ưu đãi hoặc bản tin hàng tuần.
Vì footer thường có không gian hạn chế, form nên được thiết kế đơn giản, gọn gàng và dễ thao tác trên cả desktop lẫn mobile.
Ví dụ tạo footer có form đăng ký bằng Bootstrap:
<footer class="text-white pt-5 pb-4" style="background: linear-gradient(to right, #111111, #3a0d0d);">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-6 mb-4">
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" alt="ITviec logo" class="mb-3" height="60">
<form>
<input type="email" class="form-control mb-2" placeholder="Nhập email của bạn">
<button type="submit" class="btn btn-danger w-100">Đăng kí nhận tin</button>
</form>
</div>
</div>
</div>
</footer>Trong đó:
- Phần form gồm ô nhập email và nút gửi
Kết quả hiển thị:
Ví dụ một footer tổng hợp các thành phần phổ biến được nêu trên:
<footer class="text-white pt-5 pb-4" style="background: linear-gradient(to right, #111111, #3a0d0d);">
<div class="container">
<div class="row">
<!-- Phần logo & form đăng ký -->
<div class="col-md-4 mb-4">
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" alt="ITviec logo" class="mb-3" height="40">
<form class="mb-3">
<input type="email" class="form-control mb-2" placeholder="Nhập email của bạn">
<button type="submit" class="btn btn-danger w-100">Đăng kí nhận tin</button>
</form>
</div>
<div class="col-md-6">
<div class="row">
<!-- Phần liên kết điều hướng -->
<div class="col-6 col-lg-3 mb-3">
<h6 class="fw-bold">Việc làm IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo kỹ năng</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo khu vực</a></li>
</ul>
</div>
<div class="col-6 col-lg-3 mb-3">
<h6 class="fw-bold">Chuyện IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Chia sẻ chuyện IT</a></li>
</ul>
</div>
<!-- Phần thông tin liên hệ -->
<div class="col-6 col-lg-4 mb-4">
<h6 class="fw-bold">Về ITviec</h6>
<ul class="list-unstyled">
<li>
<a href="mailto:blog@itviec.com" class="text-white-50 text-decoration-none">
Liên hệ: blog@itviec.com
</a>
</li>
</ul>
<!-- Phần Icon mạng xã hội -->
<div class="d-flex gap-3 mt-2">
<a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-youtube fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-linkedin fs-5"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>Kết quả hiển thị:
- Phần logo và form đăng ký (ở bên trái)
- Phần điều hướng đến các trang các (ở giữa)
- Phần thông tin liên hệ và mạng xã hội (ở bên phải)
Hướng dẫn xây dựng cấu trúc cơ bản của Footer bằng Bootstrap
Sau khi đã biết footer bao gồm những thành phần gì, bước tiếp theo chúng ta sẽ xây dựng cấu trúc layout cho footer bằng các công cụ có sẵn trong Bootstrap. Ở phần này, bạn sẽ hiểu cách dùng:
- Thẻ <footer> (chuẩn HTML5)
- Grid system để chia cột
- Flexbox để căn chỉnh nội dung
Footer HTML5 tag
Trong HTML5, thẻ <footer> được dùng để đánh dấu phần chân trang của một trang web hoặc một section. Việc sử dụng đúng thẻ như <footer> không chỉ giúp mã HTML rõ ràng hơn mà còn có lợi cho SEO và khả năng truy cập (accessibility).
Ví dụ cú pháp cơ bản:
<footer>
<!-- Nội dung footer nằm ở đây -->
</footer>Khi dùng với Bootstrap, bạn có thể thêm các class như .bg-dark, .text-white, .pt-5, .pb-4… để tùy chỉnh màu sắc và khoảng cách.
Ví dụ footer nền tối (Dark footer) trong Bootstrap
<footer class="bg-dark text-white pt-4 pb-4">
<div class="container text-center">
<p class="mb-1">Đây là footer nền tối</p>
<p class="mb-0">© 2025 ITViec Blog</p>
</div>
</footer>Trong đó:
- .bg-dark: tạo nền đen
- .text-white: định dạng chữ trắng
Kết quả hiển thị
Ví dụ footer nền sáng (Light footer) trong Bootstrap
<footer class="bg-light text-dark pt-4 pb-4">
<div class="container text-center">
<p class="mb-1">Đây là footer nền tối</p>
<p class="mb-0">© 2025 ITViec Blog</p>
</div>
</footer>Trong đó:
- .bg-light: tạo nền sáng
- .text-dark: định dạng chữ trắng
Kết quả hiển thị:
Sử dụng Grid để chia cột cho Footer
Bootstrap cung cấp hệ thống lưới 12 cột, rất linh hoạt để chia layout trong footer (đọc thêm về Grid System). Ví dụ bạn muốn chia footer thành 2 phần (chẳng hạn như thông tin điều hướng), bạn có thể chia đều mỗi phần chiếm 6 cột:
<footer class="text-white pt-5 pb-4" style="background: linear-gradient(to right, #111111, #3a0d0d);">
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<!-- Cột menu 1 -->
<div class="col-6">
<h6 class="fw-bold">Việc làm IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo kỹ năng</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo khu vực</a></li>
</ul>
</div>
<!-- Cột menu 2 -->
<div class="col-6">
<h6 class="fw-bold">Chuyện IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Chia sẻ chuyện IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>Trong đó:
- row là hàng chứa các cột. Khi bạn đặt các col-* vào bên trong row, Bootstrap sẽ tự chia layout theo hệ thống lưới 12 cột.
- col-6 có nghĩa là chiếm 6 trên tổng 12 cột, tức là nửa chiều ngang của một hàng.
Kết quả hiển thị
Hệ thống Grid của Bootstrap không chỉ giúp bạn chia layout dễ dàng, mà còn tự động điều chỉnh theo kích thước màn hình dựa vào cơ chế responsive có sẵn trong Bootstrap. Điều này rất quan trọng với footer, bởi vì nó giúp:
- Trên desktop: có thể chia nhiều cột nằm ngang
- Trên mobile: nên chuyển sang dạng cột dọc (stacked), dễ đọc và dễ bấm
Như ví dụ phía trên, thay vì chỉ dùng .col-6 để chia footer thành 2 cột trên mọi thiết bị, bạn có thể thêm class responsive như sau:
<div class="col-12 col-md-6">Trong đó:
- .col-12: Trên màn hình nhỏ (mobile), cột chiếm toàn bộ chiều ngang, giúp nội dung nằm theo hàng dọc
- .col-md-6: Từ kích thước md (≥768px) trở lên, cột chiếm 50% chiều ngang giúp hiển thị 2 cột ngang
Kết quả khi ở màn hình mobile khi đã áp dụng repsonsive cho ví dụ phía trên:
<footer class="text-white pt-5 pb-4" style="background: linear-gradient(to right, #111111, #3a0d0d);">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<div class="row">
<!-- Cột menu 1 -->
<div class="col-12 col-sm-6 mb-4 mb-sm-0">
<h6 class="fw-bold">Việc làm IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo kỹ năng</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo khu vực</a></li>
</ul>
</div>
<!-- Cột menu 2 -->
<div class="col-12 col-sm-6">
<h6 class="fw-bold">Chuyện IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Chia sẻ chuyện IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>Hiển thị
Sử dụng Flexbox để căn chỉnh nội dung Footer
Ngoài Grid, Bootstrap còn hỗ trợ Flexbox, một công cụ cực kỳ hữu ích để căn chỉnh vị trí và khoảng cách giữa các phần tử bên trong footer (theo chiều ngang hoặc chiều dọc).
Flexbox thường được dùng để:
- Căn logo bên trái và slogan bên phải
- Căn giữa form hoặc nội dung
- Giãn đều các cột, icon hoặc dòng chữ
- Căn chỉnh lại thứ tự hiển thị trên mobile (nếu cần)
Ví dụ sử dùng Flexbox trong footer:
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="d-flex flex-column justify-content-between align-items-center text-center gap-3">
<div class="footer-logo">
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" alt="Logo ITviec" height="50">
</div>
<div class="footer-slogan">
<p class="mb-0">Nơi Phát Triển Sự Nghiệp IT Của Bạn</p>
</div>
</div>
<p class="text-center text-white-50 mt-4">© 2025 ITViec Blog</p>
</div>
</footer>Trong đó:
- d-flex để kích hoạt Flexbox
- .flex-column giúp hiển thị ngang
- .justify-content-between sẽ đẩy logo sang trái, slogan sang phải
- .align-items-center giúp căn giữa theo chiều dọc (khi nằm trên cùng một hàng)
Kết quả hiển thị
Trong một số trường hợp, khi thiết kế footer bạn thường muốn:
- Hiển thị các thành phần xếp dọc trên mobile (đỡ chật)
- Và xếp ngang khi lên desktop (dễ đọc, dễ nhìn)
Bootstrap giúp bạn làm điều này rất dễ bằng các class responsive Flexbox như: flex-column, .flex-md-row, text-center text-md-start, gap-3 và dựa vào các breakpoint có sẵn.
Ví dụ:
<footer class="bg-dark text-white py-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center text-center text-md-start gap-3">
<div>
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" height="50">
</div>
<div>
<p class="me-2">Nơi phát triển sự nghiệp của bạn </p>
</div>
</div>
</footer>Trong đó:
- .flex-column .flex-md-row: thành phần flex chia phần tử theo cột khi ở màn hình nhỏ (mobile) và sắp xếp theo cột ở màn hình lớn hơn
- .text-center .text-md-start: văn bản sẽ canh giữa ở màn hình nhỏ và căn trái theo màn hình moblie
Kết quả khi ở màn hình mobile:
Ví dụ một số mẫu footer phổ biến với Bootstrap
Tùy vào mục đích sử dụng và thiết kế của website, bạn có thể chọn các kiểu footer khác nhau. Dưới đây là các mẫu phổ biến mà bạn dễ dàng dựng bằng Bootstrap:
Footer đơn giản (chỉ 1 dòng chữ)
Đây là loại footer tối giản, chỉ gồm một dòng văn bản nằm giữa, thường dùng thẻ <p> bên trong <footer> có text-center. Loại này thường được sử dụng trong các trang blog cá nhân, landing page, trang portfolio nhỏ.
Ví dụ:
<footer class="bg-light text-center py-3 border-top">
<p class="mb-0 text-muted">© 2025 ITViec Blog. All rights reserved.</p>
</footer>Kết quả hiển thị:
Ưu điểm:
- Gọn nhẹ, dễ triển khai
- Phù hợp với các website nhỏ, landing page
- Giúp trang web tải nhanh, không tốn tài nguyên
Nhược điểm:
- Thiếu thông tin bổ sung (liên hệ, mạng xã hội…)
- Không phù hợp với website có cấu trúc nội dung lớn
Footer chia 2-3 cột thông tin (contact, link, social)
Loại footer này dùng hệ thống Grid chia layout thành 2 hoặc 3 cột với các khối nội dung riêng biệt như:
- Cột 1: menu điều hướng
- Cột 2: thông tin liên hệ
- Cột 3: icon mạng xã hội
Loại này thường được sử dụng cho các website công ty, trang tin tức/blog chuyên nghiệp.
Ví dụ:
<footer class="bg-dark text-white pt-5 pb-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h6 class="fw-bold">Liên hệ</h6>
<p>Email: contact@abc.com</p>
</div>
<div class="col-md-4">
<h6 class="fw-bold">Điều hướng</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Giới thiệu</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Tuyển dụng</a></li>
</ul>
</div>
<div class="col-md-4 d-flex align-items-center gap-3">
<a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-instagram fs-5"></i></a>
</div>
</div>
</div>
</footer>Kết quả hiển thị:
Ưu điểm:
- Trình bày thông tin rõ ràng, phân nhóm hợp lý
- Dễ mở rộng
- Có thể responsive tốt với Grid + Flexbox
Nhược điểm:
- Cần cẩn thận để tránh bố cục rối nếu thêm quá nhiều nội dung
- Trên mobile cần đảm bảo các cột xếp dọc hợp lý
Footer có logo, slogan và form đăng ký
Footer này có cấu trúc phức tạp hơn các loại phía trên. Loại này kết hợp việc sử dụng Grid system và các thành phần để tạo ra một footer đa năng chứ nhiều thông tin như logo thương hiệu, slogan, form đăng ký/ liên hệ.
Ví dụ:
<footer class="text-white pt-5 pb-4" style="background: linear-gradient(to right, #111111, #3a0d0d);">
<div class="container">
<div class="row">
<!-- Logo + Slogan + Form đăng ký -->
<div class="col-md-4 mb-4 text-center text-md-start">
<!-- Logo -->
<img src="https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png" alt="ITviec logo" class="mb-3" height="40">
<!-- Slogan -->
<p class="mb-3">Nơi phát triển sự nghiệp IT của bạn</p>
<!-- Form đăng ký -->
<form>
<input type="email" class="form-control mb-2" placeholder="Nhập email của bạn">
<button type="submit" class="btn btn-danger w-100">Đăng ký nhận tin</button>
</form>
</div>
<!-- Liên kết điều hướng -->
<div class="col-md-5">
<div class="row">
<div class="col-6 col-lg-6 mb-3">
<h6 class="fw-bold">Việc làm IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo kỹ năng</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Theo khu vực</a></li>
</ul>
</div>
<div class="col-6 col-lg-6 mb-3">
<h6 class="fw-bold">Chuyện IT</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Theo vị trí</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Chia sẻ chuyện IT</a></li>
</ul>
</div>
</div>
</div>
<!-- Liên hệ + Icon mạng xã hội -->
<div class="col-md-3">
<h6 class="fw-bold">Liên hệ</h6>
<p class="text-white-50 mb-2">Email: <a href="mailto:blog@itviec.com" class="text-white-50 text-decoration-none">blog@itviec.com</a></p>
<!-- Social Icons -->
<div class="d-flex gap-3 mt-3">
<a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-youtube fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-linkedin fs-5"></i></a>
</div>
</div>
</div>
<!-- Dòng thông tin bản quyền -->
<p class="text-center mt-4 text-white-50 mb-0">© <script>document.write(new Date().getFullYear())</script> ITviec Blog. All rights reserved.</p>
</div>
</footer>Kết quả hiển thị:
Ưu điểm:
- Kết hợp được branding (logo + slogan), marketing (form đăng ký), điều hướng UX và social tạo nên sự chuyên nghiệp cho website
- Cung cấp đầy đủ thông tin cho người dùng khi cuộn trang xuống cuối
- Giúp trang web có sự minh bạch cao và tăng độ tin cậy đối với người dùng
Nhược điểm:
- Chiếm nhiều không gian chiều dọc vì có nhiều thành phần
- Dễ bị rối nếu thêm quá nhiều nhóm liên kết
Loại Footer này thường được sử dụng cho website doanh nghiệp, trang blog chuyên nghiệp, tạp chí online hoặc landing page sản phẩm/ SaaS.
Một số lưu ý khi sử dụng Footer trong Bootstrap
Khi xây dựng footer bằng Bootstrap, dù là đơn giản hay phức tạp, bạn cũng nên lưu ý những điều sau để đảm bảo giao diện đẹp, hiệu quả sử dụng tốt và dễ bảo trì về sau:
Footer không tự cố định ở đáy trang
Một lỗi phổ biến là khi trang chỉ có ít nội dung, footer không tự động nằm cuối màn hình mà sẽ “bám” ngay dưới nội dung trang web, tạo khoảng trống trông không đẹp mắt.
Hình ảnh ví dụ:
Cách khắc phục là dùng CSS Flexbox cho toàn trang để đẩy footer xuống đáy.
Ví dụ:
<style>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
<body>
<!-- Header -->
<header class="bg-primary text-white text-center py-4 shadow-sm">
<h1 class="h3 mb-0">Trang Giới Thiệu</h1>
</header>
<!-- Main content -->
<main class="container my-5 text-center">
<p class="lead">Nội dung trang này rất ngắn, chỉ có một đoạn văn demo.</p>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container text-center">
<div class="mb-2">
<a href="#" class="text-white-50 text-decoration-none me-3">Giới thiệu</a>
<a href="#" class="text-white-50 text-decoration-none me-3">Liên hệ</a>
<a href="#" class="text-white-50 text-decoration-none">Chính sách</a>
</div>
<div class="mb-2">
<a href="#" class="text-white me-3"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white me-3"><i class="bi bi-youtube fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-instagram fs-5"></i></a>
</div>
<p class="mb-0 text-white-50">© <script>document.write(new Date().getFullYear())</script> MyCompany. All rights reserved.</p>
</div>
</footer>
</body>Kết quả:
Sử dụng class padding (py-*, pt-*, pb-*) để tạo khoảng cách
Footer nếu không có khoảng cách sẽ khiến nội dung bí bách, khó đọc. Bạn nên sử dụng các class như: .py-4 (tạo padding trên dưới), .pt-5, .pb-3 (tạo padding riêng từng hướng)
Ưu tiên dùng class màu chữ có sẵn của Bootstrap thay vì CSS thủ công
Bootstrap cung cấp sẵn nhiều class màu chữ phù hợp cho nền tối/sáng như text-white, text-muted, text-white-50. Khi cần định dạng nội dung cho footer, bạn nên sử dụng class Bootstrap để giúp code ngắn gọn và dễ bảo trì hơn.
Responsive là bắt buộc, không phải tùy chọn
Footer là phần người dùng thấy sau cùng và thường là lúc họ đang dùng mobile. Hãy đảm bảo:
- Dùng Grid (col-12 col-md-6) để các cột tự xếp dọc trên màn hình nhỏ
- Dùng .flex-column .flex-md-row nếu sắp xếp nội dung bằng Flexbox
- Kiểm tra lại hiển thị thực tế trên các breakpoint của Bootstrap (xs, sm, md, lg…)
Câu hỏi thường gặp về Footer Bootstrap
Footer có ảnh hưởng đến SEO không?
Footer có ảnh hưởng đến SEO, dù không phải là yếu tố chính như nội dung hay tốc độ tải trang. Tuy nhiên, một footer được xây dựng tốt có thể hỗ trợ SEO theo các cách sau:
- Cấu trúc HTML5 đúng chuẩn giúp Google hiểu rõ hơn về trang: sử dụng đúng thẻ <footer> (thay vì <div id=”footer”>) giúp các công cụ tìm kiếm xác định được đâu là phần chân trang của website. Điều này giúp Google hiểu rõ cấu trúc của trang và ưu tiên nội dung chính hơn phần lặp lại như menu, bản quyền.
- Liên kết nội bộ (internal links) trong footer hỗ trợ crawl và index: Nhiều website đặt các liên kết quan trọng vào footer như: Chính sách bảo mật, điều khoản sử dụng, Giới thiệu, liên hệ, Sitemap, các chuyên mục phổ biến. Đây là cách hữu ích để tăng tính liên kết nội bộ (internal linking), giúp Googlebot dễ dàng thu thập dữ liệu toàn bộ website và phân bổ PageRank đều hơn.
- Thông tin công ty và dữ liệu có cấu trúc tăng độ tin cậy: Việc cung cấp thông tin minh bạch như tên công ty, địa chỉ, Email liên hệ, mã số thuế, giấy phép (nếu có) sẽ tăng độ tin cậy với người dùng và công cụ tìm kiếm. Nếu bạn thêm Schema markup (LocalBusiness hoặc Organization) vào phần footer, Google có thể hiển thị các chi tiết này trực tiếp trên kết quả tìm kiếm.
Footer có thể dùng cùng Navbar được không?
Bạn có thể dùng menu điều hướng (Navbar) bên trong footer với miễn là nó phù hợp với mục đích và ngữ cảnh của trang web. Ví dụ:
<footer class="bg-light py-4">
<div class="container">
<nav class="nav justify-content-center">
<a class="nav-link text-muted" href="#">Giới thiệu</a>
<a class="nav-link text-muted" href="#">Liên hệ</a>
<a class="nav-link text-muted" href="#">Chính sách</a>
</nav>
<p class="text-center text-muted mb-0">© 2025 MyWebsite</p>
</div>
</footer>Tuy nhiên điều này không được khuyến khích. Và cần lưu ý những điều sau khi phải sử dụng:
- Không nên dùng Navbar đầy đủ với menu sổ (dropdown), hamburger,… trong footer vì sẽ gây nặng nề, rối mắt.
- Footer chỉ nên chứa menu đơn giản hoặc nhóm liên kết, không cần phải dùng đến navbar-expand, navbar-toggler…
Ví dụ không nên dùng navbar trong footer:
<footer class="navbar navbar-expand-lg navbar-dark bg-dark mt-5">
<div class="container-fluid">
<a class="navbar-brand" href="#">© 2025 MyCompany</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#footerNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="footerNavbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-white" href="#">Giới thiệu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="footerDropdown" role="button" data-bs-toggle="dropdown">
Chính sách
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Bảo mật</a></li>
<li><a class="dropdown-item" href="#">Điều khoản</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Liên hệ</a>
</li>
</ul>
</div>
</div>
</footer>Vấn đề:
- Sử dụng navbar-expand-lg + toggler không cần thiết trong footer
- Footer không nên có biểu tượng hamburger hoặc menu sổ
Hình ảnh kết quả (trông giống như một header):
Ví dụ về navbar ở footer nhưng được sử dụng hợp lý:
<footer class="navbar bg-light py-4 border-top mt-5">
<div class="container flex-column">
<ul class="navbar-nav flex-row justify-content-center mb-2">
<li class="nav-item me-3">
<a class="nav-link text-muted px-2" href="#">Giới thiệu</a>
</li>
<li class="nav-item me-3">
<a class="nav-link text-muted px-2" href="#">Chính sách</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted px-2" href="#">Liên hệ</a>
</li>
</ul>
<div class="mb-2 text-center">
<a href="#" class="text-muted me-3"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-muted me-3"><i class="bi bi-youtube fs-5"></i></a>
<a href="#" class="text-muted"><i class="bi bi-instagram fs-5"></i></a>
</div>
<p class="text-muted text-center mb-0">© 2025 MyCompany. All rights reserved.</p>
</div>
</footer>Trong đó:
- Tận dụng layout gọn gàng sẵn có của Navbar với class .navbar, . bg-light (không dùng expand hoặc toggler)
- Bố trí các phần theo chiều dọc trong container trung tâm bằng .flex-column, .container
- .navbar-nav, .flex-row để hiển thị các liên kết thành 1 dòng ngang
Kết quả:
Làm sao để chèn icon vào footer?
Để chèn icon vào footer, bạn có thể dùng Bootstrap Icons hoặc Font Awesome (hoặc các thư viện icon khác). Chỉ cần chèn đúng class vào thẻ <i> là hiển thị được icon. Ví dụ:
<!-- Social Icons -->
<div class="d-flex gap-3 mt-3">
<a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-youtube fs-5"></i></a>
<a href="#" class="text-white"><i class="bi bi-linkedin fs-5"></i></a>
</div>Lưu ý: bạn có thể dùng .fs-* để tăng kích thước icon, .gap-* để tạo khoảng cách giữa các icon, và .text-white để icon nổi bật trên nền tối.
Tổng Kết
Footer là một phần không thể thiếu trong hầu hết các giao diện website hiện đại. Với Bootstrap, bạn có thể dễ dàng xây dựng những footer đẹp mắt, responsive và chuyên nghiệp nhờ vào hệ thống Grid linh hoạt, Flexbox tiện dụng cùng các class hỗ trợ định dạng nhanh chóng.
Qua bài viết này, ITviec hi vọng bạn đã nắm được cách tạo footer bằng Bootstrap, từ các thành phần cơ bản như bản quyền, menu phụ, social icon đến form đăng ký, để áp dụng hiệu quả vào website của mình.
