<!-- Example primary button group -->
<div class="btn-group mr-3 mb-4" 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>

<!-- Example secondary button group -->
<div class="btn-group mr-3 mb-4" 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>

<!-- Example success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">Left</button>
  <button type="button" class="btn btn-success">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

<!-- Example danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-danger">Middle</button>
  <button type="button" class="btn btn-danger">Right</button>
</div>

<!-- Example warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-warning">Right</button>
</div>

<!-- Example info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info">Left</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Right</button>
</div>

<!-- Example light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light">Left</button>
  <button type="button" class="btn btn-light">Middle</button>
  <button type="button" class="btn btn-light">Right</button>
</div>

<!-- Example dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark">Left</button>
  <button type="button" class="btn btn-dark">Middle</button>
  <button type="button" class="btn btn-dark">Right</button>
</div>

      

<!-- Example outline primary button group -->
<div class="btn-group mr-3 mb-4" 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>
<!-- Example outline secondary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">Left</button>
  <button type="button" class="btn btn-outline-secondary">Middle</button>
  <button type="button" class="btn btn-outline-secondary">Right</button>
</div>
<!-- Example outline success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success">Left</button>
  <button type="button" class="btn btn-outline-success">Middle</button>
  <button type="button" class="btn btn-outline-success">Right</button>
</div>
<!-- Example outline danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger">Left</button>
  <button type="button" class="btn btn-outline-danger">Middle</button>
  <button type="button" class="btn btn-outline-danger">Right</button>
</div>
<!-- Example outline warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning">Left</button>
  <button type="button" class="btn btn-outline-warning">Middle</button>
  <button type="button" class="btn btn-outline-warning">Right</button>
</div>
<!-- Example outline info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info">Left</button>
  <button type="button" class="btn btn-outline-info">Middle</button>
  <button type="button" class="btn btn-outline-info">Right</button>
</div>
<!-- Example outline light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light">Left</button>
  <button type="button" class="btn btn-outline-light">Middle</button>
  <button type="button" class="btn btn-outline-light">Right</button>
</div>
<!-- Example outline dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <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>

      

<!-- Example icon primary button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon secondary button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon success button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon danger button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon warning button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon info button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon light button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example icon dark button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

      

<!-- Example outline icon primary button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon secondary button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon success button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon danger button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon warning button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon info button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon light button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

<!-- Example outline icon dark button group -->
<div class="btn-group mb-4 mr-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-left mr-1"></i> Left
  </button>
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-center mr-1"></i> Middle
  </button>
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-right mr-1"></i> Right
  </button>
</div>

      

<!-- Example large button primary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary btn-lg">Left</button>
  <button type="button" class="btn btn-primary btn-lg">Middle</button>
  <button type="button" class="btn btn-primary btn-lg">Right</button>
</div>
<!-- Example large button secondary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary btn-lg">Left</button>
  <button type="button" class="btn btn-secondary btn-lg">Middle</button>
  <button type="button" class="btn btn-secondary btn-lg">Right</button>
</div>
<!-- Example large button success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success btn-lg">Left</button>
  <button type="button" class="btn btn-success btn-lg">Middle</button>
  <button type="button" class="btn btn-success btn-lg">Right</button>
</div>
<!-- Example large button danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger btn-lg">Left</button>
  <button type="button" class="btn btn-danger btn-lg">Middle</button>
  <button type="button" class="btn btn-danger btn-lg">Right</button>
</div>
<!-- Example large button warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning btn-lg">Left</button>
  <button type="button" class="btn btn-warning btn-lg">Middle</button>
  <button type="button" class="btn btn-warning btn-lg">Right</button>
</div>
<!-- Example large button info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info btn-lg">Left</button>
  <button type="button" class="btn btn-info btn-lg">Middle</button>
  <button type="button" class="btn btn-info btn-lg">Right</button>
</div>
<!-- Example large button light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light btn-lg">Left</button>
  <button type="button" class="btn btn-light btn-lg">Middle</button>
  <button type="button" class="btn btn-light btn-lg">Right</button>
</div>
<!-- Example large button dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-lg">Left</button>
  <button type="button" class="btn btn-dark btn-lg">Middle</button>
  <button type="button" class="btn btn-dark btn-lg">Right</button>
