#6372: Improve bulk action button layout/styling

netbox/project-static/styles/netbox.scss

@@ -734,10 +734,38 @@ label.required {
   }
 }
 
+// Applied to containing element around table bulk-action buttons (bulk-edit, bulk-disconnect
+// bulk-delete, etc). Each usage of .bulk-buttons needs to have groups of buttons wrapped with
+// .bulk-button-group so that proper spacing is applied (even if there is only one group).
 div.bulk-buttons {
   display: flex;
-  & > * {
+  justify-content: space-between;
-    margin: $spacer / 4;
+  margin: $spacer / 2 0;
+  // Each group of buttons needs to be contained separately for alignment purposes. This way, you
+  // can put some buttons in a group that aligns left, and other buttons in a group that aligns
+  // right.
+  & > div.bulk-button-group {
+    display: flex;
+    &:first-of-type:not(:last-of-type) {
+      // If there are multiple bulk button groups and this is the first, the first button in the
+      // group should *not* have left spacing applied, so the button group aligns with the rest
+      // of the page elements.
+      & > *:first-child {
+        margin-left: 0;
+      }
+    }
+    &:last-of-type:not(:first-of-type) {
+      // If there are multiple bulk button groups and this is the last, the last button in the
+      // group should *not* have right spacing applied, so the button group aligns with the rest
+      // of the page elements.
+      & > *:last-child {
+        margin-right: 0;
+      }
+    }
+    // However, the rest of the buttons should have spacing applied in all directions.
+    & > * {
+      margin: $spacer / 4;
+    }
   }
 }
 

netbox/templates/dcim/device/interfaces.html

@@ -35,7 +35,8 @@
         </div>
     </div>
     {% render_table interface_table 'inc/table.html' %}
-    <div class="noprint">
+    <div class="noprint bulk-buttons">
+        <div class="bulk-button-group">
         {% if perms.dcim.change_interface %}
             <button type="submit" name="_rename" formaction="{% url 'dcim:interface_bulk_rename' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-outline-warning btn-sm">
                 <i class="mdi mdi-pencil-outline" aria-hidden="true"></i> Rename
@@ -52,14 +53,14 @@
                 <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete
             </button>
         {% endif %}
+        </div>
         {% if perms.dcim.add_interface %}
-            <div class="float-end">
+            <div class="bulk-button-group">
                 <a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-primary btn-sm">
                     <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add Interfaces
                 </a>
             </div>
         {% endif %}
-        <div class="clearfix"></div>
     </div>
   </form>
   {% include 'inc/paginator.html' with paginator=interface_table.paginator page=interface_table.page %}

netbox/templates/generic/object_list.html

@@ -71,18 +71,20 @@
           <div class="table-responsive">
             {% render_table table 'inc/table.html' %}
           </div>
-          <div class="float-start noprint bulk-buttons">
+          <div class="noprint bulk-buttons">
-            {% block bulk_buttons %}{% endblock %}
+            <div class="bulk-button-group">
-            {% if bulk_edit_url and permissions.change %}
+              {% block bulk_buttons %}{% endblock %}
-            <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm">
+              {% if bulk_edit_url and permissions.change %}
-              <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit Selected
+                <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm">
-            </button>
+                  <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit Selected
-            {% endif %}
+                </button>
-            {% if bulk_delete_url and permissions.delete %}
+              {% endif %}
-            <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm">
+              {% if bulk_delete_url and permissions.delete %}
-              <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete Selected
+                <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm">
-            </button>
+                  <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete Selected
-            {% endif %}
+                </button>
+              {% endif %}
+            </div>
           </div>
         </form>
       {% else %}