diff --git a/bootstrap-5-3-new.html b/bootstrap-5-3-new.html
index b426c6f514..ca2c9bc177 100644
--- a/bootstrap-5-3-new.html
+++ b/bootstrap-5-3-new.html
@@ -40,6 +40,10 @@
     .block-title {
       text-align: center;
     }
+
+    .mr-3{
+      margin-right: 30px;
+    }
   </style>
 </head>
 
@@ -853,8 +857,280 @@ <h4>Toggle states</h4>
                 </div>
               </div>
             </div>
+            <div class="doc-space line">
+              <h2 class="block-title">Button group</h2>
+              <div class="html-center">
+                <h4>Basic example</h4>
+                <p>
+                  Bootstrap:
+                  <a href="https://getbootstrap.com/docs/5.3/components/button-group/#basic-example"
+                    target="_blank">https://getbootstrap.com/docs/5.3/components/button-group/#basic-example</a>
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="mb-3">
+                  <div class="btn-group" role="group" aria-label="Basic example">
+                    <button type="button" class="btn btn-primary">Left</button>
+                    <button type="button" class="btn btn-primary">Middle</button>
+                    <button type="button" class="btn btn-primary">Right</button>
+                  </div>
+                </div>
+                <div class="btn-group">
+                  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
+                  <a href="#" class="btn btn-primary">Link</a>
+                  <a href="#" class="btn btn-primary">Link</a>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Mixed styles</h4>
+                <p>
+                  Bootstrap:
+                  <a href="https://getbootstrap.com/docs/5.3/components/button-group/#mixed-styles"
+                    target="_blank">https://getbootstrap.com/docs/5.3/components/button-group/#mixed-styles</a>
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="btn-group" role="group" aria-label="Basic mixed styles example">
+                  <button type="button" class="btn btn-danger">Left</button>
+                  <button type="button" class="btn btn-warning">Middle</button>
+                  <button type="button" class="btn btn-success">Right</button>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Outlined styles</h4>
+                <p>
+                  Bootstrap:
+                  <a href="https://getbootstrap.com/docs/5.3/components/button-group/#outlined-styles"
+                    target="_blank">https://getbootstrap.com/docs/5.3/components/button-group/#outlined-styles</a>
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="btn-group" role="group" aria-label="Basic outlined example">
+                  <button type="button" class="btn btn-outline-primary">Left</button>
+                  <button type="button" class="btn btn-outline-primary">Middle</button>
+                  <button type="button" class="btn btn-outline-primary">Right</button>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Checkbox and radio button groups</h4>
+                <p>
+                  Bootstrap:
+                  <a href="https://getbootstrap.com/docs/5.3/components/button-group/#checkbox-and-radio-button-groups"
+                    target="_blank">https://getbootstrap.com/docs/5.3/components/button-group/#checkbox-and-radio-button-groups</a>
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="mb-3">
+                  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
+                    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
+
+                    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
+                    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
+
+                    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
+                    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
+                  </div>
+                </div>
+                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+                  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
+
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+                  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
+
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+                  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Button toolbar</h4>
+                <p>
+                  Bootstrap:
+                  <a href="https://getbootstrap.com/docs/5.3/components/button-group/#button-toolbar"
+                    target="_blank">https://getbootstrap.com/docs/5.3/components/button-group/#button-toolbar</a>
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="mb-3">
+                  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+                    <div class="btn-group me-2" role="group" aria-label="First group">
+                      <button type="button" class="btn btn-primary">1</button>
+                      <button type="button" class="btn btn-primary">2</button>
+                      <button type="button" class="btn btn-primary">3</button>
+                      <button type="button" class="btn btn-primary">4</button>
+                    </div>
+                    <div class="btn-group me-2" role="group" aria-label="Second group">
+                      <button type="button" class="btn btn-secondary">5</button>
+                      <button type="button" class="btn btn-secondary">6</button>
+                      <button type="button" class="btn btn-secondary">7</button>
+                    </div>
+                    <div class="btn-group" role="group" aria-label="Third group">
+                      <button type="button" class="btn btn-info">8</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+                  <div class="btn-group me-2" role="group" aria-label="First group">
+                    <button type="button" class="btn btn-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="input-group">
+                    <div class="input-group-text" id="btnGroupAddon">@</div>
+                    <input type="text" class="form-control" placeholder="Input group example"
+                      aria-label="Input group example" aria-describedby="btnGroupAddon">
+                  </div>
+                </div>
+
+                <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+                  <div class="btn-group" role="group" aria-label="First group">
+                    <button type="button" class="btn btn-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="input-group">
+                    <div class="input-group-text" id="btnGroupAddon2">@</div>
+                    <input type="text" class="form-control" placeholder="Input group example"
+                      aria-label="Input group example" aria-describedby="btnGroupAddon2">
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Sizing</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/button-group/#sizing"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/button-group/#sizing</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="btn-group btn-group-lg mb-1" role="group" aria-label="Large button group">
+                  <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>
+                <br>
+                <div class="btn-group mb-1" role="group" aria-label="Default button group">
+                  <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>
+                <br>
+                <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+                  <button type="button" class="btn btn-outline-primary">Left</button>
+                  <button type="button" class="btn btn-outline-primary">Middle</button>
+                  <button type="button" class="btn btn-outline-primary">Right</button>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Nesting</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/button-group/#nesting"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/button-group/#nesting</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+                  <button type="button" class="btn btn-primary">1</button>
+                  <button type="button" class="btn btn-primary">2</button>
+                
+                  <div class="btn-group" role="group">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                      Dropdown
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Vertical variation</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/button-group/#vertical-variation"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/button-group/#vertical-variation</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="btn-group-vertical mr-3" 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>
+                  <button type="button" class="btn btn-primary">Button</button>
+                  <button type="button" class="btn btn-primary">Button</button>
+                </div>
+                <div class="btn-group-vertical mr-3" 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 type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                      Dropdown
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                    </ul>
+                  </div>
+                  <div class="btn-group dropstart" role="group">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                      Dropdown
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                    </ul>
+                  </div>
+                  <div class="btn-group dropend" role="group">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                      Dropdown
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                    </ul>
+                  </div>
+                  <div class="btn-group dropup" role="group">
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                      Dropdown
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
+                  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
+                  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
+                  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
+                  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
+                  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
+                  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
       </main>
     </div>
   </div>