Cara Membuat Button Responsive pada Bootstrap

5/5 (7)

Cara Membuat Button Responsive pada Bootstrap – Setelah kita Membuat Progress Bars pada Bootstrap, Membuat Navbar dan lainnya, kali ini kita akan membuat dan mendesain button pada Bootstrap. Kita hanya akan menambahkan class btn bawaan Bootstrap untuk mendefinisikan elemen menjadi button.

Teks atau konten di dalam button merupakan label dari elemen button tersebut. Di dalamnya juga bisa kita tambahkan gambar atau icon dari Font Awesome sebagai tampilan tombol tersebut. Bootstrap menyediakan berbagai gaya untuk tombol sehingga kita bisa mengatur ukuran serta warna dari tombol tersebut.

Cara Membuat Button Responsive pada Bootstrap

Sekarang mari kita coba membuat button pada Bootstrap. Buat file HTML lalu pastekan kode berikut,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button pada Bootstrap | codelatte.org</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button pada Bootstrap | codelatte.org</h2>
  <button type="button" class="btn">Basic</button>
  <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-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>
</body>
</html>

Maka hasilnya akan menjadi seperti ini,

Button pada Bootstrap
Button pada Bootstrap

Class button dapat digunakan pada elemen <a>, <button&gt; dan/atau <input>, lihat contoh berikut:

<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">

Button Outline

Bootstrap 4 juga menyediakan 8 jenis border atau batas pada button:

<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Ukuran Button

Selain border atau batas, Bootstrap menyediakan 4 jenis ukuran yang berbeda untuk button:

<button type="button" class="btn btn-primary btn-lg">Besar</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Kecil</button>

Full-Width Button

Tambahkan .btn-block untuk membuat tombol yang membentan ke seluruh elemen induk (full-width button).

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

Attribut

Elemen button memiliki beberapa atribut, atribut ini sudah support untuk HTML5. Beberapa atribut itu adalah:

  • autofocus > Digunakan untuk menentukan bahwa button mendapat fokus ketika halaman dimuat.
  • disabled > Digunakan untuk menunjukkan bahwa elemen button tersebut tidak bisa diklik.
  • formaction > Digunakan untuk menentukan URL yang memproses data ketika form dikirim. Berlaku untuk atribut type="submit".
  • formenctype > Digunakan sebagai petunjuk form encoded type yang digunakan untuk menentukan tipe konten yang digunakan.
  • formmethod > Digunakan untuk menentukan HTTP Method yang digunakan browser ketika mengirim data form.
  • formtarget > Digunakan untuk menentukan target tampilan setelah data form dikirim.
  • name > Digunakan untuk¬† menentukan nama dari button yang berkaitan dengan form yang dikirim.
  • type > Digunakan untuk menentukan tipe atau jenis dari button.
  • value > Digunakan untuk menentukan initial value sebuah button.

Sekian artikel tentang Cara Membuat Button Responsive pada Bootstrap. Apabila ada yang ingin ditanyakan, silahkan tinggalkan pertanyaan di kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya!

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

3 tanggapan untuk “Cara Membuat Button Responsive pada Bootstrap

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *