Tutorial Bootstrap 4 #14 : Tombol Bootstrap 4


tombol bootstrap 4

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.

Diwajibkan kepada teman-teman untuk mempelajari dulu tutorial bootstrap 4 sebelumnya tentang pengenalan bootstrap 4 dan cara menghubungkan dan penggunaan bootstrap 4.

Tombol Bootstrap 4

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.

Baca juga Tutorial Membuat Tombol Flat Design Dengan CSS.

Membuat Tombol Dengan Menggunakan Bootstrap 4

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

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

Contohnya :

Jalankan pada browser, dan hasilnya seperti berikut.

membuat tombol outline dengan bootstrap 4

membuat tombol outline dengan bootstrap 4

Ukuran Tombol atau Button Bootstrap 4

Kita juga bisa mengubah ukuran tombol yang ingin kita buat. untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus.

Tombol Kecil

Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm.

Tombol Besar

Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.

Tombol Lebar

Untuk membuat tombol yang memiliki lebar full, kita bisa gunakan class .btn-block. jenis tombol ini akan mengikuti lebar element tempat dia berada.

Perhatikan contoh berikut.

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

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”> ).

Perhatikan contoh berikut.

Dan hasilnya juga akan menjadi tombol.

contoh tombol bootstrap

contoh tombol bootstrap

Oke,mantap. semua berjalan sesuai keinginan.

Penutup

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.

Untuk source code dan demo lengkapnya silahkan download atau lihat pada link berikut.

Download Source Code

DEMO

Terima kasih. 🙂


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

border bootstrap 4
tooltips bootstrap 4
spinners bootstrap 4

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

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.

DOWNLOAD