Merge branch 'twbs:main' into mainHEADmain

2 files changed, 57 insertions, 0 deletions

diff --git a/site/content/docs/5.3/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html
new file mode 100644
index 000000000..8420c4527
--- /dev/null
+++ b/site/content/docs/5.3/examples/sign-in/index.html
@@ -0,0 +1,32 @@
+---
+layout: examples
+title: Signin Template
+extra_css:
+  - "sign-in.css"
+body_class: "d-flex align-items-center py-4 bg-body-tertiary"
+---
+
+<main class="form-signin w-100 m-auto">
+  <form>
+    <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
+
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
+      <label for="floatingInput">Email address</label>
+    </div>
+    <div class="form-floating">
+      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+      <label for="floatingPassword">Password</label>
+    </div>
+
+    <div class="form-check text-start my-3">
+      <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
+      <label class="form-check-label" for="flexCheckDefault">
+        Remember me
+      </label>
+    </div>
+    <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
+    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
+  </form>
+</main>
diff --git a/site/content/docs/5.3/examples/sign-in/sign-in.css b/site/content/docs/5.3/examples/sign-in/sign-in.css
new file mode 100644
index 000000000..641f6d906
--- /dev/null
+++ b/site/content/docs/5.3/examples/sign-in/sign-in.css
@@ -0,0 +1,25 @@
+html,
+body {
+  height: 100%;
+}
+
+.form-signin {
+  max-width: 330px;
+  padding: 1rem;
+}
+
+.form-signin .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}