Source

Кордони

Використовуйте утиліти кордону, щоб швидко оформити межу та радіус межі елемента. Чудово підходить для зображень, кнопок або будь-якого іншого елемента.

Кордон

Використовуйте утиліти для створення меж, щоб додати або видалити межі елемента. Вибирайте з усіх кордонів або по одному.

Добавка

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

Субтрактивний

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

Колір рамки

Змініть колір межі за допомогою утиліт, створених на основі кольорів нашої теми.

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

Границя-радіус

Додайте класи до елемента, щоб легко округлити його кути.

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="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">

Розміри

Використовуйте .rounded-lgабо .rounded-smдля більшого або меншого радіуса межі.

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