<!-- Example primary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

<!-- Example secondary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">راست</button>
  <button type="button" class="btn btn-secondary">وسط</button>
  <button type="button" class="btn btn-secondary">چپ</button>
</div>

<!-- Example success button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">راست</button>
  <button type="button" class="btn btn-success">وسط</button>
  <button type="button" class="btn btn-success">چپ</button>
</div>

<!-- Example danger button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger">راست</button>
  <button type="button" class="btn btn-danger">وسط</button>
  <button type="button" class="btn btn-danger">چپ</button>
</div>

<!-- Example warning button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning">راست</button>
  <button type="button" class="btn btn-warning">وسط</button>
  <button type="button" class="btn btn-warning">چپ</button>
</div>

<!-- Example info button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info">راست</button>
  <button type="button" class="btn btn-info">وسط</button>
  <button type="button" class="btn btn-info">چپ</button>
</div>

<!-- Example light button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light">راست</button>
  <button type="button" class="btn btn-light">وسط</button>
  <button type="button" class="btn btn-light">چپ</button>
</div>

<!-- Example dark button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark">راست</button>
  <button type="button" class="btn btn-dark">وسط</button>
  <button type="button" class="btn btn-dark">چپ</button>
</div>

      

<!-- Example outline primary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">راست</button>
  <button type="button" class="btn btn-outline-primary">وسط</button>
  <button type="button" class="btn btn-outline-primary">چپ</button>
</div>
<!-- Example outline secondary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">راست</button>
  <button type="button" class="btn btn-outline-secondary">وسط</button>
  <button type="button" class="btn btn-outline-secondary">چپ</button>
</div>
<!-- Example outline success button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success">راست</button>
  <button type="button" class="btn btn-outline-success">وسط</button>
  <button type="button" class="btn btn-outline-success">چپ</button>
</div>
<!-- Example outline danger button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger">راست</button>
  <button type="button" class="btn btn-outline-danger">وسط</button>
  <button type="button" class="btn btn-outline-danger">چپ</button>
</div>
<!-- Example outline warning button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning">راست</button>
  <button type="button" class="btn btn-outline-warning">وسط</button>
  <button type="button" class="btn btn-outline-warning">چپ</button>
</div>
<!-- Example outline info button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info">راست</button>
  <button type="button" class="btn btn-outline-info">وسط</button>
  <button type="button" class="btn btn-outline-info">چپ</button>
</div>
<!-- Example outline light button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light">راست</button>
  <button type="button" class="btn btn-outline-light">وسط</button>
  <button type="button" class="btn btn-outline-light">چپ</button>
</div>
<!-- Example outline dark button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-dark">راست</button>
  <button type="button" class="btn btn-outline-dark">وسط</button>
  <button type="button" class="btn btn-outline-dark">چپ</button>
</div>

      

<!-- Example icon primary button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-primary">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon secondary button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-secondary">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon success button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-success">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon danger button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-danger">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon warning button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-warning">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon info button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-info">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon light button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-light">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example icon dark button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-dark">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

      

<!-- Example outline icon primary button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-primary">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon secondary button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-secondary">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon success button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-success">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon danger button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-danger">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon warning button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-warning">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon info button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-info">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon light button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-light">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

<!-- Example outline icon dark button group -->
<div class="btn-group mb-4 ml-3" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-right mr-1"></i> راست
  </button>
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-center mr-1"></i> وسط
  </button>
  <button type="button" class="btn btn-outline-dark">
    <i class="mdi mdi-format-align-left mr-1"></i> چپ
  </button>
</div>

      

<!-- Example large button primary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary btn-lg">راست</button>
  <button type="button" class="btn btn-primary btn-lg">وسط</button>
  <button type="button" class="btn btn-primary btn-lg">چپ</button>
</div>
<!-- Example large button secondary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary btn-lg">راست</button>
  <button type="button" class="btn btn-secondary btn-lg">وسط</button>
  <button type="button" class="btn btn-secondary btn-lg">چپ</button>
</div>
<!-- Example large button success button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success btn-lg">راست</button>
  <button type="button" class="btn btn-success btn-lg">وسط</button>
  <button type="button" class="btn btn-success btn-lg">چپ</button>
</div>
<!-- Example large button danger button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger btn-lg">راست</button>
  <button type="button" class="btn btn-danger btn-lg">وسط</button>
  <button type="button" class="btn btn-danger btn-lg">چپ</button>
