Belajar Bootstrap Part 4 (Membuat Tombol Dengan Bootstrap)

ASSALAMU'ALIKUM Wr. Wb.

Membuat Tombol Dengan Bootstrap

Selain mampu membuat tabel, Bootstrap juga memiliki fungsi untuk membuat tombol yang responsive dan terlihat modern. Untuk membuat tombol cukup mudah hanya memberikan class "btn" untuk mendefinisikan element. Kemudian kita tinggal mengatur warna element yang kita inginkan.

Bootstrap menyediakan beberapa class untuk membuat tombol yang responsive dan menarik. Adapun beberapa class yang digunakan untuk membuat tombol dan mengatur warna tombolnya dengan Bootstrap

• .btn : Merupakan class Bootstrap yang digunakan untuk menbuat tombol
• .btn-xs : Digunakan untuk membuat tombol dengan ukuran extra kecil
• .btn-sm : Digunakan untuk membuat tombol dengan ukuran kecil
• .btn-md : Digunakan untuk membuat tombol dengan ukurang sedang
• .btn-lg : Digunakan untuk membuat tombol dengan ukuran besar
• .btn-danger : Digunakan untuk membuat tombol berwarna merah
• .btn-warning : Digunakan untuk membuat tombol berwarna kuning
• .btn-success : Digunakan untuk membuat tombol berwarna hijau
• .btn-primary : Digunakan untuk membuat tombol berwarna biru
• .btn-info : Digunakan untuk membuat tombol berwarna biru muda
• .btn-default : Digunakan untuk membuat tombol dengan warna standart bootstrap yaitu berwarna abu - abu

Cara Membuat Tombol Dengan Bootstrap

Untuk membuat tombol dengan Bootstrap sobat dapat menggunakan tag <button> atau juga bisa menggunakan tag <a> alias hyperlink dan menyisipkan class Button pada Bootstrap. Berikut ini contoh penggunaan class - class Bootstrap yang telah dijelaskan diatas.

hasil

Perhatikan pada contoh diatas saya memberikan class "btn" pada tag <a> agar tombol Bootstrap berjalan. dan dibelakangnya saya berikan "btn-success" untuk merubah warnanya menjadi hijau dan "btn-lg" untuk mengatur ukuran dari tombol tersebut.


Sekian dari Saya apabila ada kesalahan Saya minta maaf. TerimKasih

WASSALAM