#### Flat Button

`

    <div class="btn-group btn-group-toggle btn-group-flat">
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Edges Button

`

    <div class="btn-group btn-group-toggle btn-group-edges">
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Basic Buttons

`

    <div class="btn-group btn-group-toggle">
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Outline Middle Buttons

`

    <div class="btn-group btn-group-toggle">
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Outline Side Buttons

`

    <div class="btn-group btn-group-toggle">
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Outline Buttons

`

    <div class="btn-group btn-group-toggle">
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon btn-outline-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right

#### Toolbar Buttons

`

    <li class="d-flex align-items-center justify-content-center mb-2">
       <div class="btn-group btn-group-toggle btn-group-edges mr-2 btn-group1">
          <a class="button btn button-icon bg-primary" target="_blank" href="#">1</a>
          <a class="button btn button-icon bg-primary" target="_blank" href="#">2</a>
          <a class="button btn button-icon bg-primary" target="_blank" href="#">3</a>
       </div>
       <div class="btn-group btn-group-toggle btn-group-edges mr-2 btn-group2"> <a class="button btn button-icon bg-primary" target="_blank" href="#">4</a>
          <a class="button btn button-icon bg-primary" target="_blank" href="#">5</a>
       </div>
       <div class="btn-group btn-group-toggle btn-group3">
          <a class="button btn button-icon bg-primary rounded" target="_blank" href="#">6</a>
       </div>
    </li>

`

- 1 2 3
  4 5
  6
- 1 2 3
  4 5
  6
- 1 2 3
  4 5
  6

#### Basic Buttons

`

    <div class="btn-group btn-group-toggle btn-group-sm  btn-group-edges">
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Left</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Middle</a>
       <a class="button btn button-icon bg-primary" target="_blank" href="#">Right</a>
    </div>

`

- Left Middle Right
- Left Middle Right
- Left Middle Right