</div>
<!-- Example large button warning button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-warning btn-lg">راست</button>
  <button type="button" class="btn btn-warning btn-lg">وسط</button>
  <button type="button" class="btn btn-warning btn-lg">چپ</button>
</div>
<!-- Example large button info button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info btn-lg">راست</button>
  <button type="button" class="btn btn-info btn-lg">وسط</button>
  <button type="button" class="btn btn-info btn-lg">چپ</button>
</div>
<!-- Example large button light button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-light btn-lg">راست</button>
  <button type="button" class="btn btn-light btn-lg">وسط</button>
  <button type="button" class="btn btn-light btn-lg">چپ</button>
</div>
<!-- Example large button dark button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-lg">راست</button>
  <button type="button" class="btn btn-dark btn-lg">وسط</button>
  <button type="button" class="btn btn-dark btn-lg">چپ</button>
</div>

      

  <!-- Example large outline primary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary btn-lg">راست</button>
  <button type="button" class="btn btn-outline-primary btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-primary btn-lg">چپ</button>
</div>
<!-- Example large outline secondary button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary btn-lg">راست</button>
  <button type="button" class="btn btn-outline-secondary btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-secondary btn-lg">چپ</button>
</div>
<!-- Example large outline success button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-success btn-lg">راست</button>
  <button type="button" class="btn btn-outline-success btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-success btn-lg">چپ</button>
</div>
<!-- Example large outline danger button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-danger btn-lg">راست</button>
  <button type="button" class="btn btn-outline-danger btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-danger btn-lg">چپ</button>
</div>
<!-- Example large outline warning button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-warning btn-lg">راست</button>
  <button type="button" class="btn btn-outline-warning btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-warning btn-lg">چپ</button>
</div>
<!-- Example large outline info button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-info btn-lg">راست</button>
  <button type="button" class="btn btn-outline-info btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-info btn-lg">چپ</button>
</div>
<!-- Example large outline light button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-light btn-lg">راست</button>
  <button type="button" class="btn btn-outline-light btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-light btn-lg">چپ</button>
</div>
<!-- Example large outline dark button group -->
<div class="btn-group ml-3 mb-4" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-dark btn-lg">راست</button>
  <button type="button" class="btn btn-outline-dark btn-lg">وسط</button>
  <button type="button" class="btn btn-outline-dark btn-lg">چپ</button>
</div>

      

<!-- Example toolbar primary button group -->
<div class="btn-toolbar d-inline-block ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting secondary button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting success button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting danger button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting warning button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting info button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting light button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Neting dark button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

      

<!-- Example outline Nesting primary button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting secondary button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting success button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting danger button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting warning button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting info button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting light button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline Nesting dark button group -->
<div class="btn-group ml-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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

      

<!-- Example Vertical primary button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">دکمه</button>
  <button type="button" class="btn btn-primary">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical secondary button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">دکمه</button>
  <button type="button" class="btn btn-secondary">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical success button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-success">دکمه</button>
  <button type="button" class="btn btn-success">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical danger button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-danger">دکمه</button>
  <button type="button" class="btn btn-danger">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical warning button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-warning">دکمه</button>
  <button type="button" class="btn btn-warning">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical info button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-info">دکمه</button>
  <button type="button" class="btn btn-info">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical light button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-light">دکمه</button>
  <button type="button" class="btn btn-light">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example Vertical dark button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-dark">دکمه</button>
  <button type="button" class="btn btn-dark">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

              

<!-- Example outline vertical primary button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-primary">دکمه</button>
  <button type="button" class="btn btn-outline-primary">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical secondary button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-secondary">دکمه</button>
  <button type="button" class="btn btn-outline-secondary">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical success button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-success">دکمه</button>
  <button type="button" class="btn btn-outline-success">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical danger button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-danger">دکمه</button>
  <button type="button" class="btn btn-outline-danger">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical dark warning group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-warning">دکمه</button>
  <button type="button" class="btn btn-outline-warning">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical info button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-info">دکمه</button>
  <button type="button" class="btn btn-outline-info">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical light button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-light">دکمه</button>
  <button type="button" class="btn btn-outline-light">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>

<!-- Example outline vertical dark button group -->
<div class="btn-group-vertical ml-3 mb-4" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-dark">دکمه</button>
  <button type="button" class="btn btn-outline-dark">دکمه</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">
      منو کشویی
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">لینک</a>
      <a class="dropdown-item" href="#">لینک</a>
    </div>
  </div>
</div>