Button Group | EQUATION - Multipurpose Bootstrap Dashboard Template

Default Outline Mixed Checkbox Radio Toolbar InputGroup Sizes Dropdown Vertical Position

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-primary">Left</button>
    <button type="button" class="btn btn-outline-primary">Middle</button>
    <button type="button" class="btn btn-outline-primary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-danger">Middle</button>
    <button type="button" class="btn btn-success">Right</button>
</div>

Checkbox 1 Checkbox 2 Checkbox 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="p1" autocomplete="off">
    <label class="btn btn-outline-secondary" for="p1">Checkbox 1</label>
    
    <input type="checkbox" class="btn-check" id="p2" autocomplete="off">
    <label class="btn btn-outline-secondary" for="p2">Checkbox 2</label>
    
    <input type="checkbox" class="btn-check" id="p3" autocomplete="off">
    <label class="btn btn-outline-secondary" for="p3">Checkbox 3</label>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-warning" for="btnradio1">Radio 1</label>
    
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-warning" for="btnradio2">Radio 2</label>
    
    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-warning" for="btnradio3">Radio 3</label>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group me-2" 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-success">8</button>
    </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-info">1</button>
        <button type="button" class="btn btn-info">2</button>
        <button type="button" class="btn btn-info">3</button>
        <button type="button" class="btn btn-info">4</button>
    </div>
    <div class="input-group">
        <div class="input-group-text" id="btnGroupAddon2">@</div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
    </div>
</div>

<!-- Large -->

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-dark">Left</button>
<button type="button" class="btn btn-outline-dark">Middle</button>
<button type="button" class="btn btn-outline-dark">Right</button>
</div>

<!-- Default -->

<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-outline-dark">Left</button>
<button type="button" class="btn btn-outline-dark">Middle</button>
<button type="button" class="btn btn-outline-dark">Right</button>
</div>

<!-- Small -->

<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
    <button type="button" class="btn btn-outline-dark">Left</button>
    <button type="button" class="btn btn-outline-dark">Middle</button>
    <button type="button" class="btn btn-outline-dark">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

<!-- Vertical Default -->

<div class="btn-group-vertical me-4" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-secondary">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-secondary">Button</button>
    <button type="button" class="btn btn-secondary">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

<!-- With Radio -->

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked="">
    <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>

Radio 1 Radio 2 Radio 3


<!-- With Radio -->

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked="">
    <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
    <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>

<div class="">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>

<div class="text-center">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>

<div class="text-end">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>

Default

Outline

Mixed

Checkbox

Radio

Toolbar

Input Group

Sizes

Dropdown

Vertical Default

Vertical Radio

Positions

Kara Young

Daisy Anderson

Oscar Garner

Server Rebooted

Kelly Portfolio.pdf

Licence Expiring Soon

Default

Outline

Mixed

Checkbox

Radio

Toolbar

Input Group

Sizes

Dropdown

Vertical Default

Vertical Radio

Positions