twitter-bootstrap-rails 5.3.1 → 5.4.0

data/lib/generators/bootstrap/snippets/templates/list-groups/with_avatars.html.erb

@@ -0,0 +1,36 @@
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">List group item heading</h6>
+          <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+        </div>
+        <small class="opacity-50 text-nowrap">now</small>
+      </div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">Another title here</h6>
+          <p class="mb-0 opacity-75">
+            Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.
+          </p>
+        </div>
+        <small class="opacity-50 text-nowrap">3d</small>
+      </div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">Third heading</h6>
+          <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+        </div>
+        <small class="opacity-50 text-nowrap">1w</small>
+      </div>
+    </a>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/modals/confirm.html.erb

@@ -0,0 +1,18 @@
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-3 shadow">
+      <div class="modal-body p-4 text-center">
+        <h5 class="mb-0">Enable this setting?</h5>
+        <p class="mb-0">You can always change your mind in your account settings.</p>
+      </div>
+      <div class="modal-footer flex-nowrap p-0">
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end">
+          <strong>Yes, enable</strong>
+        </button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">
+          No thanks
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/modals/sheet.html.erb

@@ -0,0 +1,19 @@
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
+      <div class="modal-header border-bottom-0">
+        <h1 class="modal-title fs-5">Modal title</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body py-0">
+        <p>
+          This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.
+        </p>
+      </div>
+      <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
+        <button type="button" class="btn btn-lg btn-primary">Save changes</button>
+        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/modals/signup.html.erb

@@ -0,0 +1,44 @@
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
+      <div class="modal-header p-5 pb-4 border-bottom-0">
+        <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-5 pt-0">
+        <form>
+          <div class="form-floating mb-3">
+            <input type="email" class="form-control rounded-3" id="floatingInput" placeholder="name@example.com">
+            <label for="floatingInput">Email address</label>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Password</label>
+          </div>
+          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button>
+          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+          <hr class="my-4">
+          <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
+            <svg class="bi me-1" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#google"></use>
+            </svg>
+            Sign up with Google
+          </button>
+          <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
+            <svg class="bi me-1" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#facebook"></use>
+            </svg>
+            Sign up with Facebook
+          </button>
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
+            <svg class="bi me-1" width="16" height="16" aria-hidden="true">
+              <use xlink:href="#github"></use>
+            </svg>
+            Sign up with GitHub
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/modals/whats_new.html.erb

@@ -0,0 +1,41 @@
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
+      <div class="modal-body p-5">
+        <h2 class="fw-bold mb-0">What's new</h2>
+        <ul class="d-grid gap-4 my-5 list-unstyled small">
+          <li class="d-flex gap-4">
+            <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true">
+              <use xlink:href="#grid-fill"></use>
+            </svg>
+            <div>
+              <h5 class="mb-0">Grid view</h5>
+              Not into lists? Try the new grid view.
+            </div>
+          </li>
+          <li class="d-flex gap-4">
+            <svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true">
+              <use xlink:href="#bookmark-star"></use>
+            </svg>
+            <div>
+              <h5 class="mb-0">Bookmarks</h5>
+              Save items you love for easy access later.
+            </div>
+          </li>
+          <li class="d-flex gap-4">
+            <svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true">
+              <use xlink:href="#film"></use>
+            </svg>
+            <div>
+              <h5 class="mb-0">Video embeds</h5>
+              Share videos wherever you go.
+            </div>
+          </li>
+        </ul>
+        <button type="button" class="btn btn-lg btn-primary mt-5 w-100" data-bs-dismiss="modal">
+          Great, thanks!
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/sidebars/collapsible.html.erb

@@ -0,0 +1,90 @@
+<div class="flex-shrink-0 p-3" style="width: 280px;">
+  <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
+    <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true">
+      <use xlink:href="#bootstrap"></use>
+    </svg>
+    <span class="fs-5 fw-semibold">Collapsible</span>
+  </a>
+  <ul class="list-unstyled ps-0">
+    <li class="mb-1">
+      <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
+        Home
+      </button>
+      <div class="collapse show" id="home-collapse">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li class="mb-1">
+      <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+        Dashboard
+      </button>
+      <div class="collapse" id="dashboard-collapse">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li class="mb-1">
+      <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+        Orders
+      </button>
+      <div class="collapse" id="orders-collapse">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li class="border-top my-3"></li>
+    <li class="mb-1">
+      <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+        Account
+      </button>
+      <div class="collapse" id="account-collapse">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a>
+          </li>
+          <li>
+            <a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a>
+          </li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</div>

data/lib/generators/bootstrap/snippets/templates/sidebars/dark.html.erb

@@ -0,0 +1,67 @@
+<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
+  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+    <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true">
+      <use xlink:href="#bootstrap"></use>
+    </svg>
+    <span class="fs-4">Sidebar</span>
+  </a>
+  <hr>
+  <ul class="nav nav-pills flex-column mb-auto">
+    <li class="nav-item">
+      <a href="#" class="nav-link active" aria-current="page">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#home"></use>
+        </svg>
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link text-white">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#speedometer2"></use>
+        </svg>
+        Dashboard
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link text-white">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#table"></use>
+        </svg>
+        Orders
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link text-white">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#grid"></use>
+        </svg>
+        Products
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link text-white">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#people-circle"></use>
+        </svg>
+        Customers
+      </a>
+    </li>
+  </ul>
+  <hr>
+  <div class="dropdown">
+    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+      <strong>mdo</strong>
+    </a>
+    <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
+      <li><a class="dropdown-item" href="#">New project...</a></li>
+      <li><a class="dropdown-item" href="#">Settings</a></li>
+      <li><a class="dropdown-item" href="#">Profile</a></li>
+      <li>
+        <hr class="dropdown-divider">
+      </li>
+      <li><a class="dropdown-item" href="#">Sign out</a></li>
+    </ul>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/sidebars/icon_only.html.erb

