Hướng dẫn sử dụng Bootstrap Button Group
Xem thêm các chuyên mục:
Bao bọc một danh sách các Bootstrap Button (.btn) trong một .btn-group để tạo ra một Button Group. Lớp .btn-group sẽ làm cho các .btn nằm sát nhau trên một hàng.

<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
Đối với <div class="btn-group"> bạn nên sử dụng các thuộc tính role, aria-label, mặc dù điều này không bắt buộc nhưng nó là code thân thiện với các thiết bị như Screen Reader.
Xem ví dụ đầy đủ cho Button Group:

button-group-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Button Group</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h4 class="mb-4">Wrap series of .btn(s) in .btn-group</h4> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <h4 class="mt-5 mb-4">Serials of .btn(s)</h4> <div> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Sử dụng lớp .btn-group-vertical để tạo một Button Group thẳng đứng.
<div class="btn-group btn-group-vertical" role="group" aria-label="Vertical Button Group"> <button type="button" class="btn btn-secondary">Top</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Bottom</button> </div>

Các Dropdown Menu cũng có thể tham gia vào trong một Button Group.

button-group-dropdown-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Button Group</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <h4 class="mb-4">Button Group with Dropdown Menu</h4> <div class="btn-group" role="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 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sony <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smart Phone</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Bao bọc (wrap) một danh sách các .btn-group bên trong một .btn-toolbar bạn sẽ có một thanh công cụ phức tạp. Nó giống như hình minh họa dưới đây:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="Clipboard group"> <button type="button" class="btn btn-primary">Copy</button> <button type="button" class="btn btn-primary">Paste</button> <button type="button" class="btn btn-primary">Cut</button> </div> <div class="btn-group mr-2" role="group" aria-label="Styles group"> <button type="button" class="btn btn-secondary">Font</button> <button type="button" class="btn btn-secondary">Size</button> </div> <div class="btn-group" role="group" aria-label="Source group"> <button type="button" class="btn btn-success">Source</button> </div> </div>
.mr-2 (Margin Right 2) là một lớp tiện ích của Bootstrap, bạn có thể tìm hiểu về các lớp tiện ích trong Bootstrap trong bài viết dưới đây: