Bootstrap Button Groups

I.Latar Belakang.Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.

•   Laptop / PC
•   W3SCHOOLS
•   Sublime Text

III.Tujuan.Agar tampilan suatu program itu responsiv.

IV.Penjelasan.

Bootstrap Button Groups

Button Groups
Bootstrap memungkinkan Anda mengelompokkan serangkaian tombol secara bersamaan (dalam satu baris) di grup tombol:

Gunakan elemen <div> dengan kelas .btn-group untuk membuat grup tombol:
Contoh

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

Tip: Alih-alih menerapkan ukuran tombol ke setiap tombol dalam grup, gunakan kelas .btn-group-lg | sm | xs untuk mengukur semua tombol dalam grup:
Contoh

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

Vertical Button Groups
Bootstrap juga mendukung grup tombol vertikal:

Gunakan kelas .btn-group-vertical untuk membuat grup tombol vertikal:
Contoh

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

Justified Button Groups
Untuk menjangkau seluruh lebar layar, gunakan kelas .btn-group-justified:

Contoh dengan elemen <a>:
Contoh

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Catatan: Untuk elemen <button>, Anda harus membungkus setiap tombol di kelas .btn-group:
Contoh

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

Nesting Button Groups & Dropdown Menus
Kelompok tombol Nest untuk membuat menu dropdown:
Contoh

<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 <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Split Button DropdownsContoh :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>
 

Contoh :

 Maka outputnya :

V.Kesimpulan.
Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
 

VI.Refrensi. 

• https://www.w3schools.com/bootstrap/bootstrap_typography.asp