diff --git a/pages/_includes/cards/form/layout.html b/pages/_includes/cards/form/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..51ba064227c6317d9ff8863b274c0bd773be469a
--- /dev/null
+++ b/pages/_includes/cards/form/layout.html
@@ -0,0 +1,59 @@
+{% assign horizontal = include.horizontal | default: false %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
+	</div>
+	<div class="card-body">
+		<form>
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
+					<small class="form-hint">We'll never share your email with anyone else.</small>
+				</div>
+			</div>
+
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<input type="password" class="form-control" placeholder="Password">
+					<small class="form-hint">
+						Your password must be 8-20 characters long, contain letters and numbers, and must not contain
+						spaces, special characters, or emoji.
+					</small>
+				</div>
+			</div>
+
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<select class="form-select">
+						<option>Option 1</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" checked="">
+						<span class="form-check-label">Option 1</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox">
+						<span class="form-check-label">Option 2</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" disabled="">
+						<span class="form-check-label">Option 3</span>
+					</label>
+				</div>
+			</div>
+
+			<div class="form-footer">
+				<button type="submit" class="btn btn-primary">Submit</button>
+			</div>
+		</form>
+	</div>
+</div>
\ No newline at end of file
diff --git a/pages/_includes/parts/form/select.html b/pages/_includes/parts/form/select.html
index 4fbecb50e44bf5ac8edb2dbb0f1f70110aa54ec6..6115d6cc88a6103a16070256016eba7a273378d2 100644
--- a/pages/_includes/parts/form/select.html
+++ b/pages/_includes/parts/form/select.html
@@ -1,9 +1,9 @@
 {% assign options = include.options | default: "One,Two,Three" | split: "," %}
 <div class="mb-3">
-   <div class="form-label">{{ include.label | default: 'Select' }}</div>
-   <select class="form-select"{% if include.multiple %} multiple{% endif %}>
-	   {% for option in options %}
-      <option value="{{ forloop.index }}">{{ option }}</option>
-	   {% endfor %}
-   </select>
+	<div class="form-label">{{ include.label | default: 'Select' }}</div>
+	<select class="form-select" {% if include.multiple %} multiple{% endif %}>
+		{% for option in options %}
+		<option value="{{ forloop.index }}">{{ option }}</option>
+		{% endfor %}
+	</select>
 </div>
diff --git a/pages/form-elements.html b/pages/form-elements.html
index 5a394bfe14f5ce688233128f703e197d6f27cfd1..1e206a8edb12674c3f7db50f3d3d5a2b70377f07 100644
--- a/pages/form-elements.html
+++ b/pages/form-elements.html
@@ -40,4 +40,12 @@ menu: forms
 			</div>
 		</form>
 	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html %}
+	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
+	</div>
 </div>
diff --git a/pages/tmp3.html b/pages/tmp3.html
index 87158197ffe8ddcf3fd7a11a46f7fd1023bde573..80c1c28b8ad7c73f49a8462e422792e59d1eaf67 100644
--- a/pages/tmp3.html
+++ b/pages/tmp3.html
@@ -1,33 +1,12 @@
 ---
-tmp: true
 ---
 
-<div class="dropdown d-inline-block">
-	<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonAlias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		Dropdown button
-	</button>
+<div class="row">
+	<div class="col-md-6">
+		{% include cards/form/layout.html %}
+	</div>
 
-	<ul class="dropdown-menu">
-		<li>
-			<a class="dropdown-item" href="#">Action</a>
-		</li>
-		<li>
-			<a class="dropdown-item" href="#">Another action</a>
-		</li>
-		<li class="dropright">
-			<a class="dropdown-item dropdown-toggle" href="#" id="dropdownSubmenuButton" data-toggle="dropdown">Something else here</a>
-			<div class="dropdown-menu">
-				<a class="dropdown-item" href="#">Action</a>
-				<a class="dropdown-item" href="#">Another action</a>
-				<a class="dropdown-item" href="#">Something else action</a>
-			</div>
-		</li>
-	</ul>
-</div>
-
-<div class="dropdown d-inline-block">
-	<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-		Dropdown with card
-	</button>
-	{% include cards/card.html class="dropdown-menu" title="Card title" footer=true img-top=true  %}
+	<div class="col-md-6">
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
+	</div>
 </div>
\ No newline at end of file
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss
index e6a15e77da2dde839970ddb1b436b417d38c4760..4f7c06239edfb9878fca4940d7d93de260e82ef8 100644
--- a/scss/ui/_buttons.scss
+++ b/scss/ui/_buttons.scss
@@ -69,6 +69,10 @@
   padding-right: 1.5em;
   padding-left: 1.5em;
   border-radius: 10rem;
+
+  &[class*="btn-icon"]{
+    padding: 0.375rem 15px;
+  }
 }
 
 .btn-icon {
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 14e4b842ad9fa73bc54e0d5681f99318be4d69d3..a307c0dc2828a11a75147189d2165a8a8fc12222 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -26,14 +26,27 @@ Form label
 Form hint
  */
 .form-hint {
+  display: block;
   font-size: $small-font-size;
   color: $text-muted;
-  margin: 0 0 .75rem;
   line-height: $line-height-sm;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & + .form-control {
+    margin-top: .25rem;
+  }
+
   .form-label + & {
     margin-top: -.5rem;
   }
+
+  .form-control + &,
+  .form-select + & {
+    margin-top: .25rem;
+  }
 }
 
 /**