Cara Membuat Button Bootstrap 4 Lengkap

Cara Membuat Button Menggunakan Bootstrap 4 - Halo sobat, pada kesempatan kali ini saya akan membagikan pembahasan tentang Boostrap, yaitu cara membuat tombol atau button pada framework Bootstrap 4.

Button merupakan salah satu komponen penting untuk sebuah website. Button ini berisi link untuk mengakses halaman lain, selain itu button dapat membuat tampilan website semakin keren. Baiklah langsung saja berikut pembahasan cara membuat button Bootstrap 4.

Button Style

Boostrap menyediakan berbagai style atau warna untuk mempercantik web Anda, penulisan dasarnya yaitu dengan menambahkan class btn.

<button type="button" class="btn">Basic</button>

Untuk warna yang membedakan adalah penulisan classnya yaitu menambahkan class btn-[kode warna], berikut penulisan button style pada bootstrap 4.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline Button

Tombol outline merupakan tombol yang memiliki warna dasar putih dengan perbedaan pada warna border yang digunakan. Untuk penulisan class nya adalah btn-outline-[kode warna].

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Button Size

Ukuran tombol (button size) pada Bootstrap 4 dibagi menjadi tiga, yaitu kecil, normal dan besar. Untuk tombol kecil silahkan tambah class btn-sm dan untuk ukuran besar btn-lg. Secara default tombol berukuran normal, jadi Anda tidak perlu menambahkan class.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Normal button button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Block Button

Block button berfungsi untuk membuat button dengan ukuran sesuai dengan lebar atau width halaman. Silahkan tambahkan class btn-block untuk membuat block button.

<button type="button" class="btn btn-primary btn-block">Block level button</button>

Button Tag

Selain dapat digunakan pada elemen <button>, class btn juga bisa digunakan pada elemen <a> dan <input>. Berikut contoh penulisannya.

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Active dan Disable Button

Anda bisa menambahkan class active agar button terlihat seperti ditekan. Untuk disable button silahkan tambah artibut disable pada <button> yang membuat button tidak bisa diklik. Perlu diketahui bahwa artibut disable tidak bisa digunakan pada elemen <a> dan harus menggunakan class disable.

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>

Button Group

Dengan Bootstrap 4 Anda bisa mengelompokkan button pada satu baris dengan membuat elemen <div> dan menambahkan class btn-group. Berikut penulisan button group.

Dan untuk mengubah ukuran silahkan gunakan class btn-group-lg untuk membuat button groups berukuran besar dan class btn-group-sm untuk button group berukuran kecil.

<div class="btn-group">
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-warning">Warning</button>
</div>

Vertical Button Group

Selain itu Anda juga bisa button group dengan posisi vertikal dari atas ke bawah dengan menggunakan class btn-group-vertikal pada element <div>. Berikut contoh penulisannya.

<div class="btn-group-vertical">
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-warning">Warning</button>
</div>

Akhir Kata

Nah itu tadi adalah penjelasan dasar bagaimana cara membuat button menggunakan Boostrap 4. Selain mudah digunakan, button pada bootstrap ini memiliki tampilkan yang keren. Baiklah, sekian saja artikel ini, selamat mencoba dan semoga bermanfaat.