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.
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.
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 33 |
<span class="border border-primary"> Garis .border-primary </span> <br> <span class="border border-secondary"> Garis .border-secondary </span> <br> <span class="border border-success"> Garis .border-success </span> <br> <span class="border border-danger"> Garis .border-danger </span> <br> <span class="border border-warning"> Garis .border-warning </span> <br> <span class="border border-info"> Garis .border-info </span> <br> <span class="border border-light"> Garis .border-light </span> <br> <span class="border border-dark"> Garis .border-dark </span> <br> <span class="border border-white"> Garis .border-white </span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<img src="gambar.jpg" alt="..." class="rounded"> <img src="gambar.jpg" alt="..." class="rounded-top"> <img src="gambar.jpg" alt="..." class="rounded-right"> <img src="gambar.jpg" alt="..." class="rounded-bottom"> <img src="gambar.jpg" alt="..." class="rounded-left"> <img src="gambar.jpg" alt="..." class="rounded-circle"> <img src="gambar.jpg" alt="..." class="rounded-pill"> <img src="gambar.jpg" alt="..." class="rounded-0"> |
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.
border.html
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Border Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <br> <center> <h3>Tutorial Border Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/border-bootstrap-4/">www.malasngoding.com</a></h4> </center> <h3>Membuat Garis</h3> <!-- garis di semua sisi --> <span class="border"> Bergaris </span> <br> <br> <!-- garis di atas --> <span class="border-top"> Garis Di Atas </span> <br> <br> <!-- garis di kanan --> <span class="border-right"> Garis Di Kanan </span> <br> <br> <!-- garis di bawah --> <span class="border-bottom"> Garis Di Bawah </span> <br> <br> <!-- garis di kiri --> <span class="border-left"> Garis Di Kiri </span> <h3>Menghilangkan garis</h3> <!-- tanpa garis di semua sisi --> <button class="border-0"> Tanpa garis di semua sisi </button> <br> <br> <!-- tanpa garis di atas --> <button class="border-top-0"> Tanpa garis di atas </button> <br> <br> <!-- tanpa garis di kanan --> <button class="border-right-0"> Tanpa garis di kanan </button> <br> <br> <!-- tanpa garis di bawah --> <button class="border-bottom-0"> Tanpa garis di bawah </button> <br> <br> <!-- tanpa garis di kiri --> <button class="border-left-0"> Tanpa garis di atas </button> <h3>Warna Border</h3> <span class="border border-primary"> Garis .border-primary</span> <br> <span class="border border-secondary"> Garis .border-secondary</span> <br> <span class="border border-success"> Garis .border-success</span> <br> <span class="border border-danger"> Garis .border-danger</span> <br> <span class="border border-warning"> Garis .border-warning</span> <br> <span class="border border-info"> Garis .border-info</span> <br> <span class="border border-light"> Garis .border-light</span> <br> <span class="border border-dark"> Garis .border-dark</span> <br> <span class="border border-white"> Garis .border-white</span> <br> <br> <style type="text/css"> img{ width: 50px; height: auto; margin-right: 30px; } </style> <h3>Border Radius</h3> <img src="gambar.jpg" alt="..." class="rounded"> <img src="gambar.jpg" alt="..." class="rounded-top"> <img src="gambar.jpg" alt="..." class="rounded-right"> <img src="gambar.jpg" alt="..." class="rounded-bottom"> <img src="gambar.jpg" alt="..." class="rounded-left"> <img src="gambar.jpg" alt="..." class="rounded-circle"> <img src="gambar.jpg" alt="..." class="rounded-pill"> <img src="gambar.jpg" alt="..." class="rounded-0"> <h3>Ukuran Border Radius</h3> <img src="gambar.jpg" alt="..." class="rounded-sm"> <img src="gambar.jpg" alt="..." class="rounded-lg"> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
Demo dan link downloadnya ada pada link berikut.
Tutorial Menarik Lainnya

Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4


Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

