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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--garis di semua sisi-->
<span class="border">
Bergaris
</span>
<br>
<!--garis di atas-->
<span class="border-top">
Garis Atas
</span>
<br>
<!--garis di kanan-->
<span class="border-right">
Garis Kanan
</span>
<br>
<!--garis di bawah-->
<span class="border-bottom">
Garis Bottom
</span>
<br>
<!--garis di kiri-->
<span class="border-left">
Garis Kiri
</span>
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.
1
<span class="border-left border-bottom border-right">Tanpa garis atas</span>
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.
1
<span class="border-top-0">Tanpa garis atas</span>
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--tanpa garis di semua sisi-->
<button class="border-0">
Tanpa garis di semua sisi
</button>
<br>
<!--tanpa garis di atas-->
<button class="border-top-0">
Tanpa garis di atas
</button>
<br>
<!--tanpa garis di kanan-->
<button class="border-right-0">
Tanpa garis di kanan
</button>
<br>
<!--tanpa garis di bawah-->
<button class="border-bottom-0">
Tanpa garis di bawah
</button>
<br>
<!--tanpa garis di kiri-->
<button class="border-left-0">
Tanpa garis di atas
</button>
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.
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.
1
2
3
<img src="gambar.jpg"alt="..."class="rounded-sm">
<img src="gambar.jpg"alt="..."class="rounded-lg">
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.
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ...
Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ...
Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...
Setelah mempelajari progress bar pada bootstrap 4, selanjutnya pada tutorial bootstrap bagian ke tiga puluh satu ini kita akan belajar tentang sebuah komponen bootstrap lagi, ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.