Clean up object edit forms

netbox/ipam/forms.py

@@ -1422,6 +1422,10 @@ class VLANGroupForm(BootstrapMixin, CustomFieldModelForm):
             'name', 'slug', 'description', 'scope_type', 'region', 'sitegroup', 'site', 'location', 'rack',
             'clustergroup', 'cluster',
         ]
+        fieldsets = (
+            ('VLAN Group', ('name', 'slug', 'description')),
+            ('Scope', ('scope_type', 'region', 'sitegroup', 'site', 'location', 'rack', 'clustergroup', 'cluster')),
+        )
         widgets = {
             'scope_type': StaticSelect,
         }

netbox/ipam/views.py

@@ -769,7 +769,6 @@ class VLANGroupView(generic.ObjectView):
 class VLANGroupEditView(generic.ObjectEditView):
     queryset = VLANGroup.objects.all()
     model_form = forms.VLANGroupForm
-    template_name = 'ipam/vlangroup_edit.html'
 
 
 class VLANGroupDeleteView(generic.ObjectDeleteView):

netbox/project-static/styles/netbox.scss

@@ -725,15 +725,6 @@ div.paginator > form > div.input-group {
 
 div.field-group:not(:first-of-type) {
   margin-top: $spacer * 3;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: $spacer;
-  }
 }
 
 label.required {

netbox/templates/circuits/circuittermination_edit.html

@@ -6,28 +6,32 @@
 
 {% block form %}
   <div class="field-group">
-    <h4 class="mb-3">Termination</h4>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Circuit Termination</h5>
+    </div>
     <div class="row mb-3">
-            <label class="col-sm-3 col-form-label">Provider</label>
+        <label class="col-sm-3 col-form-label text-lg-end">Provider</label>
         <div class="col">
             <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
         </div>
     </div>
     <div class="row mb-3">
-            <label class="col-sm-3 col-form-label">Circuit</label>
+        <label class="col-sm-3 col-form-label text-lg-end">Circuit</label>
         <div class="col">
             <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
         </div>
     </div>
     <div class="row mb-3">
-            <label class="col-sm-3 col-form-label">Termination</label>
+        <label class="col-sm-3 col-form-label text-lg-end">Termination</label>
         <div class="col">
             <input class="form-control" value="{{ form.term_side.value }}" disabled />
         </div>
     </div>
     {% render_field form.mark_connected %}
     {% with providernetwork_tab_active=form.initial.provider_network %}
-            <ul class="nav nav-tabs" role="tablist">
+      <div class="row mb-2">
+        <div class="offset-sm-3">
+          <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" role="presentation">
               <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
             </li>
@@ -35,7 +39,9 @@
               <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
             </li>
           </ul>
-            <div class="tab-content">
+        </div>
+      </div>
+      <div class="tab-content p-0">
         <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
           {% render_field form.region %}
           {% render_field form.site_group %}
@@ -48,7 +54,9 @@
     {% endwith %}
   </div>
   <div class="field-group">
-    <h4 class="mb-3">Termination Details</h4>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Termination Details</h5>
+    </div>
     {% render_field form.port_speed %}
     {% render_field form.upstream_speed %}
     {% render_field form.xconnect_id %}

netbox/templates/dcim/cable_connect.html

@@ -5,10 +5,11 @@
 
 {% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}
 
-{% block content %}
+{% block content-wrapper %}
-{% with termination_a=form.instance.termination_a %}
+  <div class="tab-content">
-{% render_errors form %}
+    {% with termination_a=form.instance.termination_a %}
-<form method="post">
+      {% render_errors form %}
+      <form method="post">
       {% csrf_token %}
       {% for field in form.hidden_fields %}
           {{ field }}
@@ -152,15 +153,21 @@
       </div>
       <div class="row my-3 justify-content-center">
         <div class="col col-md-8">
+          <div class="card">
+            <h5 class="card-header">Cable</h5>
+            <div class="card-body">
               {% include 'dcim/inc/cable_form.html' %}
             </div>
           </div>
+        </div>
+      </div>
       <div class="row my-3">
         <div class="col col-md-12 text-center">
           <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
           <button type="submit" name="_update" class="btn btn-primary">Connect</button>
         </div>
       </div>
-</form>
+    </form>
-{% endwith %}
+    {% endwith %}
+  </div>
 {% endblock %}

netbox/templates/dcim/device_edit.html

@@ -5,14 +5,18 @@
     {% render_errors form %}
     
     <div class="field-group">
-        <h5 class="text-center">Device</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Device</h5>
+        </div>
         {% render_field form.name %}
         {% render_field form.device_role %}
         {% render_field form.tags %}
     </div>
     
     <div class="field-group">
-        <h5 class="text-center">Hardware</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Hardware</h5>
+        </div>
         {% render_field form.manufacturer %}
         {% render_field form.device_type %}
         {% render_field form.serial %}
@@ -20,7 +24,9 @@
     </div>
     
     <div class="field-group">
-        <h5 class="text-center">Location</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Location</h5>
+        </div>
         {% render_field form.region %}
         {% render_field form.site_group %}
         {% render_field form.site %}
@@ -52,7 +58,9 @@
     </div>
     
     <div class="field-group">
-        <h5 class="text-center">Management</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Management</h5>
+        </div>
         {% render_field form.status %}
         {% render_field form.platform %}
         {% if obj.pk %}
@@ -62,20 +70,26 @@
     </div>
     
     <div class="field-group">
-        <h5 class="text-center">Virtualization</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Virtualization</h5>
+        </div>
         {% render_field form.cluster_group %}
         {% render_field form.cluster %}
     </div>
     
     <div class="field-group">
-        <h5 class="text-center">Tenancy</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Tenancy</h5>
+        </div>
         {% render_field form.tenant_group %}
         {% render_field form.tenant %}
     </div>
 
 {% if form.custom_fields %}
     <div class="field-group">
-        <h5 class="text-center">Custom Fields</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Custom Fields</h5>
+        </div>
         {% render_custom_fields form %}
     </div>
 

netbox/templates/dcim/inc/cable_form.html

@@ -1,12 +1,10 @@
 {% load form_helpers %}
-<div class="card">
+
-    <h5 class="card-header">Cable</h5>
+{% render_field form.status %}
-    <div class="card-body">
+{% render_field form.type %}
-        {% render_field form.status %}
+{% render_field form.label %}
-        {% render_field form.type %}
+{% render_field form.color %}
-        {% render_field form.label %}
+<div class="row mb-3">
-        {% render_field form.color %}
-        <div class="row mb-3">
     <label class="col-sm-3 col-form-label text-lg-end">{{ form.length.label }}</label>
     <div class="col-md-5">
         {{ form.length }}
@@ -15,13 +13,11 @@
         {{ form.length_unit }}
     </div>
     <div class="invalid-feedback"></div>
-        </div>
+</div>
-        {% render_field form.tags %}
+{% render_field form.tags %}
-        {% if form.custom_fields %}
+{% if form.custom_fields %}
   <div class="field-group">
       <h4>Custom Fields</h4>
       {% render_custom_fields form %}
   </div>
-        {% endif %}
+{% endif %}
-    </div>
-</div>

netbox/templates/dcim/interface_edit.html

@@ -3,7 +3,9 @@
 
 {% block form %}
     <div class="field-group">
-        <h4 class="mb-3">Interface</h4>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Interface</h5>
+        </div>
         {% if form.instance.device %}
             <div class="row mb-3">
                 <label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Device</label>
@@ -15,18 +17,20 @@
         {% render_field form.name %}
         {% render_field form.label %}
         {% render_field form.type %}
-        {% render_field form.enabled %}
         {% render_field form.parent %}
         {% render_field form.lag %}
         {% render_field form.mac_address %}
         {% render_field form.mtu %}
-        {% render_field form.mgmt_only %}
-        {% render_field form.mark_connected %}
         {% render_field form.description %}
         {% render_field form.tags %}
+        {% render_field form.enabled %}
+        {% render_field form.mgmt_only %}
+        {% render_field form.mark_connected %}
     </div>
     <div class="field-group">
-        <h4 class="mb-3">802.1Q Switching</h4>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">802.1Q Switching</h5>
+        </div>
         {% render_field form.mode %}
         {% render_field form.vlan_group %}
         {% render_field form.untagged_vlan %}
@@ -34,7 +38,9 @@
     </div>
     {% if form.custom_fields %}
         <div class="field-group">
-            <h4 class="mb-3">Custom Fields</h4>
+            <div class="row mb-2">
+              <h5 class="offset-sm-3">Custom Fields</h5>
+            </div>
             {% render_custom_fields form %}
         </div>
     {% endif %}

netbox/templates/dcim/rack_edit.html

@@ -3,7 +3,9 @@
 
 {% block form %}
     <div class="field-group">
-        <h5 class="text-center">Rack</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Rack</h5>
+        </div>
         {% render_field form.region %}
         {% render_field form.site_group %}
         {% render_field form.site %}
@@ -14,18 +16,24 @@
         {% render_field form.tags %}
     </div>
     <div class="field-group">
-        <h5 class="text-center">Inventory Control</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Inventory Control</h5>
+        </div>
         {% render_field form.facility_id %}
         {% render_field form.serial %}
         {% render_field form.asset_tag %}
     </div>
     <div class="field-group">
-        <h5 class="text-center">Tenancy</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Tenancy</h5>
+        </div>
         {% render_field form.tenant_group %}
         {% render_field form.tenant %}
     </div>
     <div class="field-group">
-        <h5 class="text-center">Dimensions</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Dimensions</h5>
+        </div>
         {% render_field form.type %}
         {% render_field form.width %}
         {% render_field form.u_height %}
@@ -48,7 +56,9 @@
     </div>
     {% if form.custom_fields %}
         <div class="field-group">
-            <h5 class="text-center">Custom Fields</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Custom Fields</h5>
+        </div>
             {% render_custom_fields form %}
         </div>
     {% endif %}

netbox/templates/dcim/virtualchassis_add.html

@@ -2,17 +2,18 @@
 {% load form_helpers %}
 
 {% block form %}
-    <div class="card">
+  <div class="field-group">
-        <h5 class="card-header">Virtual Chassis</h5>
+    <div class="row mb-2">
-        <div class="card-body">
+      <h5 class="offset-sm-3">Virtual Chassis</h5>
+    </div>
     {% render_field form.name %}
     {% render_field form.domain %}
     {% render_field form.tags %}
   </div>
+  <div class="field-group">
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Member Devices</h5>
     </div>
-    <div class="card">
-        <h5 class="card-header">Member Devices</h5>
-        <div class="card-body">
     {% render_field form.region %}
     {% render_field form.site_group %}
     {% render_field form.site %}
@@ -20,13 +21,12 @@
     {% render_field form.members %}
     {% render_field form.initial_position %}
   </div>
-    </div>
   {% if form.custom_fields %}
-        <div class="card">
+    <div class="field-group">
-            <h5 class="card-header">Custom Fields</h5>
+      <div class="row mb-2">
-            <div class="card-body">
+        <h5 class="offset-sm-3">Custom Fields</h5>
-                {% render_custom_fields form %}
       </div>
+      {% render_custom_fields form %}
     </div>
   {% endif %}
 {% endblock %}

netbox/templates/dcim/virtualchassis_edit.html

@@ -2,33 +2,34 @@
 {% load helpers %}
 {% load form_helpers %}
 
-{% block title %}{% if vc_form.instance %}Editing Virtual Chassis {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
+{% block title %}Editing Virtual Chassis {{ vc_form.instance }}{% endblock %}
 
-{% block content %}
+{% block content-wrapper %}
+  <div class="tab-content">
+    <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
       <form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
         {% csrf_token %}
         {{ pk_form.pk }}
         {{ formset.management_form }}
-        <div class="card">
+        <div class="field-group">
-            <h5 class="card-header">Virtual Chassis</h5>
+          <div class="row mb-2">
-            <div class="card-body">
+            <h5 class="offset-sm-3">Virtual Chassis</h5>
+          </div>
           {% render_field vc_form.name %}
           {% render_field vc_form.domain %}
           {% render_field vc_form.master %}
           {% render_field vc_form.tags %}
         </div>
-        </div>
         {% if vc_form.custom_fields %}
-            <div class="card">
+          <div class="field-group">
-                <h5 class="card-header">Custom Fields</h5>
+            <div class="row mb-2">
-                <div class="card-body">
+              <h5 class="offset-sm-3">Custom Fields</h5>
+            </div>
             {% render_custom_fields vc_form %}
           </div>
-            </div>
         {% endif %}
-        <div class="card">
+        <div class="field-group mb-5">
-            <h5 class="card-header">Members</h5>
+          <h5 class="text-center">Members</h5>
-            <div class="card-body">
           <table class="table">
               <thead>
                   <tr>
@@ -85,7 +86,6 @@
               </tbody>
           </table>
         </div>
-        </div>
         <div class="text-end">
             <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
             {% if vc_form.instance.pk %}
@@ -95,4 +95,6 @@
             {% endif %}
         </div>
       </form>
+    </div>
+  </div>
 {% endblock %}

netbox/templates/generic/object_edit.html

@@ -43,7 +43,9 @@
             {# Render grouped fields according to Form #}
             {% for group, fields in form.Meta.fieldsets %}
               <div class="field-group">
-                <h5 class="text-center">{{ group }}</h5>
+                <div class="row mb-2">
+                  <h5 class="offset-sm-3">{{ group }}</h5>
+                </div>
                 {% for name in fields %}
                     {% render_field form|getfield:name %}
                 {% endfor %}
@@ -52,7 +54,9 @@
 
             {% if form.custom_fields %}
               <div class="field-group">
-                <h5 class="text-center">Custom Fields</h5>
+                <div class="row mb-1">
+                  <h5 class="offset-sm-3">Custom Fields</h5>
+                </div>
                 {% render_custom_fields form %}
               </div>
             {% endif %}
@@ -66,7 +70,6 @@
           {% else %}
             {# Render all fields in a single group #}
             <div class="field-group">
-              <h5 class="text-center">{{ obj_type|capfirst }}</h5>
               {% block form_fields %}{% render_form form %}{% endblock %}
             </div>
           {% endif %}

netbox/templates/ipam/ipaddress_edit.html

@@ -9,7 +9,9 @@
 
 {% block form %}
     <div class="field-group">
-        <h4 class="mb-3">IP Address</h4>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">IP Address</h5>
+      </div>
       {% render_field form.address %}
       {% render_field form.status %}
       {% render_field form.role %}
@@ -19,14 +21,20 @@
       {% render_field form.tags %}
     </div>
     <div class="field-group">
-        <h4 class="mb-3">Tenancy</h4>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">Tenancy</h5>
+      </div>
       {% render_field form.tenant_group %}
       {% render_field form.tenant %}
     </div>
     <div class="field-group">
-        <h4 class="mb-3">Interface Assignment</h4>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">Interface Assignment</h5>
+      </div>
       {% with vm_tab_active=form.initial.vminterface %}
-            <ul class="nav nav-tabs" role="tablist">
+        <div class="row mb-2">
+          <div class="offset-sm-3">
+            <ul class="nav nav-pills" role="tablist">
               <li role="presentation" class="nav-item">
                   <button
                       role="tab"
@@ -54,7 +62,9 @@
                   </button>
               </li>
             </ul>
-            <div class="tab-content">
+          </div>
+        </div>
+        <div class="tab-content p-0">
           <div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
             {% render_field form.device %}
             {% render_field form.interface %}
@@ -63,13 +73,17 @@
             {% render_field form.virtual_machine %}
             {% render_field form.vminterface %}
           </div>
-            </div>
-        {% endwith %}
           {% render_field form.primary_for_parent %}
         </div>
+      {% endwith %}
+    </div>
     <div class="field-group">
-        <h4 class="mb-3">NAT IP (Inside)</h4>
+      <div class="row mb-2">
-        <ul class="nav nav-tabs" role="tablist">
+        <h5 class="offset-sm-3">NAT IP (Inside)</h5>
+      </div>
+      <div class="row mb-2">
+        <div class="offset-sm-3">
+          <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" role="presentation">
                 <button
                     role="tab"
@@ -110,7 +124,9 @@
                 </button>
             </li>
           </ul>
-        <div class="tab-content">
+        </div>
+      </div>
+      <div class="tab-content p-0">
           <div class="tab-pane active" id="by_device" aria-labelledby="device_tab" role="tabpanel">
               {% render_field form.nat_region %}
               {% render_field form.nat_site_group %}
@@ -130,7 +146,9 @@
     </div>
     {% if form.custom_fields %}
       <div class="field-group">
-            <h4 class="mb-3">Custom Fields</h4>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Custom Fields</h5>
+        </div>
         {% render_custom_fields form %}
       </div>
     {% endif %}

netbox/templates/ipam/service_edit.html

@@ -3,7 +3,9 @@
 
 {% block form %}
   <div class="field-group">
-        <h5 class="text-center">Service</h5>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Service</h5>
+    </div>
     {% if obj.device %}
         <div class="row mb-3">
             <label class="col-sm-3 col-form-label text-lg-end">Device</label>
@@ -35,17 +37,14 @@
             <span class="form-text">{{ form.ports.help_text }}</span>
         </div>
     </div>
-        
     {% render_field form.ipaddresses %}
     {% render_field form.description %}
     {% render_field form.tags %}
   </div>
   {% if form.custom_fields %}
-        <div class="card">
+    <div class="row mb-2">
-            <h5 class="card-header">Custom Fields</h5>
+      <h5 class="offset-sm-3">Custom Fields</h5>
-            <div class="card-body">
+    </div>
     {% render_custom_fields form %}
-            </div>
-        </div>
   {% endif %}
 {% endblock %}

netbox/templates/ipam/vlan_edit.html

@@ -5,7 +5,9 @@
 
 {% block form %}
   <div class="field-group mb-3">
-        <h5 class="text-center">VLAN</h5>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">VLAN</h5>
+    </div>
     {% render_field form.vid %}
     {% render_field form.name %}
     {% render_field form.status %}
@@ -14,14 +16,20 @@
     {% render_field form.tags %}
   </div>
   <div class="field-group mb-3">
-        <h5 class="text-center">Tenancy</h5>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Tenancy</h5>
+    </div>
     {% render_field form.tenant_group %}
     {% render_field form.tenant %}
   </div>
   <div class="field-group mb-3">
-        <h5 class="text-center">Assignment</h5>
+    <div class="row mb-2">
+      <h5 class="offset-sm-3">Assignment</h5>
+    </div>
     {% with site_tab_active=form.initial.site %}
-            <ul class="nav nav-tabs" role="tablist">
+      <div class="row mb-2">
+        <div class="offset-sm-3">
+          <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" role="presentation">
               <a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
             </li>
@@ -29,7 +37,9 @@
               <a class="nav-link{% if site_tab_active %} active{% endif %}" href="#site" role="tab" data-bs-toggle="tab">Site</a>
             </li>
           </ul>
-            <div class="tab-content">
+        </div>
+      </div>
+      <div class="tab-content p-0">
         <div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
           {% render_field form.scope_type %}
           {% render_field form.group %}
@@ -44,7 +54,9 @@
   </div>
   {% if form.custom_fields %}
     <div class="field-group">
-            <h5 class="text-center">Custom Fields</h5>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">Custom Fields</h5>
+      </div>
       {% render_custom_fields form %}
     </div>
   {% endif %}

netbox/templates/ipam/vlangroup_edit.html

@@ -1,30 +0,0 @@
-{% extends 'generic/object_edit.html' %}
-{% load form_helpers %}
-{% load helpers %}
-
-{% block form %}
-    <div class="field-group">
-        <h5 class="text-center">VLAN Group</h5>
-        {% render_field form.name %}
-        {% render_field form.slug %}
-        {% render_field form.description %}
-    </div>
-    <div class="field-group">
-        <h5 class="text-center">Scope</h5>
-        {% render_field form.scope_type %}
-        {% render_field form.region %}
-        {% render_field form.sitegroup %}
-        {% render_field form.site %}
-        {% render_field form.location %}
-        {% render_field form.rack %}
-        {% render_field form.clustergroup %}
-        {% render_field form.cluster %}
-    </div>
-    {% if form.custom_fields %}
-        <div class="field-group">
-            <h5 class="text-center">Custom Fields</h5>
-            {% render_custom_fields form %}
-        </div>
-    {% endif %}
-{% endblock %}
-

netbox/templates/virtualization/vminterface_edit.html

@@ -3,7 +3,9 @@
 
 {% block form %}
     <div class="field-group">
-        <h5 class="text-center">Interface</h5>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">Interface</h5>
+      </div>
       {% if form.instance.virtual_machine %}
           <div class="row mb-3">
               <label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Virtual Machine</label>
@@ -19,10 +21,11 @@
       {% render_field form.mtu %}
       {% render_field form.description %}
       {% render_field form.tags %}
-        
     </div>
     <div class="field-group">
-        <h5 class="text-center">802.1Q Switching</h5>
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">802.1Q Switching</h5>
+      </div>
       {% render_field form.mode %}
       {% render_field form.vlan_group %}
       {% render_field form.untagged_vlan %}
@@ -30,7 +33,9 @@
     </div>
     {% if form.custom_fields %}
       <div class="field-group">
-        <h5 class="text-center">Custom Fields</h5>
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">Custom Fields</h5>
+        </div>
         {% render_custom_fields form %}
       </div>
     {% endif %}