Penggunaan Border dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Border dalam Bootstrap.

Sumber : Getbootstrap.com

Gunakan utilitas perbatasan untuk menata batas dan radius batas suatu elemen dengan cepat. Cocok untuk gambar, tombol, atau elemen lainnya.

1. Border

Gunakan utilitas perbatasan untuk menambah atau menghapus batas elemen. Pilih dari semua batas atau satu per satu.

a. Aditif

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

Hasil :

b. Subtraktif

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

Hasil :

2. Border Warna

Ubah warna batas menggunakan utilitas yang dibangun berdasarkan warna tema kami.

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

Hasil :

3. Border Radius

Tambahkan kelas ke elemen untuk membulatkan sudutnya dengan mudah.

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

Hasil :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)