Mengenal Class Border Pada Bootstrap 4

by | Jul 27, 2018 | Bootstrap, Tips dan Trik, Tutorial, Web Design, Website | 0 comments

Hallo teman-teman Dumet School, Kembali lagi dengan saya shelli ripati. Kali ini saya akan membahas tentang cara Mengenal Class Border Pada Bootstrap 4. Di bootstrap 4 ini banyak sekali class yang bisa kita manfaatkan untuk kita pakai dalam membuat sebuah tampilan website. Salah satunya adalah class border. Dimana class ini disediakan oleh bootstrap 4 untuk membantu kita membuat sebuah border.

Berikut ini adalah penjelasan untuk class border pada bootstrap 4.

  1. Border adalah class border untuk memberikan border semua sisi
  2. Border-top adalah class border untuk memberikan border bagian atas
  3. Border-bottom adalah class border untuk memberikan border bagian bawah
  4. Border-left adalah class border untuk memberikan border bagian kiri
  5. Border-right adalah class border untuk memeberikan border bagian kanan
  6. Border-0 adalah class border untuk tidak memberikan border disisi manapun
  7. Border-top-0 adalah class border untuk tidak memberikan border pada sisi atas saja.
  8. Border-bottom-0 adalah class border untuk tidak memberikan border pada sisi bawah saja
  9. Border-left-0 adalah class border untuk tidak memberikan border pada sisi kiri saja
  10. Border-right-0 adalah class border untuk tidak memberikan border pada sisi kanan saja

Dan untuk lebih memahami tentang cara Mengenal Class Border Pada Bootstrap 4 berikut ini adalah warna yang sudah disediakan oleh bootstrap untuk warna bordernya.

Mengenal Class Border Pada Bootstrap 4

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

Adapun class border radius yang sudah disediakan oleh bootstrap 4. Berikut ini penjelasan mengenai border radius.

Mengenal Class Border Pada Bootstrap 4

<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">
  1. Rounded adalah class border radius yang diberikan di semua sisi
  2. Rounded-top adala class border radius yang diberikan pada bagian kiri dan kanan yang posisinya berada di atas
  3. Rounded-right adalah class border radius yang diberikan pada bagian atas dan bawah namun hanya sebelah kanan saja
  4. Rounded-bottom adalah class border radius yang berikan pada bagian kiri dan kanan yang posisinya berada di bawah saja
  5. Rounded-left adalah class border radius yang diberikan pada bagian atas dan bawah namun hanya sebelah kiri saja
  6. Rounded-circle adalah class border radius yang memberikan border radius 180 derajat sehingga berbentuk bulat
  7. Dan rounded-0 adalah class border radius yang tidak memberikan border sama sekali

Demikian artikel tentang cara Mengenal Class Border Pada Bootstrap 4. Semoga dapat bermanfaat dan selamat mencoba.