Tutorial Bootstrap 4 #35 : Border Bootstrap 4

Border Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu bootstrap ? , cara menggunakan bootstrap ?, sampai pengenalan dan cara membuat komponen-komponen penting yang disediakan oleh bootstrap 4.

Mulai tutorial bootstrap 4 bagian 35 ini kita akan masuk ke materi utilities bootstrap 4.

Pengertian dari materi utilities bootstrap 4 adalah kita akan mempelajari satu persatu class-class bantuan yang sudah disediakan bootstrap.

Misalnya salah satu contoh paling sederhananya adalah misalkan pada saat membuat layout website, kita ingin memberikan garis pada sebuah elemen, atau ingin mengubah bentuk border-radius dari sebuah elemen. nah, kita bisa menggunakan class-class yang sudah disediakan oleh bootstrap.

Sehingga kita tidak perlu lagi menuliskan koding CSS secara manual untuk membuat garis. kita tinggal menambahkan class bantuan yang sudah disediakan bootstrap.

Border Bootstrap 4

Pada Tutorial Bootstrap 4 #35 : Border Bootstrap 4 ini, teman-teman akan belajar tentang cara membuat garis dengan sangat mudah dengan bootstrap 4. Setelah membuat garis, kita juga bisa mengubah warna garis dengan mudah.

Kita juga bisa mengubah lengkungan sudut pada sebuah elemen (border radius).

Semua class border bootstrap 4 yang kita bahas di sini bisa kita terapkan pada elemen tombol, gambar dan elemen html lainnya.

Membuat Garis Dengan Bootstrap 4

Anggaplah di sini kita mempunyai sebuah elemen yang ingin kita beri garis, baik itu pada bagian atas, kanan, bawah, kiri atau bahkan di semua sisi.

Untuk membuat garis kita bisa menggunakan class berikut.

• border
  untuk membuat garis di semua sisi elemen.
• border-top
  membuat garus di sisi atas elemen.
• border-right
  membuat garis di sisi kanan elemen.
• border-bottom
  membuat garis di sisi bawah elemen.
• border-left
  membuat garis di sisi kiri elemen.

Pada contoh ini saya membuat contoh sebuah elemen <span> .. </span> sederhana yang akan kita beri garis dengan class di atas.

Oh ya, untuk cara menghubungkan proyek dengan bootstrap bisa teman-teman baca kembali pada tutorial cara menggunakan bootstrap 4.

Perhatikan pada contoh di atas. elemen span yang kita buat kita pasangkan class-class yang sudah dijelaskan sebelumnya.

Jika kita jalankan, maka hasilnya akan seperti berikut.

Membuat garis dengan bootstrap 4

Perhatikan pada gambar di atas. elemen <span> pertama yang kita beri class .border, hasilnya akan memberikan garis di segala sisi dari elemen <span>. begitu juga dengan garis yang muncul pada elemen <span> lainnya sesuai dengan class yang kita berikan.

Dimana <span> yang kedua memiliki garis di bagian atas karena kita beri class .border-top, <span> ketiga memiliki garis di bagian kanan karena kita beri class .border-right, <span> keempat memiliki garis di bagian bawah karena kita beri class .border-bottom, dan <span> yang terakhir memiliki garis di bagian kiri karena kita beri class .border-left.

Membuat Garis di Ketiga Sisi Dengan Bootstrap 4

Setelah pada sub judul sebelumnya telah dijelaskann tentang cara membuat garis, pada bagian ini akan dijelaskan tentang cara membuat garis disemua sisi kecuali di 1 sisi saja.

Memang bisa juga kita buat dengan class yang sebelumnya dijelaskan, misalkan kita ingin membuat garis di bagian kiri, bawah dan kanan. kita bisa membuatnya dengan cara berikut.

Cara di atas tidak salah. namun ada solusi lain yang disediakan oleh bootstrap. yaitu kita bisa membuat garis di semua sisi kecuali di satu sisi saja.

Misalkan kita ingin membuat garis di bagian kiri, bawah dan kanan, maka kita bisa membuatnya dengan cara berikut.

dengan menggunakan class border-top-0 (angka nol, bukan huruf o), kita bisa membuat garis pada semua bagian kecuali di bagian atas.

Adapun class-class yang bisa digunakan sebagai berikut.

• border-0
  menghilangkan garis di semua sisi, bisa diterapkan pada elemen yang memiliki garis seperti elemen tombol, table dan lain-lain.
• border-top-0
  membuat garis di semua sisi kecuali di bagian atas
• border-right-0
  membuat garis di semua sisi kecuali di bagian kanan
• border-bottom-0
  membuat garis di semua sisi kecuali di bagian bawah
• border-left-0
  membuat garis di semua sisi kecuali di bagian kiri

