diff --git a/Bootstrap Examples/BootstrapButtonGroups/index.html b/Bootstrap Examples/BootstrapButtonGroups/index.html
new file mode 100644
index 0000000..61cdaa0
--- /dev/null
+++ b/Bootstrap Examples/BootstrapButtonGroups/index.html	
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+    <title>Bootstrap Button Groups</title>
+
+    < </head>
+
+<body>
+
+    <style>
+        .center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 2rem 8rem;
+        }
+    </style>
+    <div>
+        <h1 class="display-3 text-center mt-2">Basic Button Group</h1>
+        <div class="btn-group  center   " 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>
+            <h3 class="display-6 text-center mt-2">Active button group</h3>
+            <div class="btn-group justify-content-center">
+                <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>
+
+        <div>
+            <h3 class="display-6 text-center mt-2">Mixed Style button group</h3>
+            <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>
+
+        <div>
+            <h3 class="display-6 text-center mt-2">Outlined styles button group</h3>
+            <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>
+                <h3 class="display-6 text-center mt-2">Checkbox button groups</h3>
+                <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>
+                <h3 class="display-6 text-center mt-2">Button toolbar button groups</h3>
+                <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>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
+
+<div class="position-absolute top-50 start-50 translate-middle"></div>
\ No newline at end of file
