Bootstrap là một framework CSS mạnh mẽ giúp việc thiết kế giao diện web trở nên dễ dàng hơn bao giờ hết. Trong đó, các tiện ích định dạng đường viền (border utilities) đóng vai trò quan trọng trong việc làm nổi bật và phân tách các thành phần trong giao diện người dùng. Tìm hiểu cách định dạng border Bootstrap ngay trong bài viết này.
Đọc bài viết này để được hướng dẫn:
- Border Bootstrap là gì
- Các kiểu định dạng border trong Bootstrap
- Những lưu ý khi sử dụng border trong Bootstrap
Border Bootstrap là gì?
Border Bootstrap là tập hợp các lớp CSS cho phép lập trình viên nhanh chóng thêm, xóa hoặc chỉnh sửa viền và bán kính viền (border-radius) trên các phần tử HTML. Những lớp tiện ích được thiết kế để đơn giản hóa việc tạo kiểu và đảm bảo tính nhất quán trong dự án.
Với các lớp border, bạn có thể kiểm soát sự hiện diện, màu sắc, độ dày và hình dạng của viền, đồng thời tạo các góc bo tròn để tăng tính thẩm mỹ.
Đọc thêm: Bootstrap là gì? 7 tính năng cần biết trong Bootstrap
Các nhóm class định dạng border trong Bootstrap
Các class border cơ bản
Bootstrap cung cấp các lớp giúp dễ dàng thêm hoặc xóa border cho phần tử, bao gồm:
Thêm Border
- .border: Thêm border xung quanh phần tử
- .border-top: Bổ sung border bên trên
- .border-bottom: Bổ sung border bên dưới
- .border-start: Bổ sung border bên trái
- .border-end: Bổ sung border bên phải
<span class="border"></span> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>
Xóa Border
- .border-0: Loại bỏ tất cả border
- .border-top-0: Xóa border phía trên
- .border-bottom-0: Xóa border phía dưới
- .border-start-0: Xóa border bên trái
- .border-end-0: Xóa border bên phải
<span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-end-0"></span> <span class="border border-bottom-0"></span> <span class="border border-start-0"></span>
Như hình ảnh phía trên, ví dụ trường hợp bạn cần thêm đường viền cho phần tử ngoại trừ đường viền top, bạn có thể sử dụng border border-top-0 thay vì phải thêm từng border cho từng hướng như khi dùng kết hợp border-start border-end border-bottom
Màu sắc border
Bạn có thể dễ dàng thay đổi màu sắc của đường viền bằng các lớp màu tích hợp sẵn của Bootstrap, bao gồm những lớp như:
<span class="border border-primary"></span> <span class="border border-primary-subtle"></span> <span class="border border-secondary"></span> <span class="border border-secondary-subtle"></span> <span class="border border-success"></span> <span class="border border-success-subtle"></span> <span class="border border-danger"></span> <span class="border border-danger-subtle"></span> <span class="border border-warning"></span> <span class="border border-warning-subtle"></span> <span class="border border-info"></span> <span class="border border-info-subtle"></span> <span class="border border-light"></span> <span class="border border-light-subtle"></span> <span class="border border-dark"></span> <span class="border border-dark-subtle"></span> <span class="border border-black"></span> <span class="border border-white"></span>
Độ dày và độ mờ border
Bootstrap cung cấp các lớp để điều chỉnh độ dày đường viền từ 1 đến 5, trong đó border-5 có độ dày lớn nhất:
<span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
Ngoài ra, Bootstrap còn cung cấp các class để quản lý độ đậm, mờ của đường viền:
<div class="border border-success">Border màu xanh với mặc định không có độ mờ</div> <div class="border border-success border-opacity-75">Border màu xanh với độ mờ 75%</div> <div class="border border-success border-opacity-50">Border màu xanh với độ mờ 50%</div> <div class="border border-success border-opacity-25">Border màu xanh với độ mờ 25%</div> <div class="border border-success border-opacity-10">Border màu xanh với độ mờ 10%</div>
Bo góc border (radius)
Bootstrap hỗ trợ rất nhiều lớp bo góc để giúp phần tử trở nên mềm mại và đẹp mắt hơn, thậm chí là bo thành hình tròn. Các tùy chọn bao gồm:
.rounded
Bo tròn nhẹ ở bốn góc:
.rounded-top
Bo tròn nhẹ ở 2 góc trên:
.rounded-end
Bo tròn nhẹ ở 2 góc bên phải:
.rounded-bottom
Bo tròn nhẹ ở 2 góc bên dưới:
.rounded-start
Bo tròn nhẹ ở 2 góc bên trái:
Để tăng kích thước góc tròn, bạn có thể sử dụng các lớp tiện ích với cú pháp .round-<number>:
<div class="border rounded-0">rounded 0</div> <div class="border rounded-1">rounded 1</div> <div class="border rounded-2">rounded 2</div> <div class="border rounded-3">rounded 3</div> <div class="border rounded-4">rounded 4</div> <div class="border rounded-5">rounded 5</div>
Kết quả:
Ngoài ra, để phần tử có hình dạng tròn hoặc bầu dục, bạn có thể sử dụng:
<div class="border rounded-circle"></div> <div class="border rounded-pill"></div>
Lưu ý, nếu muốn sử dụng rounded-circle để tạo hình tròn, bạn cần định dạng chiều rộng và chiều cao của phần tử bằng nhau.
Kết quả:
Responsive với border
Các lớp tiện ích border của Bootstrap hỗ trợ thiết kế responsive thông qua các lớp dành riêng cho từng điểm ngắt (breakpoint). Bạn có thể thêm hoặc xóa viền tùy thuộc vào kích thước màn hình bằng các tiền tố như: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).
Ví dụ về các breakpoint trong border:
- .border-sm: Thêm viền trên màn hình nhỏ trở lên.
- .border-md-0: Xóa toàn bộ viền trên màn hình vừa trở lên.
- .border-lg-end: Thêm viền phải trên màn hình lớn trở lên.
Tính năng này rất hữu ích để điều chỉnh bố cục theo thiết bị. Chẳng hạn, bạn có thể tạo viền phân tách nội dung trên điện thoại nhưng xóa chúng trên máy tính để giao diện gọn gàng hơn.
Kết hợp border và shadow
Trong Bootstrap, .shadow là một lớp tiện ích (utility class) dùng để thêm hiệu ứng bóng đổ (box-shadow) cho các phần tử HTML, giúp tạo cảm giác chiều sâu và nổi bật trên giao diện. Bóng đổ làm cho phần tử trông như “nổi” lên khỏi bề mặt, thường được dùng cho các thành phần như thẻ (card), nút, hoặc hộp nội dung để tăng tính thẩm mỹ và cải thiện trải nghiệm người dùng.
Border Bootstrap kết hợp hoàn hảo với các lớp .shadow để tạo chiều sâu và điểm nhấn. Các lớp shadow bao gồm:
- .shadow-sm: Đổ bóng nhỏ
- .shadow: Đổ bóng tiêu chuẩn
- .shadow-lg: Đổ bóng lớn
Ví dụ:
<div class="border border-primary shadow-sm">bóng nhỏ</div> <div class="border border-primary shadow">bóng tiêu chuẩn</div> <div class="border border-primary shadow-lg">bóng lớn</div>
Kết quả:
Bảng tổng hợp nhanh các loại định dạng Border Bootstrap
| Nhóm chức năng | Class | Mô tả |
| Thêm border | .border | Thêm viền bao quanh |
| .border-top | Thêm viền bên trên | |
| .border-end | Thêm viền bên phải | |
| .border-bottom | Thêm viền bên dưới | |
| .border-start | Thêm viền bên trái | |
| Xóa border | .border-0 | Xóa toàn bộ viền |
| .border-top-0 | Xóa viền bên trên | |
| .border-end-0 | Xóa viền bên phải | |
| .border-bottom-0 | Xóa viền bên dưới | |
| .border-start-0 | Xóa viền bên trái | |
| Màu sắc border | .border-primary, .border-secondary, .border-danger, .border-light, .border-success, .border-warning, .border-info,… | Đổi màu border theo hệ thống theme (primary, danger, success, secondary, warning, …) |
| Độ dày border | .border-1, .border-2, .border-3, .border-4, .border-5 | Tăng giảm độ dày của border (với 1 là mỏng nhất và 5 là dày nhất) |
| Bo góc (radius) | .rounded-1, .rounded-2, .rounded-3,… | Bo góc của border theo từng mức độ tăng dần |
| .rounded-top | Bo tròn 2 góc trên | |
| .rounded-end | Bo tròn 2 góc bên phải | |
| .rounded-bottom | Bo tròn 2 góc dưới | |
| .rounded-start | Bo tròn 2 góc bên trái | |
| .rounded-pill | Bo góc hình viên thuốc | |
| .rounded-circle | Bo góc hoàn toàn thành hình tròn (yêu cầu chiều rộng và cao bằng nhau) | |
| Responsive border | .border-{breakpoint} | Thêm border trên các breakpoint cụ thể (ví dụ: .border-sm, .border-md) |
| .border-{breakpoint}-0 | Xóa border trên các breakpoint cụ thể (ví dụ: .border-md-0) | |
| .border-{breakpoint}-{side} | Thêm border cho cạnh cụ thể trên breakpoint (ví dụ: .border-lg-end) | |
| .border-{breakpoint}-{side}-0 | Xóa border cho cạnh cụ thể trên breakpoint (ví dụ: .border-sm-top-0) |
Tùy chỉnh định dạng riêng cho border trong Bootstrap
Mặc dù các tiện ích border của Bootstrap đáp ứng hầu hết nhu cầu, bạn có thể cần các kiểu độc đáo như viền nét đứt, chấm, màu tùy chỉnh hoặc hiệu ứng gradient. Để thực hiện các điều chỉnh riêng, bạn có thể sử dụng 2 cách sau:
Sử dụng CSS tùy chỉnh
Nếu bạn chỉ cần thay đổi đơn giản về kiểu viền như viền nét đứt (dashed), viền chấm (dotted), hoặc áp dụng màu ngoài hệ thống theme của Bootstrap, bạn có thể viết thêm class CSS thủ công. Ví dụ:
.custom-border-dashed { border: 2px dashed #007bff; /* Tạo viền nét đứt */ } .custom-border-dotted { border: 2px dotted #28a745; /* Tạo viền chấm */ } .custom-border-gradient { border: 3px solid; border-image: linear-gradient(to right, #f00, #00f) 1; /* tạo màu sắc cho viền */ }
Và sử dụng trong HTML:
<div class="custom-border-dashed">dashed</div> <div class="custom-border-dotted">dotted</div> <div class="custom-border-gradient">gradient</div>
Kết quả:
Lưu ý, Kki sử dụng CSS tùy chỉnh, bạn nên đặt tên class theo chuẩn BEM hoặc có tiền tố riêng để tránh xung đột với Bootstrap core.
Sử dụng Sass tùy chỉnh nâng cao
Bootstrap được xây dựng bằng Sass – một tiền xử lý CSS mạnh mẽ. Nếu bạn đang sử dụng Bootstrap thông qua bản source Sass, bạn có thể tự mở rộng thêm các tiện ích border trong quá trình build. Ví dụ, thêm một lớp border mới vào hệ thống utilities:
Trong file css:
$utilities: map-merge( $utilities, ( "border-style": ( property: border-style, class: border, values: dotted dashed solid double ) ) );
Sử dụng trong HTML:
<div class="border-dashed">Viền dashed</div> <div class="border-dotted">Viền dotted</div>
Đây là cách làm chuyên nghiệp, giúp bạn tận dụng hệ thống utility API của Bootstrap để mở rộng theo đúng kiến trúc framework, giữ cho mã nguồn sạch và có thể bảo trì lâu dài.
Một số lưu ý khi sử dụng định dạng border Bootstrap
- Ưu tiên dùng class có sẵn trước khi viết thêm CSS tùy chỉnh để đảm bảo tối ưu hiệu suất và tránh viết lại những gì Bootstrap đã hỗ trợ.
- Kiểm tra tính tương phản giữa màu border và background để đảm bảo tính dễ đọc và khả năng truy cập (accessibility).
- Kết hợp border và spacing (padding, margin) hợp lý để giao diện của phần tử HTML trông đẹp mắt hơn.
- Để định dạng màu sắc, độ dày border có thể hoạt động, phần tử cần phải được thêm border trước đó (sử dụng class .border hoặc CSS tùy chỉnh).
- Sử dụng quy tắc đặt tên BEM cho CSS tùy chỉnh để tránh xung đột với class của Bootstrap.
- Trong Bootstrap 5, dùng .border-end và .border-start thay vì .border-right và .border-left để hỗ trợ ngôn ngữ từ phải sang trái.
Câu hỏi thường gặp về border Bootstrap
Làm sao để định dạng border dạng viền đứt đoạn trong Bootstrap?
Bootstrap không có class tiện ích sẵn cho viền dashed (đứt đoạn) hoặc dotted (chấm bi). Tuy nhiên bạn có thể dùng CSS tùy chỉnh như:
.custom-border-dashed { border: 2px dashed #007bff; /* Tạo viền nét đứt */ }
Và sử dụng trong HTML:
<div class="custom-border-dashed">dashed</div>
Bootstrap có hỗ trợ bo góc hình tròn không?
Bootstrap cung cấp class .rounded-circle giúp hỗ trợ bo góc tròn hoàn toàn cho phần tử, tuy nhiên bạn cần lưu ý định dạng chiều rộng và chiều cao bằng nhau. Ví dụ:
<div class="border border-success rounded-circle" style="width: 100px; height: 100px;"></div> <div class="border border-primary rounded-circle" style="width: 200px; height: 200px;"></div>
Kết quả:
Làm sao để loại bỏ border top nhưng vẫn giữ lại các cạnh khác trong Bootstrap?
Một cách nhanh chóng để bạn có thể loại bỏ đường viền phía trên nhưng vẫn giữ các đường viền khác đó là sử dụng kết hợp giữa class .border (thêm border xung quanh) và .border-top-0 (xóa border top):
<div class="border border-top-0"></div>
Kết quả:
Tổng kết
Các tiện ích border của Bootstrap là công cụ tuyệt vời cho lập trình viên và nhà thiết kế muốn tạo bố cục sạch sẽ, nhất quán và responsive. Border trong Bootstrap không chỉ giúp phân tách nội dung rõ ràng hơn mà còn nâng cao tính thẩm mỹ cho giao diện nếu được kết hợp hợp lý với màu sắc, bóng đổ và bo góc.
Qua bài viết này, ITviec hi vọng đã cung cấp cho bạn đọc những thông tin bổ ích về việc sử dụng định dạng border trong Bootstrap để từ đó bạn có thể áp dụng vào dự án của mình được dễ dàng hơn.
Đọc thêm: Text Bootstrap: 10+ cách định dạng văn bản hiệu quả với Bootstrap