Hướng dẫn sử dụng tiện ích Bootstrap Border
Xem thêm các chuyên mục:
Border Utility (Tiện ích Border) là một phần trong Bootstrap, nó xây dựng sẵn các lớp giúp người dùng thiết lập border (Viền) cho các phần tử.
Lớp | Mô tả |
.border | Thiết lập border cho 4 cạnh của phần tử. |
.border-left | Thiết lập border cho cạnh bên trái của phần tử. |
.border-right | Thiết lập border cho cạnh bên phải của phần tử. |
.border-top | Thiết lập border cho cạnh bên trên (top) của phần tử. |
.border-bottom | Thiết lập border cho cạnh bên dưới (bottom) của phần tử. |
.border-left-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh bên trái. |
.border-right-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh bên phải. |
.border-top-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh phía trên (top). |
.border-bottom-0 | Thiết lập border cho tất cả các cạnh, ngoại trừ cạnh phía dưới (bottom). |

border-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #fbfcfc; } </style> </head> <body> <div class="container"> <div class="border "> .border </div> <div class="border-left "> .border-left </div> <div class="border-right "> .border-right </div> <div class="border-top "> .border-top </div> <div class="border-bottom "> .border-bottom </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Có một vài lớp để thiết lập mầu sắc cho border được Bootstrap xây dựng sẵn, bạn có thể sử dụng nó trong ngữ cảnh phù hợp:
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-muted
- .border-white

border-color-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #ebf5fb; } </style> </head> <body> <div class="container"> <div class="border border-primary"> .border .border-primary </div> <div class="border-left border-danger"> .border-left .border-danger </div> <div class="border-right border-danger"> .border-right .border-danger </div> <div class="border-top border-success"> .border-top .border-success </div> <div class="border-bottom border-info"> .border-bottom .border-info </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Bootstrap không định nghĩa lớp nào để thiết lập chiều rộng (width) của border. Nhưng bạn có thể tự định nghĩa các lớp như vậy, chẳng hạn .border-* (* = 1, 2, 3, ...).
.border-5 { border-width:5px !important; } .border-2 { border-width:2px !important; }

border-width-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #fbfcfc; } .border-5 { border-width:5px !important; } .border-2 { border-width:2px !important; } </style> </head> <body> <div class="container"> <div class="border border-2"> .border .border-2 </div> <div class="border-left border-5"> .border-left .border-5 </div> <div class="border-right border-2"> .border-right .border-2 </div> <div class="border-top border-5"> .border-top .border-5 </div> <div class="border-bottom border-5"> .border-bottom .border-5 </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Một số lớp bổ xung giúp bạn làm tròn (round) các góc của phần tử.
- .rounded
- .rounded-left
- .rounded-right
- .rounded-top
- .rounded-bottom
- .rounded-0

round-example
<div class="container"> <div class="border rounded"> .border .rounded </div> <div class="border rounded-left"> .border-left .rounded-left </div> <div class="border rounded-right"> .border .rounded-right </div> <div class="border rounded-top"> .border .rounded-top </div> <div class="border rounded-bottom"> .border .rounded-bottom </div> <div class="border rounded-circle"> .border-bottom .rounded-circle </div> <div class="border rounded-0"> .border-bottom .rounded-0 </div> </div>