Biên giới

Sử dụng tiện ích đường viền để nhanh chóng tạo kiểu đường viền và bán kính đường viền của một phần tử. Tuyệt vời cho hình ảnh, nút hoặc bất kỳ phần tử nào khác.

Biên giới

Sử dụng các tiện ích đường viền để thêm hoặc xóa đường viền của một phần tử. Chọn từ tất cả các đường viền hoặc từng đường viền một.

Phụ gia

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Subtractive

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Màu viền

Thay đổi màu đường viền bằng cách sử dụng các tiện ích được xây dựng trên màu chủ đề của chúng tôi.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Bán kính biên giới

Thêm các lớp vào một phần tử để dễ dàng làm tròn các góc của nó.

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

Kích thước

Sử dụng .rounded-lghoặc .rounded-smcho bán kính đường viền lớn hơn hoặc nhỏ hơn.

<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">