Tombol Bootstrap 4 – Tombol atau button merupakan salah satu komponen yang paling banyak kita jumpai pada sebuah website. apalagi dalam aplikasi atau sistem informasi.
Komponen tombol seperti sudah menjadi kewajiban untuk membuat website atau sistem informasi yang menarik. biasanya komponen tombol ini dibuat pada link-link yang ada pada website atau sistem informasi, juga pada tombol submit form.
Pada tutorial ini kita akan belajar tentang cara membuat tombol menggunakan bootstrap 4. kita juga akan belajar tentang jenis-jenis tombol atau button yang sudah disediakan di bootstrap 4.
Untuk contoh tombol yang akan kita buat, kita akan menggunakan tag <button>. sebenarnya tidak harus menggunakan tag <button> saja. tombol bootstrap bisa dibuat pada element hyperlink atau tombol submit pada form juga.
Untuk membuat button dengan bootstrap 4, caranya kita bisa menggunakan class .btn, kemudian diikuti dengan class jenis button atau tombolnya.
Jenis tombol bootstrap :
.btn-primary
Untuk membuat tombol warna biru dengan bootstrap.
.btn-secondary
Untuk membuat tombol warna abu-abu dengan bootstrap.
.btn-success
Untuk membuat tombol warna hijau dengan bootstrap.
.btn-danger
Untuk membuat tombol warna merah dengan bootatrap.
.btn-warning
Untuk membuat tombol warna kuning dengan bootatrap
.btn-info
Untuk membuat tombol warna biru terang dengan bootatrap
.btn-light
Untuk membuat tombol warna terang/putih dengan bootatrap
.btn-dark
Untuk membuat tombol warna gelap/hitam dengan bootatrap
.btn-link
Untuk membuat tombol berbentuk link dengan bootatrap
Dari penjelasan dan contoh jenis tombol bootstrap di atas, berikut contoh cara pembuatan tombol atau button bootstrap berdasarkan jenisnya masing-masing.
Sekarang kita coba jalankan pada browser, maka hasilnya akan seperti berikut.
tombol bootstrap 4
Seperti yang dijelaskan di atas tadi, untuk membuat tombol dengan bootstrap, gunakan class .btn, kemudian tambahkan dengan menulis class untuk jenis tombol yang ingin dibuat, misal :
btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link
Maka hasilnya akan tampil seperti pada gambar di atas tadi.
Membuat Tombol Outline Dengan Bootstrap
Sesuai dengan namanya, jenis tombol ini berbentuk seperti tombol yang memiliki outline. cara nya sama dengan cara membuat tombol yang dibahas sebelumnya. bedanya cuma class jenis tombolnya saja yang diganti.
Untuk membuatnya kita bisa menggunakan class seperti berikut.
.btn-outline-primary
Untuk membuat tombol outline warna biru dengan bootstrap.
.btn-outline-secondary
Untuk membuat tombol outline warna abu-abu dengan bootstrap.
.btn-outline-success
Untuk membuat tombol outline warna hijau dengan bootstrap.
.btn-outline-danger
Untuk membuat tombol outline warna merah dengan bootatrap.
.btn-outline-warning
Untuk membuat tombol outline warna kuning dengan bootatrap
.btn-outline-info
Untuk membuat tombol outline warna biru terang dengan bootatrap
.btn-outline-light
Untuk membuat tombol outline warna terang/putih dengan bootatrap
.btn-outline-dark
Untuk membuat tombol outline warna gelap/hitam dengan bootatrap
Perhatikan contoh di atas, untuk desain tombolnya, silahkan ikuti panduan di atas tadi, baik itu tombol biasa atau tombol outline, karena masih sama.
Untuk mengubah ukurannya kita tinggal menambahkan lagi class nya, yaitu class btn-lg, btn-sm atau btn-block yang sudah dijelaskan di atas tadi tentang kegunaannya masing-masing.
Sekarang jalankan pada browser, kita akan melihat hasilnya.
ukuran tombol bootstrap 4
Contoh Lain
Seperti yang sudah disinggung sebelumnya, bahwa untuk membuat tombol, kita tidak harus menggunakan tag <button> .. </button>.
Kita juga bisa menggunakan class tombol atau button bootstrap 4 ini pada elemen hyperlink<a href=”#”> .. </a>. atau di tombol submit pada form ( <input type=”submit”> ).
Pada Tutorial Bootstrap 4 #14 : Tombol Bootstrap 4 ini kita telah belajar tentang pembuatan button dengan bootstrap, kita hanya perlu menuliskan class-class yang sudah disediakan oleh bootstrap.
Berikut contoh full dari tutorial pembuatan button dengan bootstrap 4 ini.
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
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 ...
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 ...
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.