Trong thiết kế web ngày nay, yêu cầu về giao diện responsive để hiển thị tốt trên mọi thiết bị từ điện thoại, tablet cho đến máy tính gần như là điều bắt buộc. Bootstrap giúp việc này trở nên đơn giản hơn rất nhiều nhờ triết lý thiết kế “mobile-first” và hệ thống lớp tiện ích responsive cực kỳ linh hoạt.
Đọc bài viết này để hiểu rõ:
- Tổng quan về responsive trong Bootstrap
- Cách sử dụng lớp tiện ích để hiển thị, ẩn, căn lề, padding/margin responsive
- Cách responsive các thành phần như navbar, ảnh, bảng
- Cách tùy chỉnh responsive nâng cao
- Những lưu ý quan trọng khi làm việc với responsive trong Bootstrap
Responsive Bootstrap là gì?
Responsive là gì?
Responsive Web Design (thiết kế web đáp ứng) là cách thiết kế trang web sao cho giao diện có thể tự động thay đổi để phù hợp với kích thước màn hình của thiết bị mà người dùng đang sử dụng (điện thoại, tablet, laptop, máy tính để bàn).
Điều này có nghĩa là nội dung trên trang có thể co giãn, sắp xếp lại, hoặc thậm chí là ẩn đi một số phần để đảm bảo người dùng luôn thấy được thông tin một cách dễ đọc và dễ thao tác nhất.
Thiết kế responsive giúp website trông đẹp và hoạt động tốt trên mọi thiết bị mà không cần tạo nhiều phiên bản khác nhau. Các phần tử như menu có thể chuyển thành nút bấm dạng thả xuống (dropdown), hoặc vuốt sang trái/phải để truy cập. Việc này chủ yếu được thực hiện bằng HTML và CSS – đặc biệt là khi dùng các phiên bản mới như HTML5 và CSS3.
Đọc thêm: Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5
Vì sao Responsive quan trọng trong thiết kế web?
Ngày nay, người dùng có thể truy cập web từ máy tính, điện thoại, tablet, laptop với đủ mọi kích thước màn hình khác nhau. Nếu website không tự điều chỉnh hiển thị cho phù hợp, nội dung sẽ bị vỡ layout, chữ quá nhỏ, hình ảnh tràn ra ngoài hoặc khó thao tác.
Hình ảnh ví dụ về giao diện không responsive (nội dung bị tràn khỏi viewport).
Responsive giúp website:
- Hiển thị đẹp và dễ đọc trên mọi thiết bị
- Giữ trải nghiệm người dùng nhất quán, dù họ dùng màn hình nhỏ hay lớn
- Tăng thời gian người dùng ở lại trang, giảm tỷ lệ thoát trang
- Tốt cho SEO, vì Google ưu tiên các trang web thân thiện với thiết bị di động
- Tiết kiệm thời gian phát triển, vì chỉ cần làm một phiên bản giao diện thay vì nhiều bản riêng cho desktop và mobile
Hình ảnh giao diện có Bootstrap Responsive (nội dung được canh chỉnh nằm trong viewport).
Các breakpoint Responsive trong Bootstrap (xs, sm, md, lg, xl, xxl)
Breakpoint trong Bootstrap là các điểm ngắt giúp xác định khi nào bố cục hoặc giao diện nên thay đổi để phù hợp với độ rộng của thiết bị. Bootstrap sử dụng 6 breakpoint mặc định tương ứng với các kích thước thiết bị phổ biến. Mỗi breakpoint cho phép bạn kiểm soát cách hiển thị của phần tử tại một mức độ rộng màn hình nhất định trở lên. Dưới đây là chi tiết từng loại:
xs – Extra small (rất nhỏ)
Áp dụng cho điện thoại di động (chiều rộng màn hình dưới 576px), đây là mức mặc định cho mọi phần tử.
sm – Small (nhỏ)
Được áp dụng cho màn hình điện thoại lớn hoặc thiết bị có chiều rộng từ 576px trở lên.
Ví dụ dùng col-sm-* khi bạn muốn bố cục bắt đầu chia cột từ màn hình điện thoại lớn trở lên:
<div class="col-sm-6"> Cột này chiếm 6/12 chiều rộng khi màn hình ≥ 576px </div>
md – Medium (vừa)
Áp dụng cho máy tính bảng và thiết bị cỡ trung. Đây là một trong các breakpoint phổ biến nhất, thường dùng để phân biệt giữa mobile và desktop.
Ví dụ hiển thị một nội dung khi ở màn hình ipad trở lên:
<div class="d-none d-md-block"> Hiện trên máy tính bảng trở lên, ẩn trên điện thoại </div>
lg – Large (lớn)
Áp dụng cho màn hình laptop, màn hình desktop nhỏ (từ 992px trở lên). Breakpoint này thường dùng để điều chỉnh layout desktop mà vẫn giữ sự gọn gàng ở thiết bị nhỏ.
Ví dụ:
<div class="text-center text-lg-start"> Căn giữa ở mobile/tablet, căn trái ở desktop </div>
xl – Extra large (rất lớn)
Được sử dụng trong các màn hình rộng như desktop lớn, màn hình 20 inch trở lên.
Ví dụ dùng xl khi bạn muốn bố cục “mở rộng” ở những màn hình lớn mà không ảnh hưởng thiết bị nhỏ hơn:
<div class="container-xl"> Container này chỉ full width khi đạt từ 1200px trở lên </div>
xxl – Extra extra large (rất rất lớn)
Áp dụng cho màn hình siêu rộng (chiều rộng từ 1400px trở lên). Thường được sử dụng khi thiết kế website cho môi trường hiển thị cực lớn như TV, bảng điều khiển…
Ví dụ:
<div class="col-12 col-xxl-8"> Chiếm toàn bộ chiều rộng ở thiết bị nhỏ, nhưng chỉ 8/12 ở siêu màn hình </div>
Dưới đây là bảng tổng hợp các breakpoint mặc định trong Bootstrap:
| Tên gọi | Ký hiệu | Kích thước tối thiểu |
| Extra small (rất nhỏ) | xs | <576px (tự động áp dụng, không cần khai báo) |
| Small (nhỏ) | sm | ≥576px |
| Medium (vừa) | md | ≥768px |
| Large (lớn) | lg | ≥992px |
| Extra large (rất lớn) | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Ví dụ sử dụng Responsive kết hợp với các lớp tiện ích
Hiển thị và ẩn phần tử theo kích thước
Bootstrap cung cấp các lớp d-* để kiểm soát hiển thị (display) của phần tử, gồm 2 phần chính là:
- d-none: ẩn phần tử (tương đương display: none;)
- d-block: hiển thị phần tử dưới dạng khối (tương đương display: block;)
- d-flex: biến phần tử thành một flex container (tương đương display: flex;)
Để kiểm soát việc hiển thị hoặc ẩn phần tử theo màn hình tương ứng, bạn có thể kết hợp các lớp d-* và breakpoint theo cú pháp:
d-<breakpoint>-<display value>
Ví dụ: Hiển thị và ẩn phần tử theo kích thước màn hình:
Ẩn phần tử trên tất cả các thiết bị, chỉ hiển thị khi màn hình lớn từ lg trở lên (≥992px).
<div class="d-none d-lg-block"> ITViec Blog (Hiển thị từ màn hình ≥992px) </div>
Ẩn phần tử trên màn hình rất nhỏ (xs), hiển thị trên thiết bị từ sm trở lên (tablet, desktop).
<div class="d-none d-sm-block"> ITViec Blog (Ẩn ở xs (dưới 576px), hiển thị từ sm (≥576px)) </div>
Chỉ hiển thị phần tử trên thiết bị nhỏ (mobile) có chiều rộng dưới 576px, ẩn trên tablet trở lên.
<div class="d-block d-sm-none"> ITViec Blog (Chỉ hiển thị dưới 576px) </div>
Kết quả hiển thị của những đoạn code trên:
Ở màn hình điện thoại:
Ở màn hình tablet:
Ở màn hình desktop:
Canh lề, căn giữa với responsive
Bootstrap hỗ trợ các lớp text-{alignment} để bạn căn văn bản trái (start), giữa (center) hoặc phải (end) tùy theo kích thước thiết bị. Việc kết hợp với breakpoint theo cú pháp: text-{breakpoint}-{alignment} sẽ giúp bạn dễ dàng kiểm soát canh lề cho phần tử.
Đọc thêm: Text Bootstrap: 10+ cách định dạng văn bản hiệu quả với Bootstrap
Ví dụ để căn giữa văn bản trên mobile, trái ở tablet, và phải ở desktop, bạn có thể sử dụng code sau:
<p class="text-center text-sm-start text-md-end">ITViec Blog - đây là nội dung được canh lề</p>
Kết quả hiển thị:
Ở màn hình điện thoại:
Ở màn hình tablet:
Đối với những phần tử có display: flex, bạn có thể kiểm soát thứ tự này cho từng màn hình thiết bị theo ý muốn bằng cách kết hợp nhiều lớp justify-content-* với từng breakpoint theo cú pháp:
justify-content-{breakpoint}-{alignment}
Ví dụ, để một nút nằm bên trái ở mobile, nằm ở giữa ở tablet, nằm bên phải ở desktop, bạn có thể làm như sau:
<div class="d-flex justify-content-start justify-content-sm-center justify-content-md-end"> <button class="btn btn-primary">ITViec Button</button> </div>
Trong đó:
- Phần tử div có display flex (d-flex)
- justify-content-start: định dạng nút nằm bên trái (theo thiết kế Left To Right), sử dụng breakpoint mặc định là xs (áp dụng cho tất cả màn hình nếu không có breakpoint cao hơn)
- justify-content-sm-center: định dạng canh giữa cho nút khi ở màn hình ≥576px
- justify-content-md-end: định dạng canh phải cho nút khi ở màn hình ≥768px
Kết quả:
Ở màn hình mobile:
Ở màn hình tablet:
Ở màn hình desktop:
Padding, margin, và kích thước responsive
Bootstrap cung cấp hệ thống lớp spacing tiện ích (spacing utilities) cực kỳ linh hoạt để thiết lập padding, margin và kích thước phần tử. Các lớp này có thể được điều chỉnh theo từng breakpoint, giúp giao diện hiển thị đẹp mắt trên mọi loại thiết bị theo cú pháp sau:
{property}{sides}-{breakpoint}-{size}
Trong đó:
- property: m = margin, p = padding
- Sides: t (top), b (bottom), s (start), e (end), x (start & end), y (top & bottom), nếu không có giá trị, nghĩa là áp dụng cho tất cả các hướng
- breakpoint (tuỳ chọn): sm, md, lg, xl, xxl
- size: từ 0 đến 5, hoặc auto
Ví dụ, để điều chỉnh một khối nội dung có margin-top lớn hơn khi hiển thị ở màn hình tablet trở lên và tăng padding left/right khi hiển thị ở màn hình desktop ta làm như sau:
<div class="mt-3 mt-md-5 px-2 px-lg-5">ITViec Blog - spacing utilities with responsive </div>
Trong đó:
- mt-3: định dạng margin-top 1rem ở bất kì màn hình nào
- mt-md-5: bổ sung định dạng margin-top 3rem ở màn hình có kích thước ≥ 768px
- px-2: định dạng padding 2 bên 0.5rem ở bất kì màn hình nào
- px-lg-5: bổ sung định dạng padding 2 bên 3rem ở màn hình có kích thước ≥ 992px
Kết quả hiển thị:
Ở màn hình mobile:
Ở màn hình tablet:
Ở màn hình desktop:
Responsive với Grid System
Grid system (hệ thống lưới) là thành phần chủ đạo về thiết kế responsive trong Bootstrap. Nhờ hệ thống lưới 12 cột và khả năng kết hợp linh hoạt với các breakpoint, bạn có thể dễ dàng xây dựng bố cục co giãn mượt mà theo từng kích thước màn hình.
Ví dụ về grid cơ bản:
<div class="container"> <div class="row"> <div class="col">Cột 1</div> <div class="col">Cột 2</div> </div> </div>
Trong đó, 2 cột sẽ luôn chia đều 50% độ rộng, dù bất kể ở màn hình nào.
Responsive theo breakpoint trong Grid system
Bootstrap cho phép bạn chỉ định số cột theo từng độ rộng màn hình bằng cách sử dụng breakpoint trong class col theo cú pháp sau:
col-{breakpoint}-{số_cột}
Ví dụ, để một danh sách hiển thị 2 cột mỗi dòng trên mobile, và 4 cột trên tablet trở lên, bạn có thể sử dụng code sau:
<div class="container"> <div class="row"> <div class="col-6 col-md-3">Cột 1</div> <div class="col-6 col-md-3">Cột 2</div> <div class="col-6 col-md-3">Cột 3</div> <div class="col-6 col-md-3">Cột 4</div> </div> </div>
Trong đó:
- col-6: trên mobile (<768px), mỗi cột chiếm 50% chiều rộng (2 cột/1 hàng)
- col-md-3: từ tablet trở lên (≥768px), mỗi cột chiếm 3/12 = 25% (4 cột/1 hàng)
Kết quả:
Ở màn hình mobile:
Ở màn hình tablet trở lên:
Responsive trong các thành phần giao diện
Bootstrap không chỉ hỗ trợ responsive cho layout, spacing và căn chỉnh, mà còn tích hợp khả năng đáp ứng linh hoạt với nhiều loại thành phần giao diện phổ biến như navbar, hình ảnh và bảng dữ liệu. Dưới đây là cách bạn có thể triển khai chúng một cách hiệu quả.
Responsive với navbar
Trong Bootstrap, thanh điều hướng (navbar) có thể thu gọn (collapse) thành một nút bấm trên các màn hình nhỏ. Để làm được điều này, bạn sử dụng các lớp:
- .navbar-toggler: nút bấm để mở/đóng menu.
- .navbar-collapse: phần nội dung sẽ ẩn/hiện khi nhấn nút.
- .navbar-expand-{breakpoint}: xác định khi nào thanh điều hướng sẽ mở rộng (hiển thị đầy đủ menu) thay vì thu gọn.
Cách hoạt động:
Nếu bạn muốn menu hiển thị đầy đủ trên màn hình từ kích thước trung bình (md) trở lên, dùng:
<nav class="navbar navbar-expand-md">...</nav>
Nếu bạn muốn menu luôn hiển thị đầy đủ (không bao giờ thu gọn), dùng:
<nav class="navbar navbar-expand">...</nav>
Nếu bạn muốn menu luôn thu gọn, không cần thêm .navbar-expand:
<nav class="navbar">...</nav>
Ví dụ, để tạo ra một thanh menu sẽ hiển thị đầy đủ ở màn hình lớn và thu gọn ở màn hình mobile, bạn có thể sử dụng code sau:
<nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">ITViec Blog</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu1"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu1"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Trang chủ</a></li> <li class="nav-item"><a class="nav-link" href="#">Giới thiệu</a></li> </ul> </div> </div> </nav>
Trong đó, sử dụng navbar-expand-sm để mở navbar khi hiển thị trên màn hình ≥ 576px. Kết quả:
Ở màn hình < 576px (mobile):
Ở màn hình ≥ 576px:
Responsive trong hình ảnh (img-fluid, ratio)
Trong Bootstrap, để hình ảnh hiển thị đẹp trên mọi kích thước màn hình, bạn chỉ cần thêm lớp .img-fluid. Lớp này áp dụng các thuộc tính max-width: 100%; và height: auto; cho hình ảnh, giúp nó điều chỉnh hình ảnh sao cho không vượt quá chiều rộng của phần tử chứa nó, đồng thời giữ nguyên tỷ lệ, giúp hình ảnh luôn hiển thị sắc nét và phù hợp trên mọi thiết bị.
Ví dụ:
<img src="https://itviec.com/assets/logo_black_text-04776232a37ae9091cddb3df1973277252b12ad19a16715f4486e603ade3b6a4.png" class="img-fluid" alt="Responsive image">
Responsive với bảng (table-responsive)
Khi hiển thị bảng dữ liệu trên thiết bị di động, một vấn đề thường gặp là bảng quá rộng và bị tràn khỏi màn hình. Bootstrap giải quyết vấn đề này bằng cách cung cấp một công cụ cực kỳ tiện lợi là .table-responsive.
Bạn có thể tạo ra một table responsive bằng cách bọc bảng trong một thẻ div có class .table-responsive. Ví dụ:
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Họ tên</th> <th>Email</th> <th>Địa chỉ</th> <th>Số điện thoại</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Nguyễn Văn A</td> <td>[email protected]</td> <td>Hà Nội</td> <td>0123456789</td> </tr> </tbody> </table> </div>
Kết quả: Trên mobile, bảng sẽ có thanh cuộn ngang, giúp người dùng xem đầy đủ nội dung mà không làm vỡ bố cục:
Bạn có thể giới hạn bảng chỉ responsive tới một kích thước nhất định, bằng cách sử dụng các class theo breakpoint với cú pháp sau:
.table-responsive-{breakpoint}
Ví dụ:
<div class="table-responsive-md"> <!-- Bảng sẽ chỉ cuộn ngang từ màn hình nhỏ hơn 768px --> </div>
Tùy chỉnh responsive nâng cao trong Bootstrap
Bootstrap cung cấp hệ thống responsive mặc định rất mạnh mẽ, nhưng để xây dựng những giao diện phức tạp, chuyên nghiệp, bạn sẽ cần đến tùy chỉnh responsive nâng cao.
Tạo utility class responsive riêng
Giả sử bạn muốn có một class fs-responsive để thay đổi font size theo màn hình, bạn có thể làm như sau:
.fs-responsive { font-size: 14px; @include media-breakpoint-up(md) { font-size: 16px; } @include media-breakpoint-up(xl) { font-size: 18px; } @include media-breakpoint-up(xxxl) { font-size: 20px; } }
Sau đó biên dịch file SCSS của bạn (bằng Webpack, Vite, Laravel Mix hoặc Sass CLI) để sử dụng class này trong HTML như những class responsive khác.
Thêm hoặc sửa breakpoint tùy chỉnh
Bootstrap sử dụng Sass để quản lý breakpoints, vì vậy bạn hoàn toàn có thể chỉnh sửa hoặc thêm breakpoint mới trong quá trình biên dịch Bootstrap.
Ví dụ để bổ sung thêm 1 breakpoint cho màn hình cực lớn (>= 1600px):
// Ghi đè breakpoints trước khi import $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, // Thêm breakpoint tùy chỉnh xxxl: 1600px ); // Import Bootstrap core @import "node_modules/bootstrap/scss/bootstrap";
Trong đó, bạn bổ sung thêm xxxl: 1600px; và thực hiện import nội dung chỉnh sửa vào module Bootstrap. Sau đó bạn có thể sử dụng breakpoint mới này để tạo các class tiện ích riêng cho xxxl.
@include media-breakpoint-up(xxxl) { .text-xxxl-start { text-align: left !important; } }
Những lưu ý khi thiết kế responsive với Bootstrap
Bootstrap là một framework mạnh mẽ giúp tạo giao diện responsive nhanh chóng. Tuy nhiên, để tận dụng tối đa khả năng của nó, bạn cần nắm được những nguyên tắc và lưu ý quan trọng khi thiết kế giao diện responsive. Dưới đây là danh sách những điều bạn nên lưu ý khi làm việc với Bootstrap:
- Nắm rõ hệ thống Breakpoint của Bootstrap: Việc nắm vững các breakpoints của Bootstrap giúp bạn dễ dàng phân phối định dạng phù hợp cho từng kích thước. Tránh việc chồng chéo CSS.
- Tận dụng sức mạnh của Grid system: Hệ thống .container, .row, .col giúp bạn chia layout linh hoạt, và tự động co giãn theo kích thước thiết bị. Việc tự tạo layout bằng float, position: absolute, hay width: % dễ khiến giao diện bị vỡ ở các độ rộng khác nhau.
- Không lạm dụng !important: Sử dụng !important để ghi đè class Bootstrap có thể gây lỗi không mong muốn về responsive (Vì thuộc tính CSS sử dụng !important sẽ không bị ghi đè bởi định dạng khác. Thay vào đó, hãy sử dụng đúng breakpoint và class tiện ích mà Bootstrap cung cấp.
- Không bỏ qua overflow và cắt nội dung: Khi dùng .table-responsive hoặc layout có nhiều cột, hãy kiểm tra tràn nội dung và đảm bảo overflow không bị chặn.
Câu hỏi thường gặp về Bootstrap responsive
Bootstrap có hỗ trợ mobile-first không?
Bootstrap 5 được xây dựng theo triết lý “mobile-first”, nghĩa là giao diện sẽ ưu tiên hiển thị tốt trên thiết bị nhỏ trước, sau đó mới mở rộng cho các màn hình lớn hơn bằng các breakpoint (sm, md, lg…). Vì vậy, nếu bạn không chỉ định breakpoint, class sẽ mặc định áp dụng cho thiết bị nhỏ (điện thoại).
Breakpoint nào là phổ biến nhất?
md (≥768px) là breakpoint phổ biến và được dùng nhiều nhất. Vì đây là ngưỡng chuyển tiếp giữa mobile và tablet, dãn đến nhiều bố cục cần thay đổi từ dạng dọc (mobile) sang ngang (tablet trở lên). Một số class hay dùng tại md: d-none d-md-block, col-12 col-md-6, text-md-start, v.v.
Có thể tự định nghĩa breakpoint mới không?
Bootstrap cho phép tùy chỉnh breakpoint nếu bạn sử dụng bản SCSS (Sass source code). Bạn có thể sửa $grid-breakpoints trong file CSS để thêm breakpoint mới như sau:
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, xxxl: 1600px // breakpoint mới );
Sau đó bạn có thể viết các class responsive tùy chỉnh cho kích thước mới bằng cách dùng:
@include media-breakpoint-up(xxxl)
Làm sao ẩn phần tử trên điện thoại nhưng hiển thị ở desktop?
Bạn có thể sử dụng kết hợp class d-none và d-{breakpoint}-block. Ở trường hợp này, để hiển thị phần tử từ màn hình desktop bạn có thể sử dụng breakpoint md:
<div class="d-none d-md-block"> Phần tử này ẩn trên mobile, hiện từ tablet trở lên (≥768px) </div>
Tổng kết
Responsive là yếu tố cốt lõi trong thiết kế web hiện đại, giúp giao diện hiển thị tối ưu trên mọi thiết bị từ điện thoại đến màn hình lớn. Với hệ thống breakpoint rõ ràng, các lớp tiện ích mạnh mẽ và khả năng tùy chỉnh linh hoạt, Bootstrap mang đến cho lập trình viên một công cụ toàn diện để xây dựng giao diện responsive hiệu quả. Qua bài viết này, ITviec hy vọng đã mang đến cho bạn đọc những thông tin bổ ích về cách sử dụng responsive trong Bootstrap, các lưu ý và cách mở rộng hệ thống responsive theo nhu cầu thực tế.
Đọc thêm: Bootstrap là gì? 7 tính năng cần biết trong Bootstrap