diff --git a/CHANGES.md b/CHANGES.md
index 3144129598..36a9ec5357 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -45,6 +45,13 @@
   - The default blogroll can't be renamed, since themes find it by its
     name, and the page works on phones.
 
+- **Form labels sit above their fields.** In the admin forms a label used to
+  sit in a column beside its field, so short labels were a long way from
+  their inputs and long ones wrapped onto two lines. Labels are now above
+  their fields at every width, as they already were on phones. On the entry
+  editor, the Permalink and Status rows line up with the rest and the status
+  is shown as a badge.
+
 ### Bug fixes
 
 - **A bad date pattern in a theme no longer blanks the page.**
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
index e93b76ded7..cdefe9108d 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
@@ -67,12 +67,12 @@
     <s:if test="actionName == 'entryEdit'">
         <div class="row mb-3">
 
-            <label class="col-md-3" for="entry_bean_permalink">
+            <label class="col-sm-3 col-form-label" for="entry_bean_permalink">
                 <s:text name="weblogEdit.permaLink"/>
             </label>
 
-            <div class="controls col-md-9">
-                <p class="form-control-plaintext">
+            <div class="controls col-sm-9">
+                <div class="form-control-plaintext">
                     <s:if test="bean.published">
                         <a id="entry_bean_permalink" href='<s:property value="entry.permalink" />'>
                             <s:property value="entry.permalink"/>
@@ -82,7 +82,7 @@
                     <s:else>
                         <s:property value="entry.permalink"/>
                     </s:else>
-                </p>
+                </div>
             </div>
 
         </div>
@@ -107,43 +107,43 @@
 
     <%-- status --%>
     <div class="row mb-3">
-        <label class="col-md-3" for="weblogEdit.status"><s:text name="weblogEdit.status"/></label>
+        <label class="col-sm-3 col-form-label"><s:text name="weblogEdit.status"/></label>
 
-        <div class="controls col-md-9">
+        <div class="controls col-sm-9">
 
-            <p class="form-control-plaintext">
+            <div class="form-control-plaintext">
                 <s:if test="bean.published">
-                    <span class="label text-bg-success">
+                    <span class="badge text-bg-success">
                         <s:text name="weblogEdit.published"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:if>
                 <s:elseif test="bean.draft">
-                    <span class="label text-bg-info">
+                    <span class="badge text-bg-info">
                         <s:text name="weblogEdit.draft"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.pending">
-                    <span class="label text-bg-warning">
+                    <span class="badge text-bg-warning">
                         <s:text name="weblogEdit.pending"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.scheduled">
-                    <span class="label text-bg-info">
+                    <span class="badge text-bg-info">
                         <s:text name="weblogEdit.scheduled"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:else>
-                    <span class="label text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
+                    <span class="badge text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
                 </s:else>
-            </p>
+            </div>
 
         </div>
 
diff --git a/app/src/main/webapp/roller-ui/styles/roller.css b/app/src/main/webapp/roller-ui/styles/roller.css
index 7d3e23520e..c7e346e194 100644
--- a/app/src/main/webapp/roller-ui/styles/roller.css
+++ b/app/src/main/webapp/roller-ui/styles/roller.css
@@ -1336,6 +1336,30 @@ tr.rollertable_pending {
     font-weight: 700;
 }
 
+/* Forms put each label above its field at every width, as they already did on
+   narrow screens. Beside the field, a short label such as "Title" sat a long way
+   from its input, and long labels wrapped onto two lines. The label and field
+   columns the forms are written with (3 and 9 of 12) become full-width rows. */
+.form-horizontal .row > .col-sm-3,
+.form-horizontal .row > .col-md-3,
+.form-horizontal .row > .col-sm-9,
+.form-horizontal .row > .col-md-9 {
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+}
+
+.form-horizontal .row > .col-form-label {
+    padding-top: 0;
+    padding-bottom: 0.25rem;
+}
+
+/* An empty label only held the field in the second column. */
+.form-horizontal .row > label:empty {
+    display: none;
+}
+
 /* Bootstrap 5 leaves readonly inputs looking editable; shade them like
    disabled ones so fields the user cannot change read as such. */
 .form-control[readonly],