</div>

      

  <!-- Example large outline primary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary btn-lg">Left</button>
  <button type="button" class="btn btn-outline-primary btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-primary btn-lg">Right</button>
</div>
<!-- Example large outline secondary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary btn-lg">Left</button>
  <button type="button" class="btn btn-outline-secondary btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-secondary btn-lg">Right</button>
</div>
<!-- Example large outline success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success btn-lg">Left</button>
  <button type="button" class="btn btn-outline-success btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-success btn-lg">Right</button>
</div>
<!-- Example large outline danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger btn-lg">Left</button>
  <button type="button" class="btn btn-outline-danger btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-danger btn-lg">Right</button>
</div>
<!-- Example large outline warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning btn-lg">Left</button>
  <button type="button" class="btn btn-outline-warning btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-warning btn-lg">Right</button>
</div>
<!-- Example large outline info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info btn-lg">Left</button>
  <button type="button" class="btn btn-outline-info btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-info btn-lg">Right</button>
</div>
<!-- Example large outline light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light btn-lg">Left</button>
  <button type="button" class="btn btn-outline-light btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-light btn-lg">Right</button>
</div>
<!-- Example large outline dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-dark btn-lg">Left</button>
  <button type="button" class="btn btn-outline-dark btn-lg">Middle</button>
  <button type="button" class="btn btn-outline-dark btn-lg">Right</button>
</div>

      

<!-- Example toolbar primary button group -->
<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" 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 mr-2 mb-3" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
  <div class="btn-group mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-primary">8</button>
  </div>
</div>

<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" 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 mr-2 mb-3" 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 mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
    <button type="button" class="btn btn-success">1</button>
    <button type="button" class="btn btn-success">2</button>
    <button type="button" class="btn btn-success">3</button>
    <button type="button" class="btn btn-success">4</button>
  </div>
  <div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
    <button type="button" class="btn btn-success">5</button>
    <button type="button" class="btn btn-success">6</button>
    <button type="button" class="btn btn-success">7</button>
  </div>
  <div class="btn-group mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-success">8</button>
  </div>
</div>

<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
    <button type="button" class="btn btn-danger">1</button>
    <button type="button" class="btn btn-danger">2</button>
    <button type="button" class="btn btn-danger">3</button>
    <button type="button" class="btn btn-danger">4</button>
  </div>
  <div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
    <button type="button" class="btn btn-danger">5</button>
    <button type="button" class="btn btn-danger">6</button>
    <button type="button" class="btn btn-danger">7</button>
  </div>
  <div class="btn-group mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-danger">8</button>
  </div>
</div>

<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
    <button type="button" class="btn btn-warning">1</button>
    <button type="button" class="btn btn-warning">2</button>
    <button type="button" class="btn btn-warning">3</button>
    <button type="button" class="btn btn-warning">4</button>
  </div>
  <div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
    <button type="button" class="btn btn-warning">5</button>
    <button type="button" class="btn btn-warning">6</button>
    <button type="button" class="btn btn-warning">7</button>
  </div>
  <div class="btn-group mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-warning">8</button>
  </div>
</div>

<div class="btn-toolbar d-inline-block mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-3" 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="btn-group mr-2 mb-3" role="group" aria-label="Second group">
    <button type="button" class="btn btn-info">5</button>
    <button type="button" class="btn btn-info">6</button>
    <button type="button" class="btn btn-info">7</button>
  </div>
  <div class="btn-group mb-3" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

              

  <!-- Example outline toolbar primary button group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-primary">5</button>
    <button type="button" class="btn btn-outline-primary">6</button>
    <button type="button" class="btn btn-outline-primary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-primary">8</button>
  </div>
</div>

<!-- Example outline toolbar dark secondary group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-secondary">5</button>
    <button type="button" class="btn btn-outline-secondary">6</button>
    <button type="button" class="btn btn-outline-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-secondary">8</button>
  </div>
</div>

<!-- Example outline toolbar success button group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-success">1</button>
    <button type="button" class="btn btn-outline-success">2</button>
    <button type="button" class="btn btn-outline-success">3</button>
    <button type="button" class="btn btn-outline-success">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-success">5</button>
    <button type="button" class="btn btn-outline-success">6</button>
    <button type="button" class="btn btn-outline-success">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-success">8</button>
  </div>
