Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap Untuk Pemula

Membuat Tombol Dengan Bootstrap

Kemampuan bootstrap :

1. Dapat mendesign tampilan table dengan cepat

2. Dapat mendesign tampilan menu navigasi dengan cepat

3. Dapat mendesign tombol atau hyperlink dengan cepat.

Untuk cara membuat tombol dengan bootstrap sangatlah mudah..

Jadi kamu hanya menambahkan class "btn" saja..

Class "btn" ini berguna untuk mendefinisikan element menjadi tombol.

Kamu juga bisa mengatur warna, tombol, bahkan ukuran sesuai keinginan kamu.

Di bootstrap terdapat class yang berguna untuk mendesign atau menciptakan sebuah tombol yang menarik dan keren.

Nah.. ini adalah class bootstrap untuk membuat tombol, mengatur ukuran dan juga mengatur warna tombol tersebut..

*Class ke-1 adalah .btn

Class ini berguna untuk membuat tombol.

*Class ke-2 adalah .btn-xs

Class ini berguna untuk membuat tombol dengan ukuran yang sangat kecil (ectra kecil).

*Class ke-3 adalah .btn-sm

Class bootstrap ini berguna untuk membuat tombol dengan ukuran kecil

*Class ke-4adalah .btn-md

Class bootstrap ini berguna untuk membuat tombol dengan ukuran sedang

*Class ke-5 adalah .btn-lg

Class bootstrap ini berguna untuk membuat tombol dengan ukuran besar.

*Class ke-6 adalah .btn-danger

Class bootstrap ini berguna untuk membuat tombol berwarna merah.

*Class ke-7 adalah .btn-danger

Class bootstrap ini berguna untuk membuat tombol berwarna merah.

*Class ke-8 adalah .btn-default

Class bootstrap ini berguna untuk membuat tombol berwarna standart dari bootstrap.

*Class ke-9 adalah .btn-warning

Class bootstrap ini berguna untuk membuat tombol berwarna kuning.

*Class ke-10 adalah .btn-primary

Class bootstrap ini berguna untuk membuat tombol berwarna biru.

*Class ke-11 adalah .btn-info

Class bootstrap ini berguna untuk membuat tombol berwarna biru langit.

*Class ke-12 adalah .btn-success

Class bootstrap ini berguna untuk membuat tombol berwarna hijau.

Cara Membuat Tombol Dengan Bootstrap

Jadi gini broo...

Kalian bisa membuat tombol dengan bootstrap dengan menggunakan tag<button>..

Selain itu kamu juga bisa menggunakan tag hyperlinnk <a>..

Jadi sekarang silahkan kamu lihat contoh membuat tombol dengan bootstrap ini....

Oke bro.. Nah jadi ini hasil SS kita membuat tombol dengan bootstrap tadi..

cara membuat tombol dengan bootstrap untuk pemula

Dan ini demonya bro..

See the Pen mMqrzo by penakngoding (@penakngoding) on CodePen.

Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara membuat tombol gambar dengan bootstrap.

Daftar Tutorial Bootstrap Lainnya

Bootstrap Part 1 : pengertian dan cara menggunakan bootstrap untuk pemula.
Bootstrap Part 2 : membuat table dengan bootstrap untuk pemula
Bootstrap Part 3 : tamplan gambar dengan bootstrap
Bootstrap Part 4 : membuat tombol dengan bootstrap

Bootstrap Part 5 : membuat jumbotron dengan bootstrap
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe