twitter-bootstrap-rails 5.3.0 → 5.4.0

data/lib/generators/bootstrap/snippets/templates/breadcrumbs/basic.html.erb

@@ -0,0 +1,9 @@
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>

data/lib/generators/bootstrap/snippets/templates/breadcrumbs/chevron.html.erb

@@ -0,0 +1,18 @@
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis" href="#">
+          <svg class="bi" width="16" height="16" aria-hidden="true">
+            <use xlink:href="#house-door-fill"></use>
+          </svg>
+          <span class="visually-hidden">Home</span>
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>

data/lib/generators/bootstrap/snippets/templates/breadcrumbs/custom.html.erb

@@ -0,0 +1,18 @@
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
+          <svg class="bi" width="16" height="16" aria-hidden="true">
+            <use xlink:href="#house-door-fill"></use>
+          </svg>
+          Home
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>

data/lib/generators/bootstrap/snippets/templates/breadcrumbs/with_icons.html.erb

@@ -0,0 +1,18 @@
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis" href="#">
+          <svg class="bi" width="16" height="16" aria-hidden="true">
+            <use xlink:href="#house-door-fill"></use>
+          </svg>
+          <span class="visually-hidden">Home</span>
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>

data/lib/generators/bootstrap/snippets/templates/buttons/circle.html.erb

@@ -0,0 +1,20 @@
+<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
+  <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"></use></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+  <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"></use></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+</div>
+<div class="d-flex gap-2 justify-content-center pb-5">
+  <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"></use></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+  <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"></use></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+</div>

data/lib/generators/bootstrap/snippets/templates/buttons/grid.html.erb

@@ -0,0 +1,6 @@
+<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+  <div class="d-grid gap-2">
+    <button class="btn btn-outline-secondary" type="button">Secondary action</button>
+    <button class="btn btn-primary" type="button">Primary action</button>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/buttons/loading.html.erb

@@ -0,0 +1,10 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary" type="button" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span class="visually-hidden" role="status">Loading...</span>
+  </button>
+  <button class="btn btn-primary" type="button" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span role="status">Loading...</span>
+  </button>
+</div>

data/lib/generators/bootstrap/snippets/templates/buttons/pills.html.erb

@@ -0,0 +1,11 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
+  <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
+  <button class="btn btn-success rounded-pill px-3" type="button">Success</button>
+  <button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
+  <button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
+  <button class="btn btn-info rounded-pill px-3" type="button">Info</button>
+  <button class="btn btn-light rounded-pill px-3" type="button">Light</button>
+  <button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
+  <button class="btn btn-link rounded-pill px-3" type="button">Link</button>
+</div>

data/lib/generators/bootstrap/snippets/templates/buttons/with_icons.html.erb

@@ -0,0 +1,14 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary d-inline-flex align-items-center" type="button">
+    Primary icon
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true">
+      <use xlink:href="#arrow-right-short"></use>
+    </svg>
+  </button>
+  <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
+    Secondary icon
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true">
+      <use xlink:href="#arrow-right-short"></use>
+    </svg>
+  </button>
+</div>

data/lib/generators/bootstrap/snippets/templates/dropdowns/calendar.html.erb

@@ -0,0 +1,156 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="light">
+    <div class="d-grid gap-1">
+      <div class="cal">
+        <div class="cal-month">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
+            <svg class="bi" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#arrow-left-short"></use>
+            </svg>
+          </button>
+          <strong class="cal-month-name">June</strong>
+          <select class="form-select cal-month-name d-none">
+            <option value="January">January</option>
+            <option value="February">February</option>
+            <option value="March">March</option>
+            <option value="April">April</option>
+            <option value="May">May</option>
+            <option selected value="June">June</option>
+            <option value="July">July</option>
+            <option value="August">August</option>
+            <option value="September">September</option>
+            <option value="October">October</option>
+            <option value="November">November</option>
+            <option value="December">December</option>
+          </select>
+          <button class="btn cal-btn" type="button" aria-label="next month">
+            <svg class="bi" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#arrow-right-short"></use>
+            </svg>
+          </button>
+        </div>
+        <div class="cal-weekdays text-body-secondary">
+          <div class="cal-weekday">Sun</div>
+          <div class="cal-weekday">Mon</div>
+          <div class="cal-weekday">Tue</div>
+          <div class="cal-weekday">Wed</div>
+          <div class="cal-weekday">Thu</div>
+          <div class="cal-weekday">Fri</div>
+          <div class="cal-weekday">Sat</div>
+        </div>
+        <div class="cal-days">
+          <button class="btn cal-btn" disabled type="button">30</button>
+          <button class="btn cal-btn" disabled type="button">31</button>
+          <button class="btn cal-btn" type="button">1</button>
+          <button class="btn cal-btn" type="button">2</button>
+          <button class="btn cal-btn" type="button">3</button>
+          <button class="btn cal-btn" type="button">4</button>
+          <button class="btn cal-btn" type="button">5</button>
+          <button class="btn cal-btn" type="button">6</button>
+          <button class="btn cal-btn" type="button">7</button>
+          <button class="btn cal-btn" type="button">8</button>
+          <button class="btn cal-btn" type="button">9</button>
+          <button class="btn cal-btn" type="button">10</button>
+          <button class="btn cal-btn" type="button">11</button>
+          <button class="btn cal-btn" type="button">12</button>
+          <button class="btn cal-btn" type="button">13</button>
+          <button class="btn cal-btn" type="button">14</button>
+          <button class="btn cal-btn" type="button">15</button>
+          <button class="btn cal-btn" type="button">16</button>
+          <button class="btn cal-btn" type="button">17</button>
+          <button class="btn cal-btn" type="button">18</button>
+          <button class="btn cal-btn" type="button">19</button>
+          <button class="btn cal-btn" type="button">20</button>
+          <button class="btn cal-btn" type="button">21</button>
+          <button class="btn cal-btn" type="button">22</button>
+          <button class="btn cal-btn" type="button">23</button>
+          <button class="btn cal-btn" type="button">24</button>
+          <button class="btn cal-btn" type="button">25</button>
+          <button class="btn cal-btn" type="button">26</button>
+          <button class="btn cal-btn" type="button">27</button>
+          <button class="btn cal-btn" type="button">28</button>
+          <button class="btn cal-btn" type="button">29</button>
+          <button class="btn cal-btn" type="button">30</button>
+          <button class="btn cal-btn" type="button">31</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="dark">
+    <div class="d-grid gap-1">
+      <div class="cal">
+        <div class="cal-month">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
+            <svg class="bi" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#arrow-left-short"></use>
+            </svg>
+          </button>
+          <strong class="cal-month-name">June</strong>
+          <select class="form-select cal-month-name d-none">
+            <option value="January">January</option>
+            <option value="February">February</option>
+            <option value="March">March</option>
+            <option value="April">April</option>
+            <option value="May">May</option>
+            <option selected value="June">June</option>
+            <option value="July">July</option>
+            <option value="August">August</option>
+            <option value="September">September</option>
+            <option value="October">October</option>
+            <option value="November">November</option>
+            <option value="December">December</option>
+          </select>
+          <button class="btn cal-btn" type="button" aria-label="next month">
+            <svg class="bi" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#arrow-right-short"></use>
+            </svg>
+          </button>
+        </div>
+        <div class="cal-weekdays text-body-secondary">
+          <div class="cal-weekday">Sun</div>
+          <div class="cal-weekday">Mon</div>
+          <div class="cal-weekday">Tue</div>
+          <div class="cal-weekday">Wed</div>
+          <div class="cal-weekday">Thu</div>
+          <div class="cal-weekday">Fri</div>
+          <div class="cal-weekday">Sat</div>
+        </div>
+        <div class="cal-days">
+          <button class="btn cal-btn" disabled type="button">30</button>
+          <button class="btn cal-btn" disabled type="button">31</button>
+          <button class="btn cal-btn" type="button">1</button>
+          <button class="btn cal-btn" type="button">2</button>
+          <button class="btn cal-btn" type="button">3</button>
+          <button class="btn cal-btn" type="button">4</button>
+          <button class="btn cal-btn" type="button">5</button>
+          <button class="btn cal-btn" type="button">6</button>
+          <button class="btn cal-btn" type="button">7</button>
+          <button class="btn cal-btn" type="button">8</button>
+          <button class="btn cal-btn" type="button">9</button>
+          <button class="btn cal-btn" type="button">10</button>
+          <button class="btn cal-btn" type="button">11</button>
+          <button class="btn cal-btn" type="button">12</button>
+          <button class="btn cal-btn" type="button">13</button>
+          <button class="btn cal-btn" type="button">14</button>
+          <button class="btn cal-btn" type="button">15</button>
+          <button class="btn cal-btn" type="button">16</button>
+          <button class="btn cal-btn" type="button">17</button>
+          <button class="btn cal-btn" type="button">18</button>
+          <button class="btn cal-btn" type="button">19</button>
+          <button class="btn cal-btn" type="button">20</button>
+          <button class="btn cal-btn" type="button">21</button>
+          <button class="btn cal-btn" type="button">22</button>
+          <button class="btn cal-btn" type="button">23</button>
+          <button class="btn cal-btn" type="button">24</button>
+          <button class="btn cal-btn" type="button">25</button>
+          <button class="btn cal-btn" type="button">26</button>
+          <button class="btn cal-btn" type="button">27</button>
+          <button class="btn cal-btn" type="button">28</button>
+          <button class="btn cal-btn" type="button">29</button>
+          <button class="btn cal-btn" type="button">30</button>
+          <button class="btn cal-btn" type="button">31</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/dropdowns/mega_menu.html.erb

@@ -0,0 +1,140 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="light">
+    <nav class="col-lg-8">
+      <ul class="list-unstyled d-flex flex-column gap-2">
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#image-fill"></use>
+            </svg>
+            <div>
+              <strong class="d-block">Main product</strong>
+              <small>Take a tour through the product</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#music-note-beamed"></use>
+            </svg>
+            <div>
+              <strong class="d-block">Another product</strong>
+              <small>Explore this other product we offer</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#question-circle"></use>
+            </svg>
+            <div><strong class="d-block">Support</strong> <small>Get help from our support crew</small></div>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
+    <hr class="d-lg-none">
+    <div class="col-lg-auto pe-3">
+      <nav>
+        <ul class="d-flex flex-column gap-2 list-unstyled small">
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Documentation
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Use cases
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              API status
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Partners
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Resources
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="dark">
+    <nav class="col-lg-8">
+      <ul class="list-unstyled d-flex flex-column gap-2">
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#image-fill"></use>
+            </svg>
+            <div>
+              <strong class="d-block">Main product</strong>
+              <small>Take a tour through the product</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#music-note-beamed"></use>
+            </svg>
+            <div>
+              <strong class="d-block">Another product</strong>
+              <small>Explore this other product we offer</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24" aria-hidden="true">
+              <use xlink:href="#question-circle"></use>
+            </svg>
+            <div><strong class="d-block">Support</strong> <small>Get help from our support crew</small></div>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
+    <hr class="d-lg-none">
+    <div class="col-lg-auto pe-3">
+      <nav>
+        <ul class="d-flex flex-column gap-2 list-unstyled small">
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Documentation
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Use cases
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              API status
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Partners
+            </a>
+          </li>
+          <li>
+            <a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">
+              Resources
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/dropdowns/simple.html.erb

@@ -0,0 +1,20 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
+    <li>
+      <hr class="dropdown-divider">
+    </li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+  </ul>
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
+    <li>
+      <hr class="dropdown-divider">
+    </li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+  </ul>
+</div>

data/lib/generators/bootstrap/snippets/templates/dropdowns/with_icons.html.erb

@@ -0,0 +1,88 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"></use></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"></use></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"></use></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#music-note-beamed"></use>
+        </svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"></use></svg>
+        Games
+      </a>
+    </li>
+    <li>
+      <hr class="dropdown-divider">
+    </li>
+    <li>
+      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"></use></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+  <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"></use></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"></use></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"></use></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#music-note-beamed"></use>
+        </svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"></use></svg>
+        Games
+      </a>
+    </li>
+    <li>
+      <hr class="dropdown-divider">
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"></use></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+</div>

data/lib/generators/bootstrap/snippets/templates/dropdowns/with_search.html.erb

@@ -0,0 +1,64 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="light">
+    <form class="p-2 mb-2 bg-body-tertiary border-bottom">
+      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-success rounded-circle p-1"></span>
+          Action
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-primary rounded-circle p-1"></span>
+          Another action
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-danger rounded-circle p-1"></span>
+          Something else here
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-info rounded-circle p-1"></span>
+          Separated link
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
+    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
+      <input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-success rounded-circle p-1"></span>
+          Action
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-primary rounded-circle p-1"></span>
+          Another action
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-danger rounded-circle p-1"></span>
+          Something else here
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+          <span class="d-inline-block bg-info rounded-circle p-1"></span>
+          Separated link
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>