#6372: Migrate away from form-floating field styles

netbox/project-static/styles/select.scss

@@ -14,6 +14,7 @@ $spacing-m: $input-padding-x;
 $spacing-s: $input-padding-x;
 
 :root {
+  // Light Mode Variables.
   --nbx-select-content-bg: #{$form-select-bg};
   --nbx-select-option-selected-bg: #{$gray-300};
   --nbx-select-option-hover-bg: #{$blue};
@@ -21,6 +22,7 @@ $spacing-s: $input-padding-x;
   --nbx-select-placeholder-color: #{$gray-600};
   --nbx-select-value-color: #{$white};
   & body[data-netbox-color-mode='dark'] {
+    // Dark Mode Variables.
     --nbx-select-content-bg: #{$gray-900};
     --nbx-select-option-selected-bg: #{$gray-500};
     --nbx-select-option-hover-bg: #{$blue-200};
@@ -30,11 +32,6 @@ $spacing-s: $input-padding-x;
   }
 }
 
-div.form-floating div.ss-main div.ss-single-selected,
-div.form-floating div.ss-main div.ss-multi-selected {
-  min-height: $form-floating-height;
-}
-
 @import './node_modules/slim-select/src/slim-select/slimselect.scss';
 
 .ss-main {
@@ -52,6 +49,7 @@ div.form-floating div.ss-main div.ss-multi-selected {
 
   .ss-single-selected,
   .ss-multi-selected {
+    padding: $form-select-padding-y $input-padding-x $form-select-padding-y $form-select-padding-x;
     &[disabled] {
       color: $form-select-disabled-color;
       background-color: $form-select-disabled-bg;
@@ -62,7 +60,7 @@ div.form-floating div.ss-main div.ss-multi-selected {
   div.ss-multi-selected .ss-values .ss-disabled,
   div.ss-single-selected span.placeholder .ss-disabled {
     color: var(--nbx-select-placeholder-color);
-    font-size: $font-size-xs;
+    font-size: $form-select-font-size;
   }
 
   .ss-single-selected {
@@ -87,7 +85,6 @@ div.form-floating div.ss-main div.ss-multi-selected {
     background-color: $form-select-bg;
 
     .ss-values {
-      padding-top: $spacer * 2 !important;
       .ss-disabled {
         padding: 4px 0px;
       }

netbox/templates/circuits/circuittermination_edit.html

@@ -7,17 +7,23 @@
 {% block form %}
   <div class="field-group">
     <h4 class="mb-3">Termination</h4>
-        <div class="form-floating mb-3">
-            <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
-            <label>Provider</label>
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label">Provider</label>
+            <div class="col">
+                <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
+            </div>
         </div>
-        <div class="form-floating mb-3">
-            <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
-            <label>Circuit</label>
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label">Circuit</label>
+            <div class="col">
+                <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
+            </div>
         </div>
-        <div class="form-floating mb-3">
-            <input class="form-control" value="{{ form.term_side.value }}" disabled />
-            <label>Termination</label>
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label">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 %}

netbox/templates/dcim/cable_connect.html

@@ -22,51 +22,73 @@
                 <div class="card-body">
                     {% if termination_a.device %}
                         {# Device component #}
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
-                            <label>Region</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Region</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.device.site }}" disabled />
-                            <label>Site</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Site</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.device.site }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
-                            <label>Location</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Location</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
-                            <label>Rack</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Rack</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.device }}" disabled />
-                            <label>Device</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Device</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.device }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
-                            <label>Type</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Type</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a }}" disabled />
-                            <label>Name</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Name</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a }}" disabled />
+                            </div>
                         </div>
                     {% else %}
                         {# Circuit termination #}
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.site }}" disabled />
-                            <label>Site</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Site</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.site }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
-                            <label>Provider</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Provider</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
-                            <label>Circuit</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Circuit</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
+                            </div>
                         </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" value="{{ termination_a.term_side }}" disabled />
-                            <label>Side</label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label">Side</label>
+                            <div class="col">
+                                <input class="form-control" value="{{ termination_a.term_side }}" disabled />
+                            </div>
                         </div>
                     {% endif %}
                 </div>
@@ -117,9 +139,11 @@
                     {% if 'termination_b_circuit' in form.fields %}
                         {% render_field form.termination_b_circuit %}
                     {% endif %}
-                    <div class="form-floating mb-3">
-                        <input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
-                        <label>Type</label>
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">Type</label>
+                        <div class="col">
+                            <input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
+                        </div>
                     </div>
                     {% render_field form.termination_b_id %}
                 </div>

netbox/templates/dcim/device_component_add.html

@@ -10,60 +10,47 @@
 <form action="" method="post" enctype="multipart/form-data">
     {% csrf_token %}
     <div class="row">
-        <div class="col col-md-8">
+        <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
             <div class="field-group">
                 <h4>{{ component_type|title }}</h4>