@@ -0,0 +1,59 @@
+<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
+  <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+    <svg class="bi pe-none" width="40" height="32" aria-hidden="true">
+      <use xlink:href="#bootstrap"></use>
+    </svg>
+    <span class="visually-hidden">Icon-only</span>
+  </a>
+  <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+    <li class="nav-item">
+      <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home">
+          <use xlink:href="#home"></use>
+        </svg>
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
+        <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard">
+          <use xlink:href="#speedometer2"></use>
+        </svg>
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
+        <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders">
+          <use xlink:href="#table"></use>
+        </svg>
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
+        <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products">
+          <use xlink:href="#grid"></use>
+        </svg>
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
+        <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers">
+          <use xlink:href="#people-circle"></use>
+        </svg>
+      </a>
+    </li>
+  </ul>
+  <div class="dropdown border-top">
+    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
+    </a>
+    <ul class="dropdown-menu text-small shadow">
+      <li><a class="dropdown-item" href="#">New project...</a></li>
+      <li><a class="dropdown-item" href="#">Settings</a></li>
+      <li><a class="dropdown-item" href="#">Profile</a></li>
+      <li>
+        <hr class="dropdown-divider">
+      </li>
+      <li><a class="dropdown-item" href="#">Sign out</a></li>
+    </ul>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/sidebars/light.html.erb

@@ -0,0 +1,67 @@
+<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
+  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+    <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true">
+      <use xlink:href="#bootstrap"></use>
+    </svg>
+    <span class="fs-4">Sidebar</span>
+  </a>
+  <hr>
+  <ul class="nav nav-pills flex-column mb-auto">
+    <li class="nav-item">
+      <a href="#" class="nav-link active" aria-current="page">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#home"></use>
+        </svg>
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link link-body-emphasis">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#speedometer2"></use>
+        </svg>
+        Dashboard
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link link-body-emphasis">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#table"></use>
+        </svg>
+        Orders
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link link-body-emphasis">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#grid"></use>
+        </svg>
+        Products
+      </a>
+    </li>
+    <li>
+      <a href="#" class="nav-link link-body-emphasis">
+        <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true">
+          <use xlink:href="#people-circle"></use>
+        </svg>
+        Customers
+      </a>
+    </li>
+  </ul>
+  <hr>
+  <div class="dropdown">
+    <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+      <strong>mdo</strong>
+    </a>
+    <ul class="dropdown-menu text-small shadow">
+      <li><a class="dropdown-item" href="#">New project...</a></li>
+      <li><a class="dropdown-item" href="#">Settings</a></li>
+      <li><a class="dropdown-item" href="#">Profile</a></li>
+      <li>
+        <hr class="dropdown-divider">
+      </li>
+      <li><a class="dropdown-item" href="#">Sign out</a></li>
+    </ul>
+  </div>
+</div>

data/lib/generators/bootstrap/snippets/templates/sidebars/list_group.html.erb

@@ -0,0 +1,94 @@
+<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
+  <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
+    <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true">
+      <use xlink:href="#bootstrap"></use>
+    </svg>
+    <span class="fs-5 fw-semibold">List group</span>
+  </a>
+  <div class="list-group list-group-flush border-bottom scrollarea">
+    <a href="#" class="list-group-item list-group-item-action active py-3 lh-sm" aria-current="true">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small>Wed</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Tues</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Mon</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Wed</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Tues</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Mon</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Wed</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Tues</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Mon</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Wed</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Tues</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+      <div class="d-flex w-100 align-items-center justify-content-between">
+        <strong class="mb-1">List group item heading</strong>
+        <small class="text-body-secondary">Mon</small>
+      </div>
+      <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+    </a>
+  </div>
+</div>

data/lib/generators/bootstrap/starter/starter_generator.rb

@@ -0,0 +1,37 @@
+require 'rails/generators'
+require 'twitter/bootstrap/rails/version'
+require 'generators/bootstrap/cdn_tags'
+
+module Bootstrap
+  module Generators
+    # Writes the starter template from
+    # https://getbootstrap.com/docs/5.3/getting-started/introduction/
+    class StarterGenerator < ::Rails::Generators::Base
+      include CdnTags
+
+      source_root File.expand_path("../templates", __FILE__)
+      desc "Writes the Bootstrap #{Twitter::Bootstrap::Rails::BOOTSTRAP_VERSION} starter HTML template"
+
+      class_option :path, :type => :string, :default => 'public/bootstrap-starter.html',
+                   :desc => 'Where to write the starter template'
+      class_option :'separate-popper', :type => :boolean, :default => false,
+                   :desc => 'Emit Popper and bootstrap.js as separate tags instead of the bundle'
+
+      def create_starter_template
+        template "starter.html.erb", options[:path]
+      end
+
+      def report
+        say "Open #{options[:path]} in a browser to check your Bootstrap setup."
+      end
+
+      private
+
+      # The docs' starter uses the single bundle; --separate-popper swaps in the pair.
+      def script_tags
+        tags = options[:'separate-popper'] ? separate_popper_tags : bundle_tag
+        tags.split("\n").join("\n    ")
+      end
+    end
+  end
+end

data/lib/generators/bootstrap/starter/templates/starter.html.erb

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap demo</title>
+    <%= css_tag %>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <%= script_tags %>
+  </body>
+</html>

data/lib/twitter/bootstrap/rails/bootstrap.rb

@@ -1,2 +1,3 @@
 require "twitter/bootstrap/rails/engine"
 require "twitter/bootstrap/rails/version"
+require "twitter/bootstrap/rails/config"