in English

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ó.

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75 Example non-rounded image (overrides rounding applied elsewhere) 75x75
<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.

Example small rounded image 75x75 Example large rounded image 75x75
<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">