-                {% if form.non_field_errors %}
-                    <div class="panel panel-danger">
-                        <div class="panel-heading"><strong>Errors</strong></div>
-                        <div class="panel-body">
-                            {{ form.non_field_errors }}
-                        </div>
-                    </div>
-                {% endif %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        <strong>{{ component_type|bettertitle }}</strong>
-                    </div>
-                    <div class="panel-body">
-                        {% for field in form.hidden_fields %}
-                            {{ field }}
-                        {% endfor %}
-                        {% for field in form.visible_fields %}
-                            {% if not form.custom_fields or field.name not in form.custom_fields %}
-                                {% render_field field %}
-                            {% endif %}
-                        {% endfor %}
-                    </div>
-                </div>
+                    {% for field in form.hidden_fields %}
+                        {{ field }}
+                    {% endfor %}
+                    {% for field in form.visible_fields %}
+                        {% if not form.custom_fields or field.name not in form.custom_fields %}
+                            {% render_field field %}
+                        {% endif %}
+                    {% endfor %}
                 {% if form.custom_fields %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading"><strong>Custom Fields</strong></div>
-                        <div class="panel-body">
-                            {% render_custom_fields form %}
-                        </div>
+                    <div class="field-group">
+                        <h4>Custom Fields</h4>
+                        {% render_custom_fields form %}
                     </div>
                 {% endif %}
             </div>
         </div>
     </div>
     <div class="row my-3">
-        <div class="col col-md-8 text-end">
-        {% block buttons %}
-        <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
-        {% if component_type == 'interface' and perms.ipam.add_ipaddress %}
-        <button type="submit" name="_assignip" class="btn btn-outline-success">
-            Create & Assign IP Address
-        </button>
-        {% endif %}
-        <button type="submit" name="_addanother" class="btn btn-outline-primary">
-            Create & Add Another
-        </button>
-        <button type="submit" name="_create" class="btn btn-primary">
-            Create
-        </button>
-        {% endblock %}
+        <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
+            {% block buttons %}
+                <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
+                
+                {% if component_type == 'interface' and perms.ipam.add_ipaddress %}
+                    <button type="submit" name="_assignip" class="btn btn-outline-success">
+                        Create & Assign IP Address
+                    </button>
+                {% endif %}
+                
+                <button type="submit" name="_addanother" class="btn btn-outline-primary">
+                    Create & Add Another
+                </button>
+                
+                <button type="submit" name="_create" class="btn btn-primary">
+                    Create
+                </button>
+            
+            {% endblock %}
+        </div>
     </div>
-  </div>
 </form>
 {% endblock %}

netbox/templates/dcim/device_component_edit.html

@@ -3,9 +3,11 @@
 
 {% block form_fields %}
     {% if form.instance.device %}
-        <div class="form-floating mb-3">
-            <input class="form-control" value="{{ form.instance.device }}" disabled />
-            <label>Device</label>
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label">Device</label>
+            <div class="col">
+                <input class="form-control" value="{{ form.instance.device }}" disabled />
+            </div>
         </div>
     {% endif %}
     {% render_form form %}

netbox/templates/dcim/device_edit.html

@@ -28,18 +28,22 @@
         {% render_field form.rack %}
         
         {% if obj.device_type.is_child_device and obj.parent_bay %}
-            <div class="form-floating mb-3">
-                <input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
-                <label>Parent Device</label>
+            <div class="row mb-3">
+                <label class="col-sm-3 col-form-label">Parent Device</label>
+                <div class="col">
+                    <input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
+                </div>
             </div>
-            <div class="form-floating mb-3">
-                <div class="input-group">
-                    <input class="form-control" value="{{ obj.parent_bay.name }}" disabled />
-                    <label>Parent Bay</label>
-                    <a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" title="Regenerate Slug" class="btn btn-danger d-inline-flex align-items-center">
-                        <i class="mdi mdi-close-thick"></i>&nbsp;Remove
-                    </a>
-                </div>  
+            <div class="row mb-3">
+                <label class="col-sm-3 col-form-label">Parent Bay</label>
+                <div class="col">
+                    <div class="input-group">
+                        <input class="form-control" value="{{ obj.parent_bay.name }}" disabled />
+                        <a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" title="Regenerate Slug" class="btn btn-danger d-inline-flex align-items-center">
+                            <i class="mdi mdi-close-thick"></i>&nbsp;Remove
+                        </a>
+                    </div>
+                </div>
             </div>
         {% else %}
             {% render_field form.face %}

netbox/templates/dcim/devicebay_populate.html

@@ -9,15 +9,19 @@
     <div class="row mb-3">
         <div class="col col-md-6 offset-md-3">
             <div class="card">
-                <div class="card-header">{% block title %}Populate {{ device_bay }}{% endblock %}</div>
+                <h5 class="card-header">{% block title %}Populate {{ device_bay }}{% endblock %}</h5>
                 <div class="card-body">
-                    <div class="form-floating mb-3">
-                        <input class="form-control" value="{{ device_bay.device }}" disabled />
-                        <label>Parent Device</label>
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">Parent Device</label>
+                        <div class="col">
+                            <input class="form-control" value="{{ device_bay.device }}" disabled />
+                        </div>
                     </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" value="{{ device_bay }}" disabled />
-                        <label>Bay</label>
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">Bay</label>
+                        <div class="col">
+                            <input class="form-control" value="{{ device_bay }}" disabled />
+                        </div>
                     </div>
                     {% render_form form %}
                 </div>
@@ -25,7 +29,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col col-md-6 text-end">
+        <div class="col col-md-6 offset-md-3 text-end">
             <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
             <button type="submit" name="_update" class="btn btn-primary">Save</button>
         </div>

netbox/templates/dcim/devicetype_component_add.html

@@ -12,9 +12,11 @@
         <div class="col col-md-6">
             <div class="field-group mb-3">
                 <h4>New {{ component_type }}</h4>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" value="{{ parent }}" disabled />
-                        <label>Device Type</label>
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">Device Type</label>
+                        <div class="col">
+                            <input class="form-control" value="{{ parent }}" disabled />
+                        </div>
                     </div>
                     {% render_form form %}
                 </div>

netbox/templates/dcim/inc/cable_form.html

@@ -6,13 +6,15 @@
         {% render_field form.type %}
         {% render_field form.label %}
         {% render_field form.color %}
-        <div class="row">
-            <div class="col">
-                {% render_field form.length %}
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label">{{ form.length.label }}</label>
+            <div class="col-md-5">
+                {{ form.length }}
             </div>
-            <div class="col">
-                {% render_field form.length_unit %}
+            <div class="col-md-4">
+                {{ form.length_unit }}
             </div>
+            <div class="invalid-feedback"></div>
         </div>
         {% render_field form.tags %}
         {% if form.custom_fields %}

netbox/templates/dcim/interface_edit.html

@@ -5,9 +5,11 @@
     <div class="field-group">
         <h4 class="mb-3">Interface</h4>
             {% if form.instance.device %}
-                <div class="form-floating mb-3">
-                    <input class="form-control" value="{{ form.instance.device }}" disabled />
-                    <label class="form-label required" for="id_device">Device</label>
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label required" for="id_device">Device</label>
+                    <div class="col">
+                        <input class="form-control" value="{{ form.instance.device }}" disabled />
+                    </div>
                 </div>
             {% endif %}
         {% render_field form.name %}

netbox/templates/extras/tag.html

@@ -3,8 +3,8 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'extras:tag_list' %}">Tags</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'extras:tag_list' %}">Tags</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
@@ -55,10 +55,5 @@
     {% include 'inc/paginator.html' with paginator=items_table.paginator page=items_table.page %}
   </div>
 </div>
-<div class="row">
-  <div class="col col-md-12">
-    {% include 'inc/paginator.html' with paginator=taggeditem_table.paginator page=taggeditem_table.page %}
-  </div>
-</div>
 {% plugin_full_width_page object %}
 {% endblock %}

netbox/templates/generic/object_edit.html

@@ -63,7 +63,7 @@
     </div>
 
     <div class="row my-3">
-      <div class="col col-md-8 offset-md-2 text-end">
+      <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
         {% block buttons %}
           <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
 

netbox/templates/inc/advanced_search.html

@@ -23,9 +23,9 @@
                                                   {{ field }}
                                               </div>
                                           {% else %}
-                                              <div class="form-floating mb-3 mx-3">
+                                              <div class="mb-3 mx-3">
+                                                  <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                                   {{ field }}
-                                                  {{ field.label_tag }}
                                               </div>
                                           {% endif %}
                                       {% endwith %}
@@ -41,9 +41,9 @@
                                           {{ field }}
                                       </div>
                                   {% else %}
-                                      <div class="form-floating mb-3">
-                                          {{ field }}
-                                          {{ field.label_tag }}
+                                      <div class="mb-3">
+                                        <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+                                        {{ field }}
                                       </div>
                                   {% endif %}
                               </div>

netbox/templates/ipam/service_edit.html

@@ -5,14 +5,18 @@
     <div class="field-group">
         <h4>Service</h4>
         {% if obj.device %}
-            <div class="form-floating mb-3">
-                <input class="form-control" value="{{ obj.device }}" disabled />
-                <label class="form-label">Device</label>
+            <div class="row mb-3">
+                <label class="col-sm-3 col-form-label">Device</label>
+                <div class="col">
+                    <input class="form-control" value="{{ obj.device }}" disabled />
+                </div>
             </div>
         {% else %}
-            <div class="form-floating mb-3">
-                <input class="form-control" value="{{ obj.virtual_machine }}" disabled />
-                <label class="form-label">Virtual Machine</label>
+            <div class="row mb-3">
+                <label class="col-sm-3 col-form-label">Virtual Machine</label>
+                <div class="col">
+                    <input class="form-control" value="{{ obj.virtual_machine }}" disabled />
+                </div>
             </div>
         {% endif %}
         {% render_field form.name %}

netbox/templates/utilities/render_field.html

@@ -33,40 +33,43 @@
     </div>
 
 {% elif field|widget_type == 'slugwidget' %}
-    <div class="form-floating mb-3">
-        <div class="input-group">
-            {{ field }}
-            <label  class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
-                {{ field.label }}
-            </label>
-            <button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
-                <i class="mdi mdi-undo-variant"></i>
-            </button>
+    <div class="row mb-3">
+        <label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
+            {{ field.label }}
+        </label>
+        <div class="col">
+            <div class="input-group">
+                {{ field }}
+                <button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
+                    <i class="mdi mdi-undo-variant"></i>
+                </button>
+            </div>
         </div>
     </div>
 
 {% elif field|widget_type == 'selectspeedwidget' %}
     {# This is outside the widget because bootstrap requires a specific order for border-radius purposes. #}
-    <div class="form-floating mb-3">
-        <div class="input-group">
-            {{ field }}
-            <label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
-                {{ field.label }}
-            </label>
-            <button type="button" class="btn btn-outline-gray dropdown-toggle" data-bs-toggle="dropdown">
-            </button>
-            <ul class="dropdown-menu dropdown-menu-end">
-                <li><a href="#" target="{{ field.id_for_label }}" data="10000" class="set_speed dropdown-item">10 Mbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="100000" class="set_speed dropdown-item">100 Mbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="1000000" class="set_speed dropdown-item">1 Gbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="10000000" class="set_speed dropdown-item">10 Gbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="25000000" class="set_speed dropdown-item">25 Gbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="40000000" class="set_speed dropdown-item">40 Gbps</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="100000000" class="set_speed dropdown-item">100 Gbps</a></li>
-                <li><hr class="dropdown-divider"/></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="1544" class="set_speed dropdown-item">T1 (1.544 Mbps)</a></li>
-                <li><a href="#" target="{{ field.id_for_label }}" data="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
-            </ul>
+    <div class="row mb-3">
+        <label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
+            {{ field.label }}
+        </label>
+        <div class="col">
+            <div class="input-group">
+                {{ field }}
+                <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"></button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a href="#" target="{{ field.id_for_label }}" data="10000" class="set_speed dropdown-item">10 Mbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="100000" class="set_speed dropdown-item">100 Mbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="1000000" class="set_speed dropdown-item">1 Gbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="10000000" class="set_speed dropdown-item">10 Gbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="25000000" class="set_speed dropdown-item">25 Gbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="40000000" class="set_speed dropdown-item">40 Gbps</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="100000000" class="set_speed dropdown-item">100 Gbps</a></li>
+                    <li><hr class="dropdown-divider"/></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="1544" class="set_speed dropdown-item">T1 (1.544 Mbps)</a></li>
+                    <li><a href="#" target="{{ field.id_for_label }}" data="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
+                </ul>
+            </div>
         </div>
     </div>
 
@@ -95,17 +98,21 @@
     </div>
 
 {% else %}
-    <div class="form-floating mb-3">
-        {{ field }}
-        <label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}>
+    <div class="row mb-3">
+        <label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}">
             {{ field.label }}
         </label>
-        
-        {% if field.help_text %}
-            <span class="form-text">{{ field.help_text|safe }}</span>
-        {% endif %}
-        
-        <div class="invalid-feedback">{% if field.field.required %}<strong>{{ field.label }}</strong> field is required.{% endif %}</div>
+        <div class="col">
+            {{ field }}
+            {% if field.help_text %}
+                <span class="form-text">{{ field.help_text|safe }}</span>
+            {% endif %}
+            <div class="invalid-feedback">
+                {% if field.field.required %}
+                    <strong>{{ field.label }}</strong> field is required.
+                {% endif %}
+            </div>
+        </div>
     </div>
     
 {% endif %}

netbox/templates/virtualization/vminterface_edit.html

@@ -5,9 +5,11 @@
     <div class="field-group">
         <h4>Interface</h4>
         {% if form.instance.virtual_machine %}
-            <div class="form-floating mb-3">
-                <input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
-                <label class="form-label required" for="id_device">Virtual Machine</label>
+            <div class="row mb-3">
+                <label class="col-sm-3 col-form-label required" for="id_device">Virtual Machine</label>
+                <div class="col">
+                    <input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
+                </div>
             </div>
         {% endif %}
         {% render_field form.name %}