Home » Bootstrap » Button Groups Bootstrap: Bootstrap Tutorial #12

Button Groups Bootstrap: Bootstrap Tutorial #12

by YogaBayu
by YogaBayu

Sesuai dengan judul dari artikel ini yaitu Button Groups bootstrap. Disini saya akan menjelas kan apakah button groups itu dan apakah bedanya dengan button biasa pada boostrap seperti artikel sebelumnya yaitu Button Bootstrap: Bootstrap Tutorial #4.

Jika teman – teman teman belum membaca dasar dari button pada bootstrap saya sarankan membaca dahulu agar lebih paham dan menurut saya ini merupakan salah satu variasi dalam tampilan button bootstrap.

Langsung saja mari kita mulai

Button Groups bootstrap adalah adalah sekumpulan button pada bootstrap yang dikelompokkan sehingga membentuk serangkaian tombol dalam satu baris. Button groups pada bootstrap dibuat dengan class .btn-group dalam tag <div> sehingga membentuk kelompok button.

Basic Button Groups

Pertama yang perlu teman – teman ketahui adalah dasar pembuatan dari button groups bootstrap. Seperti yang telah saya terangkan sebelumnya bahwa button groups dibuat pada element atau tag <div> dengan memakai class .btn-group. Lebih jelasnya silahkan teman – teman lihat pada contoh program dibawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Button Group</h2>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Home</button>
        <button type="button" class="btn btn-primary">Profile</button>
        <button type="button" class="btn btn-primary">Media</button>
      </div>
    </div>
  </body>
</html>

Seperti yang teman lihat dalam tag <div> dengan class .btn-group terdapat tag button <button> dengan class yang dapat dipilih sesuai dengan kebutuhan. Untuk pemilihan class ini silahkan teman – teman baca pada Button Bootstrap: Bootstrap Tutorial #4. Setiap jenis buttin yang digunakan dalam button group ini memiliki warna yang berbeda dan dapat teman teman sesuaikan dengan kebutuhan dari website teman sendiri.

Ukuran Button Groups

Selain mengatur pemilihan jenis button yang digunakan dalam button group bootstrap ini juga kita dapat mengatur ukuran pembuatan button. yaitu dengan menambahkan class:

  • .btn-group btn-group-lg -> untuk button group dengan ukuran besar
  • .btn-group btn-group-sm -> untuk button group dengan ukuran kecil.

contoh script programnya yaitu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>UkuranButton Group</h2>
      <h3>Large Buttons:</h3>
      <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
      </div>
      <h3>Default Buttons:</h3>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
      </div>
      <h3>Small Buttons:</h3>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
      </div>
    </div>
  </body>
</html>

Button Group Vertikal

Mungkin ada pertanyaan “apakah button group hanya bisa dibentuk searah horizontal ?” jawabannya tidak. button group juga dapat di arah kan secara vertikal, caranya dengan memasukkan class .btn-group-vertical pada elemen atau tag <div>. untuk lebih jelasnya silahkan teman – teman lihat pada contoh script program dibawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Vertikal Button Group</h2>
      <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
      </div>
    </div>
  </body>
</html>

Button Group Bersarang dengan Dropdown

Pernahkah teman – teman lihat button dengan button didalamnya ketika diklik ? . Hal tersebut dinamakan button bersarang. Pada button group hal ini juga dapat dilakukan yaitu dengan memasukkan tag <div> didalam tag <div> dimana kedua tag atau element div ini memiliki class .btn-group. Dan juga jangan lupa pada button yang ingin ditambahkan button didalamnya ada tambahan class yaitu .dropdown-toggle.

Untuk yang lebih jelas silahkan teman – teman lihat pada program dibawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Nesting Button Groups</h2>
      <p>Nest button groups to create dropdown menus:</p>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Sony
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">Smartphone</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Split Button Dropdown

Ini merupakan gabungan fitur bootstrap yaitu Split, button dan dropdown. Lihat program dibawah untuk lebih jelas:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Split Button</h2>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Profil</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Nama</a>
          <a class="dropdown-item" href="#">Sekolah</a>
        </div>
      </div>
    </div>
  </body>
</html>

Button Group vertikal dengan Dropdown

Ini merupakan variasi dari button group, yang isinya adalah button group vertikal dengan adanya tombol dropdown disalah satu button nya. Untuk contoh programnya sendiri teman – teman bisa lihat dibawah ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Button Group vertikal dengan Dropdown</h2>
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">Kiri</button>
      <button type="button" class="btn btn-primary">tengah</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Kanan
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">bisa diisi link</a>
          <a class="dropdown-item" href="#">bisa diisi link</a>
        </div>
      </div>
    </div>
  </div>

  </body>
</html>

Button Group side by side

Pada dasarnya button group jenis ini merupakan dua button group yang berjajar secara horizontal secara default. Apakah ini berlaku untuk button group vertikal ? tentu saja sama, tetapi memang ada sedikit perbedaan. Untuk lebih jelasnya silahkan lihat pada contoh program dibawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Button Group</h2>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">BMW</button>
      <button type="button" class="btn btn-primary">Mercedes</button>
      <button type="button" class="btn btn-primary">Volvo</button>
    </div>
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">BMW</button>
      <button type="button" class="btn btn-primary">Mercedes</button>
      <button type="button" class="btn btn-primary">Volvo</button>
    </div>
  </div>

  </body>
</html>

Fungsi bootstrap disini hanya sebagai mempermudah dalam pembuatan buuton group. Button group juga dapat dibuat dengan menggunakan html dan css saja tanpa bootstrap. contohnya:

<!Doctype html>
<html>
<style>
.btn-group button {
  background-color: #4CAF50;
  border: 1px solid green; 
  color: white; 
  padding: 10px 24px; 
  cursor: pointer;
  float: left; 
}


.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; 
}


.btn-group button:hover {
  background-color: #3e8e41;
}
</style>
<body>

<h1>Button Group</h1>

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

</body>
</html>

Sekian penjelasan mengenai button group dari saya , seperti biasa teman – teman dapat membuat sesuai kebutuhan dan kreasi dari website yang sedang dibuat. terima kasih

You may also like