Cara Membuat Button Responsive pada Bootstrap

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.id</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.id</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

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!

Roni1337 says:

2 August 2018 at 5:56 AM

Value dan placeholder bedanya apa gan?

- Abay says:
  
  2 August 2018 at 2:25 PM
  
  Penjelasan lengkapnya bisa dilihat disini mas, https://stackoverflow.com/questions/26599276/value-vs-placeholder-attributes-in-html
  
  - Adewa says:
    
    2 August 2018 at 4:35 PM
    
    Jelasinlah tolol
    
    - Zabuza says:
      
      12 August 2019 at 5:53 PM
      
      Njir Ngegas, teruskan bro bakat lu
      
reza says:

28 February 2020 at 1:20 PM

mantap

Jaenudin says:

6 July 2020 at 5:49 AM

Min, Kalo mau cutomize buttonnya, baiknya bikin sendiri atau boleh langsung edit di css bootstrapnya, dan apa gak konflik kalo nama classnya sama?

- Abay says:
  
  9 July 2020 at 1:47 AM
  
  kalau mau customize tinggal bikin style tambahan aja, ngga akan konflik sama Bootstrap nya.
  
Simon Matthew says:

7 March 2022 at 3:27 PM

Wow! Great post; I liked how you explained the difference between back-end developers and front-end web developers. I also want to join the freelancing platform that understands these differences and help me get work accordingly, and I came across Eiliana.com; it is a new and great platform for technical experts.