</div>

<!-- Example outline toolbar danger button group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-danger">1</button>
    <button type="button" class="btn btn-outline-danger">2</button>
    <button type="button" class="btn btn-outline-danger">3</button>
    <button type="button" class="btn btn-outline-danger">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-danger">5</button>
    <button type="button" class="btn btn-outline-danger">6</button>
    <button type="button" class="btn btn-outline-danger">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-danger">8</button>
  </div>
</div>

<!-- Example outline toolbar warning button group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-warning">1</button>
    <button type="button" class="btn btn-outline-warning">2</button>
    <button type="button" class="btn btn-outline-warning">3</button>
    <button type="button" class="btn btn-outline-warning">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-warning">5</button>
    <button type="button" class="btn btn-outline-warning">6</button>
    <button type="button" class="btn btn-outline-warning">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-warning">8</button>
  </div>
</div>

<!-- Example outline toolbar info button group -->
<div class="btn-toolbar d-inline-block mb-4 mr-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-info">1</button>
    <button type="button" class="btn btn-outline-info">2</button>
    <button type="button" class="btn btn-outline-info">3</button>
    <button type="button" class="btn btn-outline-info">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-info">5</button>
    <button type="button" class="btn btn-outline-info">6</button>
    <button type="button" class="btn btn-outline-info">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-info">8</button>
  </div>
</div>

      

<!-- Example Neting primary button group -->
<div class="btn-group mr-3 mb-4" 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-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting secondary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="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="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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-success">1</button>
  <button type="button" class="btn btn-success">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-success 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-danger">1</button>
  <button type="button" class="btn btn-danger">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-danger 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-warning">1</button>
  <button type="button" class="btn btn-warning">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-warning 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-info">1</button>
  <button type="button" class="btn btn-info">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-info 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-light">1</button>
  <button type="button" class="btn btn-light">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-light 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Neting dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-dark">1</button>
  <button type="button" class="btn btn-dark">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-dark 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

      

<!-- Example outline Nesting primary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-primary">1</button>
  <button type="button" class="btn btn-outline-primary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-primary 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting secondary button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-secondary">1</button>
  <button type="button" class="btn btn-outline-secondary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting success button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-success">1</button>
  <button type="button" class="btn btn-outline-success">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-success 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting danger button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-danger">1</button>
  <button type="button" class="btn btn-outline-danger">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-danger 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting warning button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-warning">1</button>
  <button type="button" class="btn btn-outline-warning">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-warning 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting info button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-info">1</button>
  <button type="button" class="btn btn-outline-info">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-info 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting light button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-light">1</button>
  <button type="button" class="btn btn-outline-light">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-light 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting dark button group -->
<div class="btn-group mr-3 mb-4" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-dark">1</button>
  <button type="button" class="btn btn-outline-dark">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-dark 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="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

      

<!-- Example Vertical primary button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical secondary button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <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="btnGroupVerticalDrop1" 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="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical success button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-success">Button</button>
  <button type="button" class="btn btn-success">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical danger button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-danger">Button</button>
  <button type="button" class="btn btn-danger">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical warning button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-warning">Button</button>
  <button type="button" class="btn btn-warning">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical info button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-info">Button</button>
  <button type="button" class="btn btn-info">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical light button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-light">Button</button>
  <button type="button" class="btn btn-light">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example Vertical dark button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

              

<!-- Example outline vertical primary button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-primary">Button</button>
  <button type="button" class="btn btn-outline-primary">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-primary dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical secondary button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical success button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-success">Button</button>
  <button type="button" class="btn btn-outline-success">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-success dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical danger button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-danger">Button</button>
  <button type="button" class="btn btn-outline-danger">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-danger dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical dark warning group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-warning">Button</button>
  <button type="button" class="btn btn-outline-warning">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-warning dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical info button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-info">Button</button>
  <button type="button" class="btn btn-outline-info">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical light button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-light">Button</button>
  <button type="button" class="btn btn-outline-light">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-light dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Example outline vertical dark button group -->
<div class="btn-group-vertical mr-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-dark">Button</button>
  <button type="button" class="btn btn-outline-dark">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>