Belajar bootstrap 4 untuk pemula: Penggunaan class Border dan Shadow



Kali ini aku mau share bagaimana penggunaan class border dan shadow pada bootstrap 4. Ini adalah melanjutkan seri belajar bootstrap 4 yang sudah berjalan sampai 9 episode pada youtube saya, tetapi  pada episode-episode sebelumnya aku tidak menuliskanya di blog, mungkin karna sudah lama gak ngeblog. 

Nah sekarang aku kepikiran akan selalu update konten blog, youtube, Facebook, Instagram.

Seri youtube: 

Facebook:

Instagram:

Langsung saja mungkin kita belajar class border dan shadow pada bootstrap 4.
Border adalah sebuah garis yang berada dipinggir untuk membatasi isi element, sedangkan shadow adalah sebuah bayangan pada element. Border dan shadow ini biasa digunakan untuk mempercantik tampilan website atau aplikasi berbasis web. Nah pada penggunaan bootstrap 4 akan dimudahkan pemanggilan class nya, hal ini dapat meminimalisir penggunaan css, jadi kita tinggal panggil-panggil class pada bootstrap 4 nya saja.

Dalam bootstrap 4, kurang lebih ada 3 penggunaan class (jika salah mohon dikoreksi) yang biasa orang gunakan.

  1. Kita dapat membuat posisi border berada di berbagai posisi pada element. Seperti hal nya bottom, top, left, right, atau semua posisi.
  2. Kita dapat membuat warna border menggunakan warna-warna yang ada pada bootstrap 4, yaitu primary, success, secondary, info, dark, light, warning, danger.
  3. Kita dapat membuat sudut tumpul atau rounded pada element menggunakan class border rounded.

Praktik:

Sekarang kita langsung praktik saja ya temen temen.

Yang pertama kita siapkan terlebih dahulu, untuk persiapan dalam penggunaan bootstrap 4 temen-temen bisa tonton video seri belajar bootstrap 4 episode 1:


langkah selanjutnya silahkan temen-temen ikuti script-script dibawah ini. 

Posisi border:

untuk membuat posisi border di bottom atau dibawah element, gunakan class border-bottom

Contoh:

<div class="p-3 mb-2 bg-light border-bottom">Border Bottom</div>

Selanjutnya jika kita ingin membuat border berada diatas element, gunakan class border-top

Contoh:

<div class="p-3 mb-2 bg-light border-top">Border Top</div>

Kemudian untuk membuat border berada di sebelah kanan  element, gunakan class border-right

Contoh:
<div class="p-3 mb-2 bg-light border-right">Border Right</div> 

Jika kemudian kita menginginkan posisi border berada disebelah kiri element, gunakan class border-left

Contoh:

<div class="p-3 mb-2 bg-light border-left">Border Left</div> 

Nah sekarang jika bordernya berada di semua sisi, cukup class border

Contoh:

<div class="p-3 mb-2 bg-light border">Regular</div>

Warna Border

Penulisan class warna pada bootstrap 4 cukup seperti ini, “border border-warna bootstrap”
Singkat saja contoh scriptnya:

<h5>Warna Border</h5>

      <div class="p-3 mb-2 bg-light border border-primary"> Warna Primary</div>

      <div class="p-3 mb-2 bg-light border border-secondary">Warna Secondary</div>

      <div class="p-3 mb-2 bg-light border border-success">Warna Success</div>

      <div class="p-3 mb-2 bg-light border border-info">Warna Info</div>

      <div class="p-3 mb-2 bg-light border border-warning">Warna Warning</div>

      <div class="p-3 mb-2 bg-light border border-danger">Warna Danger</div>

      <div class="p-3 mb-2 bg-light border border-light">Warna Light</div>

      <div class="p-3 mb-2 bg-light border border-dark">Warna Dark</div>

      <div class="p-3 mb-2 bg-light border border-white">Warna White</div>

Border radius 

Biasanya digunakan untuk membuat lengkungan pada setiap sudut element. Penulisan scriptnya juga tidak terlalu sulit, cukup cantumkan class border dilanjutkan dengan rounded-bentuk yang diinginkan.

Contohnya:

Ini untuk membuat rounded atau tumpul pada setiap sisi.

<div class="p-3 mb-2 bg-light border rounded">Rounded</div>

Ini jika yang kita inginkan rounded atau tumpul sisi atas saja

<div class="p-3 mb-2 bg-light border rounded-top">Rounded Top</div>

Jika ingin rounded atau tumpul di sisi bawah element kita gunakan class rounded bottom

<div class="p-3 mb-2 bg-light border rounded-bottom">Rounded Bottom</div>

Jika ingin runded pada sisi kanan

 <div class="p-3 mb-2 bg-light border rounded-right">Rounded Right</div>

Jika ingin rounded pada sisi kiri

 <div class="p-3 mb-2 bg-light border rounded-left">Rounded Left</div>

Jika ingin rounded circle atau lingkaran kita perlu gunakan css manual tambahan, fungsinya untuk membuat elemenya sama sisi atau ukuranya persegi. Contohnya seperti dibawah ini.

<div class="p-3 mb-2 bg-light border rounded-circle" style="width: 100px; height: 100px;">Rounded Circle</div>

Jika ingin membuat roundednya berbentuk pill, bisa gunakan class rounded pill
<div class="p-3 mb-2 bg-light border rounded-pill">Rounded Pill</div>

Nah jika kita ingin menghilangkan rounded, maka ubah class rounded menjadi 0
<div class="p-3 mb-2 bg-light border rounded rounded-0">Hilangkan rounded</div>

SHADOW:

Shadow adalah bayangan yang ada disetiap sisi element. Penggunaan class nya sangat mudah cukup ketikan seperti dibawah ini.
<div class="p-3 mb-5 bg-light rounded shadow shadow">Tanpa bayangan</div>

Jika kita ingin shadownya kecil atau tipis, gunakan class shadow-sm
<div class="p-3 mb-5 bg-light rounded shadow-sm">Bayangan kecil</div>

Jika kita ingin shadownya besar, gunakan class shadow-lg
<div class="p-3 mb-5 bg-light rounded shadow-lg">Bayangan Besar</div>

Jika kita ingin shadownya hilang, gunakan class shadow-none
<div class="p-3 mb-5 bg-light rounded shadow shadow-none">Tanpa bayangan</div>

Kesimpulan:
Border pada bootstrap 4 sangat beragam dan dapat kita panggil dengan mudah. Kita bisa implementasikan class border ini dalam pembuatan design aplikasi atau website.


Jika ingin tutorial versi videonya, silahkan kunjungi youtube saya:

https://www.youtube.com/watch?v=ZAdBrhTVC28&t=1s


Sekian dulu ya temen temen, semoga postingan ini bermanfaat.

Posting Komentar