Cara Membuat Button Responsive pada Bootstrap

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.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,