# Buttons Group
# Button group - Bootstrap 4
snippet btngr
<div class="btn-group" role="group" aria-label="${1:Basic example}">
    <button type="button" class="btn btn-secondary">${2:Left}</button>
    <button type="button" class="btn btn-secondary">${2:Middle}</button>
    <button type="button" class="btn btn-secondary">${2:Right}</button>
</div>
endsnippet


# Button toolbar - Bootstrap 4
snippet btntlb
<div class="btn-toolbar" role="toolbar" aria-label="${1:Toolbar with button groups}">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">$1</button>
        <button type="button" class="btn btn-secondary">$2</button>
        <button type="button" class="btn btn-secondary">$3</button>
        <button type="button" class="btn btn-secondary">$4</button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">$5</button>
        <button type="button" class="btn btn-secondary">$6</button>
        <button type="button" class="btn btn-secondary">$7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">$8</button>
    </div>
</div>
endsnippet


# Button group size - Bootstrap 4
snippet btngrsi
<div class="btn-group btn-group-${1:lg|sm|xs}" role="group" aria-label="${2:Toolbar with button groups}">
    $3
</div>
endsnippet


# Button dropdown - Bootstrap 4
snippet btndr
<div class="btn-group" role="group" aria-label="${3:Button group with nested dropdown}">
    <button type="button" class="btn btn-secondary">$1</button>
    <button type="button" class="btn btn-secondary">$2</button>
    <div class="btn-group" role="group">
        <button id="${4:btnGroupDrop1}" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="${5:#}">${6:Dropdown link}</a>
            <a class="dropdown-item" href="${5:#}">${6:Dropdown link}</a>
        </div>
    </div>
</div>
endsnippet

# Button group - Bootstrap 4
snippet btngrvr
<div class="btn-group-vertical" role="group" aria-label="${1:Basic example}">
    <button type="button" class="btn btn-secondary">${2:Left}</button>
    <button type="button" class="btn btn-secondary">${2:Middle}</button>
    <button type="button" class="btn btn-secondary">${2:Right}</button>
</div>
endsnippet