Oke teman-teman ini adalah artikel Mengenal Class Button Style di Bootstrap (Part 2) lanjutan dari artikel sebelumnya yang part 1 mengenai class button style ini.
Langsung saja, berikut ulasan Mengenal Class Button Style di Bootstrap (Part 2).
Class button di Bootstrap juga dapat mengatur ukuran dari si button tanpa harus kita mengubah dari CSS.
Ukuran button dibagi menjadi 4 ukuran, yaitu:
– .btn-lg (large)
– .btn-md (medium)
– .btn-sm (small)
– .btn-xs (e’xtra small)
Untuk contoh silahkan ketikkan kode di file index.html yang sudah di download pada artikel Mengenal Class Button Style di Bootstrap. Jika tidak silahkan teman-teman download kembali di link ini.
Kalau sudah di download, ekstrak file nya.
Kemudian buka file index.html nya.
Lalu ketikkan kode di bawah,
<button type=”button” class=”btn btn-primary btn-lg”>Large</button>
<button type=”button” class=”btn btn-warning btn-md”>Medium</button>
<button type=”button” class=”btn btn-danger btn-sm”>Small</button>
<button type=”button” class=”btn btn-success btn-xs”>XSmall</button>
Maka output nya akan seperti gambar di bawah,
Setelah ukuran, button bisa juga dibuat menjadi level block.
Tinggal tambahkan class .btn-block dan button akan memblock atau melebar sesuai kolom yang sudah disediakan untuk si button.
Contoh ketikkan kode di bawah,
<button type=”button” class=”btn btn-primary btn-block”>Button 1</button>
<button type=”button” class=”btn btn-danger btn-block”>Button 2</button>
Maka outputnya akan seperti gambar di bawah,
Setelah ukuran dan level blok, button juga bisa diatur dengan button yang aktif dan button yang tidak aktif.
Contoh ketikkan kode di bawah,
<button type=”button” class=”btn btn-primary active”>Active Primary</button>
<button type=”button” class=”btn btn-danger disabled”>Disabled Primary</button>
Maka outputnya seperti gambar di bawah,
Sekian untuk artikel kali ini tentang Mengenal Class Button Style di Bootstrap (Part 2).
Semoga bermanfaat, terima kasih