Trong thiết kế giao diện web, màu sắc không chỉ đơn thuần là yếu tố thẩm mỹ mà nó còn ảnh hưởng lớn đến trải nghiệm người dùng, khả năng đọc hiểu nội dung và nhận diện thương hiệu. Bootstrap cung cấp một hệ thống màu sắc mạnh mẽ giúp quản lý và sử dụng màu sắc một cách dễ dàng, linh hoạt và nhất quán. Tìm hiểu chi tiết cách sử dụng hệ thống màu Bootstrap color.
Đọc bài viết này để hiểu rõ:
- Cách Bootstrap hỗ trợ quản lý màu sắc
- Toàn bộ hệ thống màu mà Bootstrap cung cấp
- Cách tùy biến màu sắc theo brand của riêng bạn
- Những lưu ý khi sử dụng màu trong dự án thật
Color trong Bootstrap là gì?
Vai trò của hệ thống màu sắc trong thiết kế web
Hệ thống màu sắc trong thiết kế web đóng vai trò rất quan trọng. Màu sắc không chỉ làm tăng tính thẩm mỹ mà còn ảnh hưởng trực tiếp đến trải nghiệm người dùng (UX) và tính hiệu quả trong giao tiếp thông tin của trang web. Một trang web sử dụng hệ thống màu tốt sẽ giúp:
- Tăng tính nhận diện thương hiệu
- Cải thiện khả năng đọc (ví dụ: phân biệt rõ ràng giữa chữ và nền)
- Truyền đạt cảm xúc (ví dụ: thông báo màu xanh lá = thành công, đỏ = cảnh báo)
- Điều hướng người dùng một cách trực quan hơn
Bootstrap hỗ trợ quản lý màu sắc như thế nào?
Bootstrap cung cấp một hệ thống màu sắc rất linh hoạt thông qua một loạt các lớp tiện ích (utility class) và SCSS Variables. Bootstrap color giúp truyền tải ý nghĩa bằng màu sắc thông qua một số lớp tiện ích màu, tạo kiểu cho văn bản, nút bấm, đường viền, màu nền, đồng thời hỗ trợ tạo kiểu cho liên kết với hiệu ứng khi di chuột.
Bootstrap xây dựng các lớp tiện ích màu sắc thông qua hệ thống màu chủ đề (theme colors), kết hợp với các thành phần có thể thay đổi màu sắc trong HTML.
Đọc thêm: Bootstrap là gì? 7 tính năng cần biết trong Bootstrap
Tổng quan về hệ thống màu trong Bootstrap
Hệ thống màu chủ đề (Theme colors) trong Bootstrap
Bootstrap định nghĩa sẵn một tập hợp các màu chủ đề (theme colors) phục vụ cho từng mục đích khác nhau bao gồm:
| Tên chủ đề | Màu sắc hiển thị | Ý nghĩa |
| primary |  |
Màu chính (primary color) đại diện cho thương hiệu hoặc hành động chính trong giao diện.
|
| secondary |  |
Dùng cho những phần không quan trọng bằng màu chính hoặc bổ trợ.
Ví dụ: Nút “Huỷ”, “Bỏ qua”, Label phụ, mô tả trạng thái nhỏ |
| success |  |
Báo hiệu điều gì đó diễn ra đúng hoặc thành công.
Ví dụ: Alert thông báo gửi form thành công, Badge xác nhận (“Đã thanh toán”, “Hợp lệ”), Icon check |
| danger |  |
Cảnh báo lỗi nghiêm trọng, hành động xóa, hoặc thao tác không thể hoàn tác.
Ví dụ: Thông báo lỗi, invalid form, nút xoá tài khoản, viền hoặc chữ báo lỗi |
| warning |  |
Cảnh báo người dùng về một điều cần lưu ý, chưa phải lỗi.
Ví dụ: Badge trạng thái “Sắp hết hạn”, Tooltip hoặc form cần kiểm tra lại |
| info |  |
Cung cấp thông tin hỗ trợ, trung lập, không tích cực hay tiêu cực.
Ví dụ: Alert thông báo hệ thống, message từ admin, label mô tả trạng thái |
| light |  |
Tạo vùng nền nhẹ nhàng cho phần nội dung.
Ví dụ: làm màu nền background, card, modal sáng. |
| dark |  |
Dùng khi muốn tạo nhấn mạnh, làm nổi nội dung sáng trên nền tối.
Ví dụ: Header, footer màu tối, Modal nền đen |
Với những chủ đề này, bạn có thể sử dụng ở hầu hết các component: button, alert, badge, form… theo cú pháp chung:
<tên component>-<tên chủ đề>
Ví dụ sử dụng trong button và alert:
<button class="btn btn-success">Thành công</button> <div class="alert alert-danger">Lỗi nghiêm trọng</div>
Lớp màu văn bản (Text colors)
Bootstrap 5 cung cấp các lớp tiện ích để thay đổi màu văn bản mà không cần viết CSS. Các lớp bắt đầu bằng text- và sử dụng các màu chủ đề như: primary, success, danger, v.v. Cú pháp chung:
text-{màu chủ đề}
Danh sách các lớp màu văn bản trong bootstrap:
Text-primary
Tạo màu xanh dương cho văn bản, thường được sử dụng để nhấn mạnh, dùng cho nội dung chính.
Ví dụ:
<p class="text-primary">ITViec Blog - text-primary</p>
Text-secondary
Văn bản có màu xám nhạt, sử dụng cho những nội dung phụ.
Ví dụ:
<p class="text-secondary">ITViec Blog - text-secondary</p>
Text-success
Văn bản có màu xanh lá, sử dụng để thông báo một nội dung thành công. Ví dụ:
<p class="text-success">ITViec Blog - text-success</p>
Text-danger
Văn bản có màu đỏ, sử dụng trong các cảnh báo lỗi, nội dung nguy hiểm, cần chú ý. Ví dụ:
<p class="text-danger">ITViec Blog - text-danger</p>
Text-warning
Văn bản có màu cam vàng, sử dụng trong các cảnh bảo nhẹ, thông báo chú ý. Ví dụ:
<p class="text-warning">ITViec Blog - text-warning</p>
Text-info
Văn bản có màu xanh nhạt, sử dụng cho thông tin bổ sung. Ví dụ:
<p class=“text-info“>ITViec Blog – text-info</p>
Text-light
Văn bản có màu trắng nhạt, thường được sử dụng trên nền tối. Ví dụ:
<p class="text-light bg-dark">ITViec Blog - text-light (trên nền tối)</p>
Text-dark
Văn bản có màu xám đậm, thường sử dụng trên nền sáng. Ví dụ:
<p class="text-dark">ITViec Blog - text-dark</p>
Text-body
Màu mặc định của body (thường là đen/xám), sử dụng trong các văn bản thông thường trên trang web. Ví dụ:
<p class="text-body">ITViec Blog - text-body</p>
Text-muted
Văn bản màu xám mờ, thường dùng cho nội dung bị disabled, ít quan trọng. Ví dụ:
<p class="text-muted">ITViec Blog - text-muted</p>
Text-white
Văn bản màu trắng, sử dụng trên nền tối. Ví dụ:
<p class="text-white bg-secondary">ITViec Blog - text-white (trên nền xám)</p>
Text-black-50
Văn bản có màu đen với 50% độ mờ (Bootstrap 5). Ví dụ:
<p class="text-black-50">ITViec Blog - text-black-50</p>
Text-white-50
Văn bản màu trắng với 50% độ mờ (Bootstrap 5). Ví dụ:
<p class="text-white-50 bg-dark">ITViec Blog - text-white-50 (trên nền tối)</p>
Lớp màu nền (Background colors)
Bootstrap 5 cung cấp các lớp tiện ích để thay đổi màu nền cho phần tử HTML mà không cần viết CSS. Các lớp này bắt đầu bằng bg- và sử dụng các màu chủ đề tương tự như text-color như: primary, success, danger, v.v.
Cú pháp chung:
bg-{màu chủ đề}
Danh sách các lớp màu nền trong Bootstrap:
bg-primary
Nền màu xanh dương chủ đạo, thường dùng để làm nổi bật phần nội dung chính. Ví dụ:
<p class="bg-primary text-white">ITViec Blog - bg-primary</p>
bg-secondary
Nền màu xám nhạt, dùng cho các nội dung phụ hoặc khối nền phụ trợ. Ví dụ:
<p class="bg-secondary text-white">ITViec Blog - bg-secondary</p>
bg-success
Nền màu xanh lá, dùng cho các thông báo thành công, trạng thái tốt. Ví dụ:
<p class="bg-success text-white">ITViec Blog - bg-success</p>
bg-danger
Nền màu đỏ, dùng trong các cảnh báo lỗi, thông báo nguy hiểm. Ví dụ:
<p class="bg-danger text-white">ITViec Blog - bg-danger</p>
bg-warning
Nền màu vàng/cam, dùng trong cảnh báo nhẹ hoặc các thông báo cần chú ý. Ví dụ:
<p class="bg-warning text-dark">ITViec Blog - bg-warning</p>
bg-info
Nền màu xanh nhạt, thường dùng cho thông tin bổ sung. Ví dụ:
<p class="bg-info text-dark">ITViec Blog - bg-info</p>
bg-light
Nền màu trắng nhạt, thích hợp với giao diện sáng, dùng làm nền cho nội dung tối. Ví dụ:
<p class="bg-light text-dark">ITViec Blog - bg-light</p>
bg-dark
Nền màu xám đậm, thích hợp làm nền chính hoặc nền chân trang, cần kết hợp với chữ sáng. Ví dụ:
<p class="bg-dark text-white">ITViec Blog - bg-dark</p>
bg-white
Nền màu trắng thuần túy, thường dùng để làm nền cho card, section sáng. Ví dụ:
<p class="bg-white text-dark border">ITViec Blog - bg-white</p>
bg-transparent
Không có màu nền, trong suốt. Dùng khi muốn giữ nguyên nền gốc hoặc làm lớp phủ. Ví dụ:
<p class="bg-transparent text-dark">ITViec Blog - bg-transparent</p>
Lớp màu viền (Border colors)
Bootstrap 5 cung cấp các lớp tiện ích để thay đổi màu viền cho phần tử HTML. Các lớp này bắt đầu bằng border- với cú pháp chung là:
border border-{màu chủ đề}
Lưu ý: Phải có lớp border để áp dụng màu, bởi vì border-{color} chỉ đổi màu viền, không tạo viền nếu chưa có.
Danh sách các lớp màu viền trong Bootstrap:
border-primary
Viền màu xanh dương chủ đạo, dùng để làm nổi bật phần tử chính. Ví dụ:
<p class="border border-primary">ITViec Blog - border-primary</p>
border-secondary
Viền màu xám nhạt, dùng cho phần tử phụ. Ví dụ:
<p class="border border-secondary">ITViec Blog - border-secondary</p>
border-success
Viền màu xanh lá, thể hiện trạng thái tích cực hoặc hoàn thành. Ví dụ:
<p class="border border-success">ITViec Blog - border-success</p>
border-danger
Viền màu đỏ, thường dùng để cảnh báo lỗi hoặc nội dung quan trọng. Ví dụ:
<p class="border border-danger">ITViec Blog - border-danger</p>
border-warning
Viền màu vàng/cam, thích hợp với cảnh báo nhẹ. Ví dụ:
<p class="border border-warning">ITViec Blog - border-warning</p>
border-info
Viền màu xanh nhạt, dùng cho nội dung bổ sung hoặc thông tin hỗ trợ. Ví dụ:
<p class="border border-info">ITViec Blog - border-info</p>
border-light
Viền màu trắng nhạt, chỉ thấy rõ trên nền tối. Ví dụ:
<p class="border border-light">ITViec Blog - border-dark</p>
border-dark
Viền màu xám đậm, phù hợp với nền sáng. Ví dụ:
<p class="border border-dark">ITViec Blog - border-dark</p>
Ngoài ra, bạn có thể kết hợp với các lớp như:
- border-0: xóa viền
- border-top, border-end, border-bottom, border-start: áp dụng viền từng phía
Tham khảo thêm: Cách sử dụng border Bootstrap
Hướng dẫn tùy chỉnh màu sắc trong Bootstrap
Bootstrap cung cấp sẵn một hệ thống màu chủ đề cùng các lớp tiện ích rất linh hoạt, đủ để bạn xây dựng giao diện nhanh chóng. Tuy nhiên, vì đây là những thiết lập mặc định, nên dễ dẫn đến tình trạng nhiều website tương tự nhau về màu sắc và phong cách. Vì vậy để vừa tận dụng được sức mạnh của Bootstrap, vừa thể hiện được cá tính thương hiệu, bạn có thể tùy chỉnh lại màu sắc trong Bootstrap như sau:
Tùy chỉnh qua biến SCSS (Cách chuẩn và mạnh mẽ nhất)
Nếu bạn sử dụng Bootstrap qua Sass/SCSS, bạn có thể tùy chỉnh màu bằng cách ghi đè các biến trước khi import Bootstrap:
$primary: #0d6efd; $secondary: #6c757d; $danger: #e3342f; // Sau đó mới import Bootstrap @import "bootstrap";
Bạn cũng có thể mở rộng bảng màu:
$theme-colors: ( "primary": #0d6efd, "secondary": #6c757d, "danger": #e3342f, "custom-blue": #0077cc );
Tùy chỉnh thông qua CSS thủ công (không dùng SCSS)
Bạn có thể tự viết CSS đè lên các lớp mặc định:
.text-primary { color: #ff6600 !important; } .bg-primary { background-color: #ff6600 !important; }
Tuy nhiên, cách này hơi cứng nhắc và không thân thiện nếu bạn cần mở rộng hoặc bảo trì sau này. Nó chỉ phù hợp cho các chỉnh sửa nhỏ hoặc tạm thời.
Những lưu ý khi sử dụng màu sắc trong Bootstrap
Để sử dụng màu sắc một cách hiệu quả – vừa đẹp, vừa thân thiện với người dùng – bạn nên ghi nhớ một vài nguyên tắc quan trọng dưới đây:
- Lưu ý về khả năng truy cập: Không nên chỉ truyền đạt ý nghĩa bằng màu sắc, vì người dùng công nghệ hỗ trợ như trình đọc màn hình sẽ không nhận biết được. Hãy đảm bảo thông tin cũng được thể hiện qua văn bản hoặc văn bản ẩn bằng lớp .visually-hidden.
- Đảm bảo độ tương phản màu sắc: Màu chữ và màu nền cần đủ tương phản để dễ đọc – đặc biệt là trên thiết bị di động hoặc trong điều kiện ánh sáng kém. Một số màu như text-light trên nền sáng có thể gây khó nhìn.
- Ưu tiên sử dụng hệ thống màu (theme colors): Việc tuân thủ hệ thống này giúp bạn dễ dàng quản lý khi muốn thay đổi theme toàn trang.
Các câu hỏi thường gặp về Bootstrap color
Sự khác biệt giữa .text-primary và .text-info là gì?
Cả hai đều là lớp màu chữ được Bootstrap định nghĩa sẵn, nhưng chúng mang ý nghĩa và màu sắc khác nhau:
- .text-primary: Tạo văn bản màu xanh dương đậm, là màu chủ đạo của giao diện, thường dùng để làm nổi bật các yếu tố chính như tiêu đề, liên kết quan trọng…
- .text-info: Tạo văn bản màu xanh nhạt, dùng để thể hiện thông tin trung lập, mang tính hỗ trợ như nhắc nhở nhẹ hoặc thông báo.
Có thể tạo thêm màu ngoài các màu mặc định không?
Nếu bạn sử dụng Bootstrap qua SCSS, bạn hoàn toàn có thể mở rộng hệ thống màu bằng cách thêm vào biến $theme-colors:
$theme-colors: ( "primary": #0d6efd, "custom-orange": #ff6600, "brand-purple": #6f42c1 );
Sau đó, bạn có thể sử dụng như các lớp tiện ích thông thường:
.text-custom-orange, .bg-brand-purple, v.v.
Nếu không dùng SCSS, bạn vẫn có thể tạo lớp CSS thủ công để định nghĩa màu riêng.
Màu .text-dark có giống màu đen tuyệt đối không?
Không hoàn toàn như vậy, .text-dark là một màu xám rất đậm (#212529 theo mặc định), chứ không phải màu đen tuyệt đối (#000000). Mục đích của nó là tạo cảm giác dịu mắt hơn khi hiển thị văn bản trên nền sáng, tránh sự tương phản quá gắt. Nếu bạn muốn dùng màu đen tuyệt đối, có thể dùng lớp .text-black hoặc viết CSS thủ công.
Tổng kết
Hệ thống màu sắc trong Bootstrap là một phần không thể thiếu để tạo nên giao diện hiện đại, dễ dùng và nhất quán. Bootstrap color giúp bạn kiểm soát màu sắc một cách trực quan mà không cần viết nhiều CSS. Quan trọng hơn, việc áp dụng màu sắc đúng cách không chỉ cải thiện trải nghiệm người dùng mà còn tăng tính nhận diện thương hiệu cho website. ITviec hi vọng bài viết này đã giúp bạn nắm vững cách sử dụng màu trong Bootstrap, hiểu được sự khác biệt giữa các lớp màu, và biết cách mở rộng bảng màu để phù hợp hơn với dự án thực tế của mình.