Bootstrap Button Group

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần nhóm button (button group) trong Bootstrap.

Tạo nhóm button với Bootstrap

Trong chương trước, bạn đã học cách tạo các loại button riêng lẻ và cách thay đổi chúng với các lớp được định nghĩa trước. Tuy nhiên, Bootstrap cũng cho phép bạn nhóm một loạt các button lại với nhau trong một hàng duy nhất thông qua thành phần nhóm button.

Để tạo một nhóm button, chỉ cần bọc một loạt các button với lớp .btn trong một phần tử <div> và áp dụng lớp .btn-group trên đó. Ngoài ra, bạn có thể áp dụng lớp .active trên một button riêng lẻ để biểu thị trạng thái hoạt động. Hãy xem ví dụ sau:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary active">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tương tự, bạn cũng có thể tạo các nhóm button bằng cách sử dụng các button kiểu viền, như sau:

<div class="btn-group">
    <button type="button" class="btn btn-outline-primary">Home</button>
    <button type="button" class="btn btn-outline-primary active">About</button>
    <button type="button" class="btn btn-outline-primary">Services</button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Xem hướng dẫn về các button bật tắt trong Bootstrap để tìm hiểu cách bật các radio button và checkbox như bật / tắt trên các nhóm button mà không cần sử dụng bất kỳ mã JavaScript nào.

Nhóm button kiểu hỗn hợp

Bạn cũng có thể trộn và kết hợp các kiểu button khác nhau để tạo các nhóm button như sau:

<div class="btn-group">
    <button type="button" class="btn btn-success">
        <i class="bi-eye"></i> View
    </button>
    <button type="button" class="btn btn-warning">
        <i class="bi-pencil"></i> Edit
    </button>
    <button type="button" class="btn btn-danger">
        <i class="bi-trash"></i> Delete
    </button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh công cụ

Bạn cũng có thể kết hợp các nhóm button với nhau để tạo các thành phần phức tạp hơn như thanh công cụ. Để tạo thanh công cụ, chỉ cần bọc các nhóm button trong một phần tử <div> và áp dụng lớp .btn-toolbar trên đó, như thể hiện trong ví dụ sau:

<div class="btn-toolbar">
    <div class="btn-group me-2">
        <button type="button" class="btn btn-primary">
            <i class="bi-fonts"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-type-bold"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-type-italic"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-type-underline"></i>
        </button>
    </div>
    <div class="btn-group me-2">
        <button type="button" class="btn btn-primary">
            <i class="bi-text-left"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-text-center"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-text-right"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="bi-justify"></i>
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">
            <i class="bi-code"></i>
        </button>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi kích thước của nhóm button

Thay vì áp dụng các lớp thay đổi kích thước cho từng button trong một nhóm, bạn có thể chỉ cần áp dụng các lớp thay đổi kích thước cho nhóm button như .btn-group-lg hoặc .btn-group-sm trực tiếp cho từng phần tử .btn-group để tạo các nhóm button lớn hơn hoặc nhỏ hơn, như thể hiện trong ví dụ dưới đây:

<!-- Large button group -->
<div class="btn-group mb-2 btn-group-lg">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<!-- Default button group -->
<div class="btn-group mb-2">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>
<br>
<!-- Small button group -->
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Nhóm button lồng nhau

Các nhóm button cũng có thể được lồng vào nhau. Ví dụ sau minh họa cách đặt một .btn-group trong một  .btn-group khác để tạo menu thả xuống bên trong các nhóm button.

<div class="btn-group">
    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">About</a>
    <div class="btn-group">
        <a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Services</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Web Design</a>
            <a class="dropdown-item" href="#">Web Development</a>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bạn sẽ tìm hiểu chi tiết về thành phần Bootstrap Dropdown trong phần nâng cao.

Nhóm button xếp chồng theo chiều dọc

Bạn cũng có thể làm cho các nhóm button xuất hiện xếp chồng lên nhau theo chiều dọc thay vì theo chiều ngang. Để làm điều này, chỉ cần thay thế lớp .btn-group bằng lớp .btn-group-vertical, như sau:

<div class="btn-group-vertical">
    <a href="#" class="btn btn-primary">Home</a>
    <a href="#" class="btn btn-primary">About</a>
    <div class="btn-group">
        <a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Services</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Web Design</a>
            <a class="dropdown-item" href="#">Web Development</a>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo nhóm button lấp đầy chiều rộng

Bạn cũng có thể kéo dài các nhóm button của mình để lấp đầy tất cả chiều rộng có sẵn bằng cách áp dụng lớp tiện ích flex .d-flex cho phần tử .btn-group. Mọi button đều có chiều rộng bằng nhau trong trường hợp này.

<div class="btn-group d-flex">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Services</button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bootstrap • Bootstrap Cơ Bản