Perhatikan contoh berikut.

Pada contoh di atas kita mencoba menerapkan class-class tersebut pada elemen tombol. dan jika dijalankan maka hasilnya akan seperti berikut.

Border Bootstrap 4

Mengubah Warna Garis Border Dengan Bootstrap 4

Untuk mengubah warna border atau garis dengan bootstrap, kita bisa menggunakan class berikut.

• border-primary
  Untuk membuat garis berwarna biru
• border-secondary
  Untuk membuat garis berwarna abu-abu
• border-success
  Untuk membuat garis berwarna hijau
• border-danger
  Untuk membuat garis berwarna merah
• border-warning
  Untuk membuat garis berwarna kuning
• border-info
  Untuk membuat garis berwarna biru muda
• border-light
  Untuk membuat garis berwarna abu-abu terang
• border-dark
  Untuk membuat garis berwarna hitam
• border-white
  Untuk membuat garis berwarna putih

Berikut ini contoh cara menggunakan class-class di atas untuk mengubah warna pada garis.

Perhatikan pada contoh di atas, pertama kita menuliskan class border terlebih dahulu, untuk membuat garis pada semua sisi, baru kemudian garis tersebut kita ubah warnanya dengan class-class warna yang sudah dijelaskann di atas.

dan saat kita jalankan, maka hasilnya seperti berikut.

mengubah warna garis border bootstrap 4

Seperti yang terlihat, warna-warna garis telah berubah sebagai mana mestinya.

Border Radius Bootstrap 4

Jika teman-teman pernah belajar tentang perintah border-radius pada CSS untuk mengubah sudut pada sebuah elemen, pasti teman-teman tidak akan asing lagi dengan class border-radius bootstrap 4 yang akan kita bahas ini.

Maksud dari border radius adalah merubah lengkungan pada setiap lengkungan sebuah elemen.

Dengan bootstrap, kita bisa membuat lengkungan pada sebuah elemen dengan menggunakan class berikut.

• rounded
  melengkung di setiap sisi
• rounded-top
  melengkung di sisi atas
• rounded-right
  melengkung di sisi kanan
• rounded-bottom
  melengkung di sisi bawah
• rounded-left
  melengkung di sisi bawah
• rounded-circle
  melengkung sampai menjadi lingkarang
• rounded-pill
  melengkung seperti oval namun lebih lonjong.
• rounded-0 (angka nol)
  tidak melengkung

Class ini bisa kita terapkan pada berbagai elemen termasuk tombol, gambar dan lain-lain.

Untuk membuat contoh yang bervariasi, Pada contoh ini saya akan mencoba menerapkan class tersebut pada elemen gambar atau tag <img>.

Teman-teman bisa mengambangkannya lagi dengan mencoba menerapkan pada elemen lainnya.

Oh ya di sini saya sudah menyiapkan sebuah file gambar untuk contoh, yaitu file gambar.jpg.

membuat lengkungan pada gambar

Contoh

Jika kita jalankan, maka hasilnya akan seperti berikut.

border radius bootstrap

Ukuran Radius Lengkungan

Ukuran radius yang dimaksud adalah pengaturan tingkat kelengkungan pada sudut suatu elemen yang menggunakan class .rounded.

Jika kita ingin membuat lengkungan yang biasa saja mungkin kita bisa menggunakan class .rounded seperti pada contoh sebelumnya.

Jika kita ingin membuat lengkungan yang agak lebih sedikit atau kecil kita bisa gunakan class .rounded-sm.

Jika ingin membuat lengkungan yang lebih berat bisa menggunakan class .rounded-lg.

Perhatikan cara penggunaan dan hasilnya pada contoh berikut.

Jika kita jalankan, maka hasilnya seperti berikut.

ukuran border radius rounded

Kesimpulan

Pada tutorial ini kita telah selesai mempelajari tentang salah satu class utilities dari bootstrap, yaitu border.

Bootstrap telah menyediakan class-class yang sangat bisa mempercepat pengerjaan proyek yang sedang kita kerjakan. dengan class-class borders yang disediakan oleh bootstrap, kita bisa membuat garis pada sebuah elemen dengan sangat mudah.

Kita juga bisa meng-custom garis yang ingin kita buar, misal ingin membuat bagian atas saja, kanan, bawah atau kiri.

Kita juga bisa mengubah warna dari garis yang sudah kita buat.

Selain membuat garis, bootstrap juga menyediakan class rounded untuk kita gunakan pada elemen yang ingin kita beri efek lengkungan (border-radius).

Dari keseluruhan materi yang sudah kita bahas di atas, berikut adalah full source code hasil contoh dari class borders bootstrap 4.

border.html

Demo dan link downloadnya ada pada link berikut.

DEMO

Download Source Code