migrate templates to bootstrap 5

netbox/project-static/netbox.scss

@@ -262,6 +262,10 @@ textarea#id_public_key {
   font-family: $font-family-monospace;
 }
 
+table tr.vertical-align {
+  vertical-align: middle;
+}
+
 // Pad all adjacent cards
 .card:not(:only-of-type) {
   margin-bottom: $spacer;

netbox/templates/circuits/circuittype.html

@@ -3,33 +3,35 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'circuits:circuittype_list' %}">Circuit Types</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'circuits:circuittype_list' %}">Circuit Types</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Circuit Type</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Circuit Type
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Circuits</th>
+            <td>
+              <a href="{% url 'circuits:circuit_list' %}?type_id={{ object.pk }}">{{ circuits_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Circuits</td>
-          <td>
-            <a href="{% url 'circuits:circuit_list' %}?type_id={{ object.pk }}">{{ circuits_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
   </div>
@@ -38,17 +40,19 @@
     {% plugin_right_page object %}
 	</div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Circuits</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Circuits
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=circuits_table %}
       </div>
-      {% include 'inc/table.html' with table=circuits_table %}
       {% if perms.circuits.add_circuit %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'circuits:circuit_add' %}?type={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add circuit
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'circuits:circuit_add' %}?type={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Circuit
           </a>
         </div>
       {% endif %}

netbox/templates/circuits/providernetwork.html

@@ -4,43 +4,45 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'circuits:providernetwork_list' %}">Provider Networks</a></li>
-  <li><a href="{% url 'circuits:providernetwork_list' %}?provider_id={{ object.provider_id }}">{{ object.provider }}</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'circuits:providernetwork_list' %}">Provider Networks</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'circuits:providernetwork_list' %}?provider_id={{ object.provider_id }}">{{ object.provider }}</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
 <div class="row">
 	  <div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Provider Network</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Provider Network
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row">Provider</th>
+                        <td>
+                            <a href="{{ object.provider.get_absolute_url }}">{{ object.provider }}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Name</th>
+                        <td>{{ object.name }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Description</th>
+                        <td>{{ object.description }}</td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Provider</td>
-                    <td>
-                        <a href="{{ object.provider.get_absolute_url }}">{{ object.provider }}</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Name</td>
-                    <td>{{ object.name }}</td>
-                </tr>
-                <tr>
-                    <td>Description</td>
-                    <td>{{ object.description }}</td>
-                </tr>
-            </table>
         </div>
         {% plugin_left_page object %}
     </div>
     <div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Comments</strong>
-            </div>
-            <div class="panel-body rendered-markdown">
+        <div class="card">
+            <h5 class="card-header">
+                Comments
+            </h5>
+            <div class="card-body rendered-markdown">
                 {% if object.comments %}
                     {{ object.comments|render_markdown }}
                 {% else %}
@@ -55,11 +57,13 @@
 </div>
 <div class="row">
     <div class="col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Circuits</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Circuits
+            </h5>
+            <div class="card-body">
+                {% include 'inc/table.html' with table=circuits_table %}
             </div>
-            {% include 'inc/table.html' with table=circuits_table %}
         </div>
         {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page %}
     </div>

netbox/templates/dcim/devicerole.html

@@ -3,49 +3,51 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:devicerole_list' %}">Device Roles</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:devicerole_list' %}">Device Roles</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Device Role</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Device Role
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Color</th>
+            <td>
+              <span class="badge color-label" style="background-color: #{{ object.color }}">&nbsp;</span>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">VM Role</th>
+            <td>
+              {% if object.vm_role %}
+                <i class="mdi mdi-check-bold text-success" title="Yes"></i>
+              {% else %}
+                <i class="mdi mdi-close-thick text-danger" title="No"></i>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Devices</th>
+            <td>
+              <a href="{% url 'dcim:device_list' %}?role_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Color</td>
-          <td>
-            <span class="label color-block" style="background-color: #{{ object.color }}">&nbsp;</span>
-          </td>
-        </tr>
-        <tr>
-          <td>VM Role</td>
-          <td>
-            {% if object.vm_role %}
-              <i class="mdi mdi-check-bold text-success" title="Yes"></i>
-            {% else %}
-              <i class="mdi mdi-close-thick text-danger" title="No"></i>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>Devices</td>
-          <td>
-            <a href="{% url 'dcim:device_list' %}?role_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
 	</div>
@@ -54,17 +56,19 @@
     {% plugin_right_page object %}
   </div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Devices</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Devices
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=devices_table %}
       </div>
-      {% include 'inc/table.html' with table=devices_table %}
       {% if perms.dcim.add_device %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:device_add' %}?device_role={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:device_add' %}?device_role={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Device
           </a>
         </div>
       {% endif %}

netbox/templates/dcim/frontport.html

@@ -3,108 +3,124 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  {{ block.super }}
-  <li><a href="{% url 'dcim:device_frontports' pk=object.device.pk %}">Front Ports</a></li>
-  <li>{{ object }}</li>
+  
+  <li class="breadcrumb-item"><a href="{% url 'dcim:device_frontports' pk=object.device.pk %}">Front Ports</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Front Port</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Front Port
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <th scope="row">Device</th>
+                            <td>
+                                <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Name</th>
+                            <td>{{ object.name }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Label</th>
+                            <td>{{ object.label|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Type</th>
+                            <td>{{ object.get_type_display }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Rear Port</th>
+                            <td>
+                                <a href="{{ object.rear_port.get_absolute_url }}">{{ object.rear_port }}</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Rear Port Position</th>
+                            <td>{{ object.rear_port_position }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Description</th>
+                            <td>{{ object.description|placeholder }}</td>
+                        </tr>
+                    </table>
                 </div>
-                <table class="table table-hover panel-body attr-table">
-                    <tr>
-                        <td>Device</td>
-                        <td>
-                            <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Name</td>
-                        <td>{{ object.name }}</td>
-                    </tr>
-                    <tr>
-                        <td>Label</td>
-                        <td>{{ object.label|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Type</td>
-                        <td>{{ object.get_type_display }}</td>
-                    </tr>
-                    <tr>
-                        <td>Rear Port</td>
-                        <td>
-                            <a href="{{ object.rear_port.get_absolute_url }}">{{ object.rear_port }}</a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Rear Port Position</td>
-                        <td>{{ object.rear_port_position }}</td>
-                    </tr>
-                    <tr>
-                        <td>Description</td>
-                        <td>{{ object.description|placeholder }}</td>
-                    </tr>
-                </table>
             </div>
             {% include 'inc/custom_fields_panel.html' %}
             {% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
             {% plugin_left_page object %}
         </div>
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Connection</strong>
-                </div>
+            <div class="card">
+                <h5 class="card-header">
+                    Connection
+                </h5>
+                <div class="card-body">
                 {% if object.mark_connected %}
-                    <div class="panel-body text-muted">
-                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+                    <div class="text-muted">
+                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
                     </div>
                 {% elif object.cable %}
-                    <table class="table table-hover panel-body attr-table">
+                    <table class="table table-hover attr-table">
                         <tr>
-                            <td>Cable</td>
+                            <th scope="row">Cable</th>
                             <td>
                                 <a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a>
-                                <a href="{% url 'dcim:frontport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
+                                <a href="{% url 'dcim:frontport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
                                     <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
                                 </a>
                             </td>
                         </tr>
                         <tr>
-                            <td>Connection Status</td>
+                            <th scope="row">Connection Status</th>
                             <td>
                                 {% if object.cable.status %}
-                                    <span class="label label-success">{{ object.cable.get_status_display }}</span>
+                                    <span class="badge bg-success">{{ object.cable.get_status_display }}</span>
                                 {% else %}
-                                    <span class="label label-info">{{ object.cable.get_status_display }}</span>
+                                    <span class="badge bg-info">{{ object.cable.get_status_display }}</span>
                                 {% endif %}
                             </td>
                         </tr>
                     </table>
                 {% else %}
-                    <div class="panel-body text-muted">
-                        Not connected
+                    <div class="text-muted">
+                        Not Connected
                         {% if perms.dcim.add_cable %}
-                            <span class="dropdown pull-right">
-                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <div class="dropdown float-end">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
                                 </button>
-                                    <ul class="dropdown-menu dropdown-menu-right">
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='interface' %}?return_url={{ object.get_absolute_url }}">Interface</a></li>
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='console-server-port' %}?return_url={{ object.get_absolute_url }}">Console Server Port</a></li>
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='console-port' %}?return_url={{ object.get_absolute_url }}">Console Port</a></li>
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a></li>
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a></li>
-                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='circuit-termination' %}?return_url={{ object.get_absolute_url }}">Circuit Termination</a></li>
-                                    </ul>
-                            </span>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='interface' %}?return_url={{ object.get_absolute_url }}">Interface</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='console-server-port' %}?return_url={{ object.get_absolute_url }}">Console Server Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='console-port' %}?return_url={{ object.get_absolute_url }}">Console Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'dcim:frontport_connect' termination_a_id=object.pk termination_b_type='circuit-termination' %}?return_url={{ object.get_absolute_url }}">Circuit Termination</a>
+                                    </li>
+                                </ul>
+                            </div>
                         {% endif %}
                     </div>
                 {% endif %}
+                </div>
             </div>
             {% plugin_right_page object %}
         </div>

netbox/templates/dcim/interface.html

@@ -4,14 +4,13 @@
 {% load render_table from django_tables2 %}
 
 {% block breadcrumbs %}
-  {{ block.super }}
-  <li><a href="{% url 'dcim:device_interfaces' pk=object.device.pk %}">Interfaces</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:device_interfaces' pk=object.device.pk %}">Interfaces</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
-{% block buttons %}
+{% block extra_controls %}
   {% if perms.dcim.add_interface and not object.is_virtual %}
-    <a href="{% url 'dcim:interface_add' %}?device={{ object.device.pk }}&parent={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-success">
+    <a href="{% url 'dcim:interface_add' %}?device={{ object.device.pk }}&parent={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-success m-1">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Child Interface
     </a>
   {% endif %}
@@ -19,7 +18,7 @@
 {% endblock %}
 
 {% block content %}
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-6">
             <div class="card">
                 <h5 class="card-header">
@@ -115,7 +114,7 @@
                                 <th scope="row">Cable</th>
                                 <td>
                                     <a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a>
-                                    <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-primary btn-sm" title="Trace">
+                                    <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
                                         <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
                                     </a>
                                 </td>
@@ -267,20 +266,22 @@
             {% plugin_right_page object %}
         </div>
     </div>
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>IP Addresses</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    IP Addresses
+                </h5>
+                <div class="card-body">
+                    {% if ipaddress_table.rows %}
+                        {% render_table ipaddress_table 'inc/table.html' %}
+                    {% else %}
+                        <div class="text-muted">None</div>
+                    {% endif %}
                 </div>
-                {% if ipaddress_table.rows %}
-                    {% render_table ipaddress_table 'inc/table.html' %}
-                {% else %}
-                    <div class="panel-body text-muted">None</div>
-                {% endif %}
                 {% if perms.ipam.add_ipaddress %}
-                    <div class="panel-footer text-right noprint">
-                        <a href="{% url 'ipam:ipaddress_add' %}?device={{ object.device.pk }}&interface={{ object.pk }}" class="btn btn-xs btn-primary">
+                    <div class="card-footer text-end noprint">
+                        <a href="{% url 'ipam:ipaddress_add' %}?device={{ object.device.pk }}&interface={{ object.pk }}" class="btn btn-sm btn-primary">
                             <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add IP Address
                         </a>
                     </div>
@@ -288,17 +289,17 @@
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-12">
             {% include 'panel_table.html' with table=vlan_table heading="VLANs" %}
         </div>
     </div>
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-12">
             {% include 'panel_table.html' with table=child_interfaces_table heading="Child Interfaces" %}
         </div>
     </div>
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-12">
             {% plugin_full_width_page object %}
         </div>

netbox/templates/dcim/interface_edit.html

@@ -2,18 +2,14 @@
 {% load form_helpers %}
 
 {% block form %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Interface</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header">Interface</div>
+        <div class="card-body">
             {% if form.instance.device %}
-                <div class="form-group">
-                    <label class="col-md-3 control-label required" for="id_device">Device</label>
-                    <div class="col-md-9">
-                        <p class="form-control-static">
-                            <a href="{{ form.instance.device.get_absolute_url }}">{{ form.instance.device }}</a>
-                        </p>
-                    </div>
-                </div>
+            <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>
             {% endif %}
             {% render_field form.name %}
             {% render_field form.label %}
@@ -29,18 +25,18 @@
             {% render_field form.tags %}
         </div>
     </div>
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>802.1Q Switching</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header">802.1Q Switching</div>
+        <div class="card-body">
             {% render_field form.mode %}
             {% render_field form.untagged_vlan %}
             {% render_field form.tagged_vlans %}
         </div>
     </div>
     {% if form.custom_fields %}
-      <div class="panel panel-default">
-        <div class="panel-heading"><strong>Custom Fields</strong></div>
-        <div class="panel-body">
+      <div class="card">
+        <div class="card-header">Custom Fields</div>
+        <div class="card-body">
           {% render_custom_fields form %}
         </div>
       </div>
@@ -48,12 +44,12 @@
 {% endblock %}
 
 {% block buttons %}
+    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
     {% if obj.pk %}
+        <button type="submit" formaction="?return_url={% url 'dcim:interface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Update & Continue Editing</button>
         <button type="submit" name="_update" class="btn btn-primary">Update</button>
-        <button type="submit" formaction="?return_url={% url 'dcim:interface_edit' pk=obj.pk %}" class="btn btn-primary">Update and Continue Editing</button>
     {% else %}
+        <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>
-        <button type="submit" name="_addanother" class="btn btn-primary">Create and Add Another</button>
     {% endif %}
-    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-{% endblock %}
+{% endblock %}

netbox/templates/dcim/inventoryitem.html

@@ -3,70 +3,71 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  {{ block.super }}
-  <li><a href="{% url 'dcim:device_inventory' pk=object.device.pk %}">Inventory Items</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:device_inventory' pk=object.device.pk %}">Inventory Items</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Inventory Item</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Inventory Item
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <th scope="row">Device</th>
+                            <td>
+                                <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Parent Item</th>
+                            <td>
+                                {% if object.parent %}
+                                    <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+                                {% else %}
+                                    <span class="text-muted">&mdash;</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Name</th>
+                            <td>{{ object.name }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Label</th>
+                            <td>{{ object.label|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Manufacturer</th>
+                            <td>
+                                {% if object.manufacturer %}
+                                    <a href="{{ object.manufacturer.get_absolute_url }}">{{ object.manufacturer }}</a>
+                                {% else %}
+                                    <span class="text-muted">&mdash;</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Part ID</th>
+                            <td>{{ object.part_id|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Serial</th>
+                            <td>{{ object.serial|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Asset Tag</th>
+                            <td>{{ object.asset_tag|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Description</th>
+                            <td>{{ object.description|placeholder }}</td>
+                        </tr>
+                    </table>
                 </div>
-                <table class="table table-hover panel-body attr-table">
-                    <tr>
-                        <td>Device</td>
-                        <td>
-                            <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Parent Item</td>
-                        <td>
-                            {% if object.parent %}
-                                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-                            {% else %}
-                                <span class="text-muted">&mdash;</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Name</td>
-                        <td>{{ object.name }}</td>
-                    </tr>
-                    <tr>
-                        <td>Label</td>
-                        <td>{{ object.label|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Manufacturer</td>
-                        <td>
-                            {% if object.manufacturer %}
-                                <a href="{{ object.manufacturer.get_absolute_url }}">{{ object.manufacturer }}</a>
-                            {% else %}
-                                <span class="text-muted">&mdash;</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Part ID</td>
-                        <td>{{ object.part_id|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Serial</td>
-                        <td>{{ object.serial|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Asset Tag</td>
-                        <td>{{ object.asset_tag|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Description</td>
-                        <td>{{ object.description|placeholder }}</td>
-                    </tr>
-                </table>
             </div>
             {% include 'inc/custom_fields_panel.html' %}
             {% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
@@ -76,7 +77,7 @@
             {% plugin_right_page object %}
         </div>
     </div>
-    <div class="row">
+    <div class="row mb-3">
         <div class="col-md-12">
             {% plugin_full_width_page object %}
         </div>

netbox/templates/dcim/location.html

@@ -3,95 +3,101 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:location_list' %}">Locations</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:location_list' %}">Locations</a></li>
   {% for location in object.get_ancestors %}
-    <li><a href="{{ location.get_absolute_url }}">{{ location }}</a></li>
+    <li class="breadcrumb-item"><a href="{{ location.get_absolute_url }}">{{ location }}</a></li>
   {% endfor %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Location</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Location
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Site</th>
+            <td><a href="{{ object.site.get_absolute_url }}">{{ object.site }}</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Parent</th>
+            <td>
+              {% if object.parent %}
+                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+              {% else %}
+                <span class="text-muted">&mdash;</span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Racks</th>
+            <td>
+              <a href="{% url 'dcim:rack_list' %}?location_id={{ object.pk }}">{{ object.racks.count }}</a>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Devices</th>
+            <td>
+              <a href="{% url 'dcim:device_list' %}?location_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Site</td>
-          <td><a href="{{ object.site.get_absolute_url }}">{{ object.site }}</a></td>
-        </tr>
-        <tr>
-          <td>Parent</td>
-          <td>
-            {% if object.parent %}
-              <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-            {% else %}
-              <span class="text-muted">&mdash;</span>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>Racks</td>
-          <td>
-            <a href="{% url 'dcim:rack_list' %}?location_id={{ object.pk }}">{{ object.racks.count }}</a>
-          </td>
-        </tr>
-        <tr>
-          <td>Devices</td>
-          <td>
-            <a href="{% url 'dcim:device_list' %}?location_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
   </div>
 	<div class="col-md-6">
     {% include 'inc/custom_fields_panel.html' %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <strong>Images</strong>
+    <div class="card">
+        <h5 class="card-header">
+            Images
+        </h5>
+        <div class="card-body">
+          {% include 'inc/image_attachments.html' with images=object.images.all %}
         </div>
-        {% include 'inc/image_attachments.html' with images=object.images.all %}
         {% if perms.extras.add_imageattachment %}
-            <div class="panel-footer text-right noprint">
-                <a href="{% url 'dcim:location_add_image' object_id=object.pk %}" class="btn btn-primary btn-xs">
-                    <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
-                    Attach an image
-                </a>
-            </div>
+          <div class="card-footer text-end noprint">
+              <a href="{% url 'dcim:location_add_image' object_id=object.pk %}" class="btn btn-primary btn-sm">
+                  <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
+                  Attach an Image
+              </a>
+          </div>
         {% endif %}
     </div>
     {% plugin_right_page object %}
 	</div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Devices</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Devices
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=devices_table %}
       </div>
-      {% include 'inc/table.html' with table=devices_table %}
       {% if perms.dcim.add_device %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:device_add' %}?location={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device
-          </a>
-        </div>
-      {% endif %}
+      <div class="card-footer text-end noprint">
+        <a href="{% url 'dcim:device_add' %}?location={{ object.pk }}" class="btn btn-sm btn-primary">
+          <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Device
+        </a>
       </div>
-      {% include 'inc/paginator.html' with paginator=devices_table.paginator page=devices_table.page %}
-      {% plugin_full_width_page object %}
+      {% endif %}
+    </div>
+    {% include 'inc/paginator.html' with paginator=devices_table.paginator page=devices_table.page %}
+    {% plugin_full_width_page object %}
   </div>
 </div>
 {% endblock %}

netbox/templates/dcim/platform.html

@@ -3,51 +3,53 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:platform_list' %}">Platforms</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:platform_list' %}">Platforms</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Platform</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Platform
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Manufacturer</th>
+            <td>
+              {% if object.manufacturer %}
+                <a href="{{ object.manufacturer.get_absolute_url }}">{{ object.manufacturer }}</a>
+              {% else %}
+                <span class="text-muted">None</span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">NAPALM Driver</th>
+            <td>{{ object.napalm_driver|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">NAPALM Arguments</th>
+            <td><pre>{{ object.napalm_args }}</pre></td>
+          </tr>
+          <tr>
+            <th scope="row">Devices</th>
+            <td>
+              <a href="{% url 'dcim:device_list' %}?platform_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Manufacturer</td>
-          <td>
-            {% if object.manufacturer %}
-              <a href="{{ object.manufacturer.get_absolute_url }}">{{ object.manufacturer }}</a>
-            {% else %}
-              <span class="text-muted">None</span>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>NAPALM Driver</td>
-          <td>{{ object.napalm_driver|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>NAPALM Arguments</td>
-          <td><pre>{{ object.napalm_args }}</pre></td>
-        </tr>
-        <tr>
-          <td>Devices</td>
-          <td>
-            <a href="{% url 'dcim:device_list' %}?platform_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
 	</div>
@@ -56,17 +58,19 @@
     {% plugin_right_page object %}
   </div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Devices</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Devices
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=devices_table %}
       </div>
-      {% include 'inc/table.html' with table=devices_table %}
       {% if perms.dcim.add_device %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:device_add' %}?device_role={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:device_add' %}?device_role={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Device
           </a>
         </div>
       {% endif %}

netbox/templates/dcim/powerpanel.html

@@ -52,32 +52,33 @@
     <div class="col-md-12">
         <form method="post">
             {% csrf_token %}
-            <div class="panel panel-default">
-                {% render_table powerfeed_table 'inc/table.html' %}
-                <div class="panel-footer noprint">
+            <div class="card">
+                <div class="card-body">
+                    {% render_table powerfeed_table 'inc/table.html' %}
+                </div>
+                <div class="card-footer noprint">
                     {% if perms.dcim.change_powerfeed %}
-                        <button type="submit" name="_edit" formaction="{% url 'dcim:powerfeed_bulk_edit' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-warning btn-xs">
+                        <button type="submit" name="_edit" formaction="{% url 'dcim:powerfeed_bulk_edit' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-warning btn-sm">
                             <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
                         </button>
                     {% endif %}
                     {% if perms.dcim.delete_cable %}
-                        <button type="submit" name="_disconnect" formaction="{% url 'dcim:powerfeed_bulk_disconnect' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-danger btn-xs">
+                        <button type="submit" name="_disconnect" formaction="{% url 'dcim:powerfeed_bulk_disconnect' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-outline-danger btn-sm">
                             <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                         </button>
                     {% endif %}
                     {% if perms.dcim.delete_powerfeed %}
-                        <button type="submit" name="_delete" formaction="{% url 'dcim:powerfeed_bulk_delete' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-danger btn-xs">
+                        <button type="submit" name="_delete" formaction="{% url 'dcim:powerfeed_bulk_delete' %}?return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-danger btn-sm">
                             <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
                         </button>
                     {% endif %}
                     {% if perms.dcim.add_powerfeed %}
-                        <div class="pull-right">
-                            <a href="{% url 'dcim:powerfeed_add' %}?power_panel={{ object.pk }}&return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-primary btn-xs">
-                                <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add power feeds
+                        <div class="float-end">
+                            <a href="{% url 'dcim:powerfeed_add' %}?power_panel={{ object.pk }}&return_url={% url 'dcim:powerpanel' pk=object.pk %}" class="btn btn-primary btn-sm">
+                                <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Power Feeds
                             </a>
                         </div>
                     {% endif %}
-                    <div class="clearfix"></div>
                  </div>
             </div>
         </form>

netbox/templates/dcim/rackreservation.html

@@ -6,88 +6,83 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:rackreservation_list' %}">Rack Reservations</a></li>
-  <li><a href="{{ object.rack.get_absolute_url }}">{{ object.rack }}</a></li>
-  <li>Units {{ object.unit_list }}</li>
-{% endblock %}
-
-{% block buttons %}
-  {% if perms.dcim.change_rackreservation %}
-    {% edit_button object %}
-  {% endif %}
-  {% if perms.dcim.delete_rackreservation %}
-    {% delete_button object %}
-  {% endif %}
+  <li class="breadcrumb-item"><a href="{% url 'dcim:rackreservation_list' %}">Rack Reservations</a></li>
+  <li class="breadcrumb-item"><a href="{{ object.rack.get_absolute_url }}">{{ object.rack }}</a></li>
+  <li class="breadcrumb-item">Units {{ object.unit_list }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Rack</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Rack
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    {% with rack=object.rack %}
+                        <tr>
+                            <th scope="row">Site</th>
+                            <td>
+                                {% if rack.site.region %}
+                                    <a href="{{ rack.site.region.get_absolute_url }}">{{ rack.site.region }}</a> /
+                                {% endif %}
+                                <a href="{{ rack.site.get_absolute_url }}">{{ rack.site }}</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Group</th>
+                            <td>
+                                {% if rack.group %}
+                                    <a href="{{ rack.group.get_absolute_url }}">{{ rack.group }}</a>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Rack</th>
+                            <td>
+                                <a href="{{ rack.get_absolute_url }}">{{ rack }}</a>
+                            </td>
+                        </tr>
+                    {% endwith %}
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                {% with rack=object.rack %}
+        </div>
+        <div class="card">
+            <h5 class="card-header">
+                Reservation Details
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
                     <tr>
-                        <td>Site</td>
-                        <td>
-                            {% if rack.site.region %}
-                                <a href="{{ rack.site.region.get_absolute_url }}">{{ rack.site.region }}</a> /
-                            {% endif %}
-                            <a href="{{ rack.site.get_absolute_url }}">{{ rack.site }}</a>
-                        </td>
+                        <th scope="row">Units</th>
+                        <td>{{ object.unit_list }}</td>
                     </tr>
                     <tr>
-                        <td>Group</td>
+                        <th scope="row">Tenant</th>
                         <td>
-                            {% if rack.group %}
-                                <a href="{{ rack.group.get_absolute_url }}">{{ rack.group }}</a>
+                            {% if object.tenant %}
+                                {% if object.tenant.group %}
+                                    <a href="{{ object.tenant.group.get_absolute_url }}">{{ object.tenant.group }}</a> /
+                                {% endif %}
+                                <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
                             {% else %}
                                 <span class="text-muted">None</span>
                             {% endif %}
                         </td>
                     </tr>
                     <tr>
-                        <td>Rack</td>
-                        <td>
-                            <a href="{{ rack.get_absolute_url }}">{{ rack }}</a>
-                        </td>
+                        <th scope="row">User</th>
+                        <td>{{ object.user }}</td>
                     </tr>
-                {% endwith %}
-            </table>
-        </div>
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Reservation Details</strong>
+                    <tr>
+                        <th scope="row">Description</th>
+                        <td>{{ object.description }}</td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Units</td>
-                    <td>{{ object.unit_list }}</td>
-                </tr>
-                <tr>
-                    <td>Tenant</td>
-                    <td>
-                        {% if object.tenant %}
-                            {% if object.tenant.group %}
-                                <a href="{{ object.tenant.group.get_absolute_url }}">{{ object.tenant.group }}</a> /
-                            {% endif %}
-                            <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
-                        {% else %}
-                            <span class="text-muted">None</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>User</td>
-                    <td>{{ object.user }}</td>
-                </tr>
-                <tr>
-                    <td>Description</td>
-                    <td>{{ object.description }}</td>
-                </tr>
-            </table>
         </div>
         {% include 'inc/custom_fields_panel.html' %}
         {% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='dcim:rackreservation_list' %}
@@ -95,17 +90,17 @@
 	</div>
     <div class="col-md-6">
         <div class="row" style="margin-bottom: 20px">
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="rack_header">
+            <div class="col-md-6 col-sm-6 col-xs-12 text-center">
+                <div style="margin-left: 30px">
                     <h4>Front</h4>
+                    {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='front' %}
                 </div>
-                {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='front' %}
             </div>
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="rack_header">
+            <div class="col-md-6 col-sm-6 col-xs-12 text-center">
+                <div style="margin-left: -30px">
                     <h4>Rear</h4>
+                    {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='rear' %}
                 </div>
-                {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='rear' %}
             </div>
         </div>
         {% plugin_right_page object %}
@@ -117,7 +112,3 @@
     </div>
 </div>
 {% endblock %}
-
-{% block javascript %}
-<script src="{% static 'js/rack_elevations.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/rackrole.html

@@ -3,39 +3,41 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:rackrole_list' %}">Rack Roles</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:rackrole_list' %}">Rack Roles</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Rack Role</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Rack Role
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Color</th>
+            <td>
+              <span class="badge color-label" style="background-color: #{{ object.color }}">&nbsp;</span>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Racks</th>
+            <td>
+              <a href="{% url 'dcim:rack_list' %}?role_id={{ object.pk }}">{{ racks_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Color</td>
-          <td>
-            <span class="label color-block" style="background-color: #{{ object.color }}">&nbsp;</span>
-          </td>
-        </tr>
-        <tr>
-          <td>Racks</td>
-          <td>
-            <a href="{% url 'dcim:rack_list' %}?role_id={{ object.pk }}">{{ racks_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
 	</div>
@@ -44,17 +46,19 @@
     {% plugin_right_page object %}
   </div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Racks</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Racks
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=racks_table %}
       </div>
-      {% include 'inc/table.html' with table=racks_table %}
       {% if perms.dcim.add_rack %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:rack_add' %}?role={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add rack
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:rack_add' %}?role={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Rack
           </a>
         </div>
       {% endif %}

netbox/templates/dcim/rearport.html

@@ -3,100 +3,111 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  {{ block.super }}
-  <li><a href="{% url 'dcim:device_rearports' pk=object.device.pk %}">Rear Ports</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:device_rearports' pk=object.device.pk %}">Rear Ports</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Rear Port</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Rear Port
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <th scope="row">Device</th>
+                            <td>
+                                <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Name</th>
+                            <td>{{ object.name }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Label</th>
+                            <td>{{ object.label|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Type</th>
+                            <td>{{ object.get_type_display }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Positions</th>
+                            <td>{{ object.positions }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Description</th>
+                            <td>{{ object.description|placeholder }}</td>
+                        </tr>
+                    </table>
                 </div>
-                <table class="table table-hover panel-body attr-table">
-                    <tr>
-                        <td>Device</td>
-                        <td>
-                            <a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Name</td>
-                        <td>{{ object.name }}</td>
-                    </tr>
-                    <tr>
-                        <td>Label</td>
-                        <td>{{ object.label|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Type</td>
-                        <td>{{ object.get_type_display }}</td>
-                    </tr>
-                    <tr>
-                        <td>Positions</td>
-                        <td>{{ object.positions }}</td>
-                    </tr>
-                    <tr>
-                        <td>Description</td>
-                        <td>{{ object.description|placeholder }}</td>
-                    </tr>
-                </table>
             </div>
             {% include 'inc/custom_fields_panel.html' %}
             {% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
             {% plugin_left_page object %}
         </div>
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Connection</strong>
-                </div>
+            <div class="card">
+                <h5 class="card-header">
+                    Connection
+                </h5>
+                <div class="card-body">
                 {% if object.mark_connected %}
-                    <div class="panel-body text-muted">
-                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+                    <div class="text-muted">
+                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
                     </div>
                 {% elif object.cable %}
-                    <table class="table table-hover panel-body attr-table">
+                    <table class="table table-hover attr-table">
                         <tr>
-                            <td>Cable</td>
+                            <th scope="row">Cable</th>
                             <td>
                                 <a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a>
-                                <a href="{% url 'dcim:rearport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
+                                <a href="{% url 'dcim:rearport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
                                     <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
                                 </a>
                             </td>
                         </tr>
                         <tr>
-                            <td>Connection Status</td>
+                            <th scope="row">Connection Status</th>
                             <td>
                                 {% if object.cable.status %}
-                                    <span class="label label-success">{{ object.cable.get_status_display }}</span>
+                                    <span class="badge bg-success">{{ object.cable.get_status_display }}</span>
                                 {% else %}
-                                    <span class="label label-info">{{ object.cable.get_status_display }}</span>
+                                    <span class="badge bg-info">{{ object.cable.get_status_display }}</span>
                                 {% endif %}
                             </td>
                         </tr>
                     </table>
                 {% else %}
-                    <div class="panel-body text-muted">
+                    <div class="text-muted">
                         Not connected
                         {% if perms.dcim.add_cable %}
-                            <span class="dropdown pull-right">
-                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="dropdown float-end">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
                                 </button>
-                                <ul class="dropdown-menu dropdown-menu-right">
-                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='interface' %}?return_url={{ object.get_absolute_url }}">Interface</a></li>
-                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a></li>
-                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a></li>
-                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='circuit-termination' %}?return_url={{ object.get_absolute_url }}">Circuit Termination</a></li>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-link" href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='interface' %}?return_url={{ object.get_absolute_url }}">Interface</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-link" href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-link" href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-link" href="{% url 'dcim:rearport_connect' termination_a_id=object.pk termination_b_type='circuit-termination' %}?return_url={{ object.get_absolute_url }}">Circuit Termination</a>
+                                    </li>
                                 </ul>
                             </span>
                         {% endif %}
                     </div>
                 {% endif %}
+                </div>
             </div>
             {% plugin_right_page object %}
         </div>

netbox/templates/dcim/region.html

@@ -3,60 +3,64 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:region_list' %}">Region</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:region_list' %}">Region</a></li>
   {% for region in object.get_ancestors %}
-    <li><a href="{{ region.get_absolute_url }}">{{ region }}</a></li>
+    <li class="breadcrumb-item"><a href="{{ region.get_absolute_url }}">{{ region }}</a></li>
   {% endfor %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Region</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Region
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Parent</th>
+            <td>
+              {% if object.parent %}
+                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+              {% else %}
+                <span class="text-muted">&mdash;</span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Sites</th>
+            <td>
+              <a href="{% url 'dcim:site_list' %}?region_id={{ object.pk }}">{{ sites_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Parent</td>
-          <td>
-            {% if object.parent %}
-              <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-            {% else %}
-              <span class="text-muted">&mdash;</span>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>Sites</td>
-          <td>
-            <a href="{% url 'dcim:site_list' %}?region_id={{ object.pk }}">{{ sites_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% include 'inc/custom_fields_panel.html' %}
     {% plugin_left_page object %}
   </div>
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Child Regions</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Child Regions
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=child_regions_table %}
       </div>
-      {% include 'inc/table.html' with table=child_regions_table %}
       {% if perms.dcim.add_region %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:region_add' %}?parent={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add region
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:region_add' %}?parent={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Region
           </a>
         </div>
       {% endif %}
@@ -66,15 +70,17 @@
 </div>
 <div class="row">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Sites</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Sites
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=sites_table %}
       </div>
-      {% include 'inc/table.html' with table=sites_table %}
       {% if perms.dcim.add_site %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:site_add' %}?region={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add site
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:site_add' %}?region={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Site
           </a>
         </div>
       {% endif %}

netbox/templates/dcim/sitegroup.html

@@ -3,60 +3,64 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:sitegroup_list' %}">Site Groups</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:sitegroup_list' %}">Site Groups</a></li>
   {% for sitegroup in object.get_ancestors %}
-    <li><a href="{{ sitegroup.get_absolute_url }}">{{ sitegroup }}</a></li>
+    <li class="breadcrumb-item"><a href="{{ sitegroup.get_absolute_url }}">{{ sitegroup }}</a></li>
   {% endfor %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Site Group</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Site Group
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Parent</th>
+            <td>
+              {% if object.parent %}
+                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+              {% else %}
+                <span class="text-muted">&mdash;</span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Sites</th>
+            <td>
+              <a href="{% url 'dcim:site_list' %}?group_id={{ object.pk }}">{{ sites_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Parent</td>
-          <td>
-            {% if object.parent %}
-              <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-            {% else %}
-              <span class="text-muted">&mdash;</span>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>Sites</td>
-          <td>
-            <a href="{% url 'dcim:site_list' %}?group_id={{ object.pk }}">{{ sites_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% include 'inc/custom_fields_panel.html' %}
     {% plugin_left_page object %}
   </div>
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Child Groups</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Child Groups
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=child_groups_table %}
       </div>
-      {% include 'inc/table.html' with table=child_groups_table %}
       {% if perms.dcim.add_sitegroup %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:sitegroup_add' %}?parent={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add site group
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:sitegroup_add' %}?parent={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Site Group
           </a>
         </div>
       {% endif %}
@@ -64,17 +68,19 @@
     {% plugin_right_page object %}
 	</div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Sites</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Sites
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=sites_table %}
       </div>
-      {% include 'inc/table.html' with table=sites_table %}
       {% if perms.dcim.add_site %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'dcim:site_add' %}?group={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add site
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'dcim:site_add' %}?group={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Site
           </a>
         </div>
       {% endif %}

netbox/templates/dcim/virtualchassis_add.html

@@ -2,17 +2,17 @@
 {% load form_helpers %}
 
 {% block form %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Virtual Chassis</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <h5 class="card-header">Virtual Chassis</h5>
+        <div class="card-body">
             {% render_field form.name %}
             {% render_field form.domain %}
             {% render_field form.tags %}
         </div>
     </div>
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Member Devices</strong></div>
-        <div class="panel-body">
+    <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 %}
@@ -22,9 +22,9 @@
         </div>
     </div>
     {% if form.custom_fields %}
-        <div class="panel panel-default">
-            <div class="panel-heading"><strong>Custom Fields</strong></div>
-            <div class="panel-body">
+        <div class="card">
+            <h5 class="card-header">Custom Fields</h5>
+            <div class="card-body">
                 {% render_custom_fields form %}
             </div>
         </div>

netbox/templates/dcim/virtualchassis_edit.html

@@ -1,26 +1,19 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 {% load form_helpers %}
 
+{% block title %}{% if vc_form.instance %}Editing {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
+
 {% block content %}
     <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
         {% csrf_token %}
         {{ pk_form.pk }}
         {{ formset.management_form }}
         <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <h3>{% block title %}{% if vc_form.instance %}Editing {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}</h3>
-                {% if vc_form.non_field_errors %}
-                    <div class="panel panel-danger">
-                        <div class="panel-heading"><strong>Errors</strong></div>
-                        <div class="panel-body">
-                            {{ vc_form.non_field_errors }}
-                        </div>
-                    </div>
-                {% endif %}
-                <div class="panel panel-default">
-                    <div class="panel-heading"><strong>Virtual Chassis</strong></div>
-                    <div class="table panel-body">
+            <div class="col-md-8">
+                <div class="card">
+                    <h5 class="card-header">Virtual Chassis</h5>
+                    <div class="card-body">
                         {% render_field vc_form.name %}
                         {% render_field vc_form.domain %}
                         {% render_field vc_form.master %}
@@ -28,81 +21,83 @@
                     </div>
                 </div>
                 {% if vc_form.custom_fields %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading"><strong>Custom Fields</strong></div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h5 class="card-header">Custom Fields</h5>
+                        <div class="card-body">
                             {% render_custom_fields vc_form %}
                         </div>
                     </div>
                 {% endif %}
-                <div class="panel panel-default">
-                    <div class="panel-heading"><strong>Members</strong></div>
-                    <table class="table panel-body">
-                        <thead>
-                            <tr>
-                                <th>Device</th>
-                                <th>ID</th>
-                                <th>Rack/Unit</th>
-                                <th>Serial</th>
-                                <th>Position</th>
-                                <th>Priority</th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for form in formset %}
-                                {% for field in form.hidden_fields %}
-                                    {{ field }}
+                <div class="card">
+                    <h5 class="card-header">Members</h5>
+                    <div class="card-body">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Device</th>
+                                    <th>ID</th>
+                                    <th>Rack/Unit</th>
+                                    <th>Serial</th>
+                                    <th>Position</th>
+                                    <th>Priority</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for form in formset %}
+                                    {% for field in form.hidden_fields %}
+                                        {{ field }}
+                                    {% endfor %}
+                                    {% with device=form.instance virtual_chassis=vc_form.instance %}
+                                        <tr>
+                                            <td>
+                                                <a href="{{ device.get_absolute_url }}">{{ device }}</a>
+                                            </td>
+                                            <td>{{ device.pk }}</td>
+                                            <td>
+                                                {% if device.rack %}
+                                                    {{ device.rack }} / {{ device.position }}
+                                                {% else %}
+                                                    <span class="text-muted">&mdash;</span>
+                                                {% endif %}
+                                            </td>
+                                            <td>{{ device.serial|placeholder }}</td>
+                                            <td>
+                                                {{ form.vc_position }}
+                                                {% if form.vc_position.errors %}
+                                                    <br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
+                                                {% endif %}
+                                            </td>
+                                            <td>
+                                                {{ form.vc_priority }}
+                                                {% if form.vc_priority.errors %}
+                                                    <br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
+                                                {% endif %}
+                                            </td>
+                                            <td>
+                                                {% if virtual_chassis.pk %}
+                                                    <a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
+                                                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
+                                                    </a>
+                                                {% endif %}
+                                            </td>
+                                        </tr>
+                                    {% endwith %}
                                 {% endfor %}
-                                {% with device=form.instance virtual_chassis=vc_form.instance %}
-                                    <tr>
-                                        <td>
-                                            <a href="{{ device.get_absolute_url }}">{{ device }}</a>
-                                        </td>
-                                        <td>{{ device.pk }}</td>
-                                        <td>
-                                            {% if device.rack %}
-                                                {{ device.rack }} / {{ device.position }}
-                                            {% else %}
-                                                <span class="text-muted">&mdash;</span>
-                                            {% endif %}
-                                        </td>
-                                        <td>{{ device.serial|placeholder }}</td>
-                                        <td>
-                                            {{ form.vc_position }}
-                                            {% if form.vc_position.errors %}
-                                                <br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
-                                            {% endif %}
-                                        </td>
-                                        <td>
-                                            {{ form.vc_priority }}
-                                            {% if form.vc_priority.errors %}
-                                                <br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
-                                            {% endif %}
-                                        </td>
-                                        <td>
-                                            {% if virtual_chassis.pk %}
-                                                <a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-xs{% if virtual_chassis.master == device %} disabled{% endif %}">
-                                                    <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
-                                                </a>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                {% endwith %}
-                            {% endfor %}
-                        </tbody>
-                    </table>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2 text-right">
+        <div class="row my-3">
+            <div class="col-md-8 col-md-offset-2 text-end">
+                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
                 {% if vc_form.instance.pk %}
                     <button type="submit" name="_update" class="btn btn-primary">Update</button>
                 {% else %}
                     <button type="submit" name="_create" class="btn btn-primary">Create</button>
                 {% endif %}
-                <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
             </div>
         </div>
     </form>

netbox/templates/ipam/ipaddress_assign.html

@@ -3,43 +3,36 @@
 {% load form_helpers %}
 {% load helpers %}
 
+{% block title %}Assign an IP Address{% endblock %}
+
 {% block content %}
     <form action="{% querystring request %}" method="post" class="form form-horizontal">
         {% csrf_token %}
         {% for field in form.hidden_fields %}
             {{ field }}
         {% endfor %}
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3">
-                <h3>Assign an IP Address</h3>
+        <div class="row mb-3">
+            <div class="col-md-6">
                 {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='assign' %}
-                {% 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 class="card">
+                    <h5 class="card-header">Select IP Address</h5>
+                    <div class="card-body">
+                        {% render_field form.vrf_id %}
+                        {% render_field form.q %}
                     </div>
-                {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>Select IP Address</strong></div>
-                <div class="panel-body">
-                    {% render_field form.vrf_id %}
-                    {% render_field form.q %}
                 </div>
             </div>
-            </div>
         </div>
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3 text-right">
+        <div class="row mb-3">
+            <div class="col-md-6 text-end">
+                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
                 <button type="submit" class="btn btn-primary">Search</button>
-                <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
             </div>
         </div>
     </form>
     {% if table %}
-        <div class="row">
-            <div class="col-md-12" style="margin-top: 20px">
+        <div class="row mb-3">
+            <div class="col-md-12">
                 <h3>Search Results</h3>
                 {% include 'utilities/obj_table.html' with table_template='panel_table.html' %}
             </div>

netbox/templates/search.html

@@ -8,33 +8,35 @@
     {% if request.GET.q %}
         {% if results %}
             <div class="row">
-                <div class="col-md-10">
+                <div class="col-md-9">
                     {% for obj_type in results %}
                         <h3 id="{{ obj_type.name|lower }}">{{ obj_type.name|bettertitle }}</h3>
                         {% include 'panel_table.html' with table=obj_type.table %}
-                        <a href="{{ obj_type.url }}" class="btn btn-primary pull-right">
+                        <a href="{{ obj_type.url }}" class="btn btn-primary float-end my-3">
                             <span class="mdi mdi-arrow-right-bold" aria-hidden="true"></span>
                             {% if obj_type.table.page.has_next %}
-                                See all {{ obj_type.table.page.paginator.count }} results
+                                See All {{ obj_type.table.page.paginator.count }} Results
                             {% else %}
-                                Refine search
+                                Refine Search
                             {% endif %}
                         </a>
-                    <div class="clearfix"></div>
                     {% endfor %}
                 </div>
-                <div class="col-md-2" style="padding-top: 20px;">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <strong>Search Results</strong>
-                        </div>
-                        <div class="list-group">
-                            {% for obj_type in results %}
-                                <a href="#{{ obj_type.name|lower }}" class="list-group-item">
-                                    {{ obj_type.name|bettertitle }}
-                                    <span class="badge">{{ obj_type.table.page.paginator.count }}</span>
-                                </a>
-                            {% endfor %}
+                <div class="col-md-3">
+                    <h3 class="invisible">&nbsp;</h3>
+                    <div class="card">
+                        <h5 class="card-header">
+                            Search Results
+                        </h5>
+                        <div class="card-body">
+                            <div class="list-group list-group-flush">
+                                {% for obj_type in results %}
+                                    <a href="#{{ obj_type.name|lower }}" class="list-group-item">
+                                        {{ obj_type.name|bettertitle }}
+                                        <span class="badge bg-primary">{{ obj_type.table.page.paginator.count }}</span>
+                                    </a>
+                                {% endfor %}
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -43,17 +45,17 @@
             <h3 class="text-muted text-center">No results found</h3>
         {% endif %}
     {% else %}
-        <div class="row" style="margin-top: 150px;">
+        <div class="row">
             <div class="col-sm-4 col-sm-offset-4">
                 <form action="{% url 'search' %}" method="get" class="form form-horizontal">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <strong>Search</strong>
-                        </div>
-                        <div class="panel-body">
+                    <div class="card">
+                        <h5 class="card-header">
+                            Search
+                        </h5>
+                        <div class="card-body">
                             {% render_form form %}
                         </div>
-                        <div class="panel-footer text-right">
+                        <div class="card-footer text-end">
                             <button type="submit" class="btn btn-primary">
                                 <span class="mdi mdi-magnify" aria-hidden="true"></span> Search
                             </button>

netbox/templates/tenancy/tenantgroup.html

@@ -3,46 +3,48 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'tenancy:tenantgroup_list' %}">Tenant Groups</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'tenancy:tenantgroup_list' %}">Tenant Groups</a></li>
   {% for tenantgroup in object.get_ancestors %}
-    <li><a href="{{ tenantgroup.get_absolute_url }}">{{ tenantgroup }}</a></li>
+    <li class="breadcrumb-item"><a href="{{ tenantgroup.get_absolute_url }}">{{ tenantgroup }}</a></li>
   {% endfor %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Tenant Group</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Tenant Group
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Parent</th>
+            <td>
+              {% if object.parent %}
+                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+              {% else %}
+                <span class="text-muted">&mdash;</span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">Sites</th>
+            <td>
+              <a href="{% url 'tenancy:tenant_list' %}?group_id={{ object.pk }}">{{ tenants_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Parent</td>
-          <td>
-            {% if object.parent %}
-              <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-            {% else %}
-              <span class="text-muted">&mdash;</span>
-            {% endif %}
-          </td>
-        </tr>
-        <tr>
-          <td>Sites</td>
-          <td>
-            <a href="{% url 'tenancy:tenant_list' %}?group_id={{ object.pk }}">{{ tenants_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
   </div>
@@ -51,17 +53,19 @@
     {% plugin_right_page object %}
 	</div>
 </div>
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Tenants</strong>
+    <div class="card">
+      <div class="card-header">
+        Tenants
+      </div>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=tenants_table %}
       </div>
-      {% include 'inc/table.html' with table=tenants_table %}
       {% if perms.tenancy.add_tenant %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'tenancy:tenant_add' %}?group={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add tenant
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'tenancy:tenant_add' %}?group={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Tenant
           </a>
         </div>
       {% endif %}

netbox/templates/virtualization/virtualmachine_component_add.html

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 {% load form_helpers %}
 
@@ -7,31 +7,21 @@
 {% block content %}
 <form action="" method="post" class="form form-horizontal">
     {% csrf_token %}
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3">
-            {% 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">
-                    {% render_form form %}
-                </div>
+    <div class="row mb-3">
+        <div class="col-md-6">
+            <div class="field-group">
+                <h4>{{ component_type|bettertitle }}</h4>
+                {% render_form form %}
+            </div>
+        </div>
+    </div>
+    <div class="row mb-3">
+        <div class="col-md-6">
+            <div class="float-end">
+                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+                <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add More</button>
+                <button type="submit" name="_create" class="btn btn-primary">Create</button>
             </div>
-		    <div class="form-group">
-                <div class="col-md-9 col-md-offset-3">
-                    <button type="submit" name="_create" class="btn btn-primary">Create</button>
-                    <button type="submit" name="_addanother" class="btn btn-primary">Create and Add More</button>
-                    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-                </div>
-		    </div>
         </div>
     </div>
 </form>

netbox/templates/virtualization/vminterface.html

@@ -6,66 +6,68 @@
 {% block title %}{{ object.virtual_machine }} / {{ object.name }}{% endblock %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'virtualization:virtualmachine_list' %}">Virtual Machines</a></li>
-  <li><a href="{{ object.virtual_machine.get_absolute_url }}">{{ object.virtual_machine }}</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'virtualization:virtualmachine_list' %}">Virtual Machines</a></li>
+  <li class="breadcrumb-item"><a href="{{ object.virtual_machine.get_absolute_url }}">{{ object.virtual_machine }}</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Interface</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Interface
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row">Virtual Machine</th>
+                        <td>
+                            <a href="{{ object.virtual_machine.get_absolute_url }}">{{ object.virtual_machine }}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Name</th>
+                        <td>{{ object.name }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Enabled</th>
+                        <td>
+                            {% if object.enabled %}
+                                <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
+                            {% else %}
+                                <span class="text-danger"><i class="mdi mdi-close"></i></span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Parent</th>
+                        <td>
+                            {% if object.parent %}
+                                <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
+                            {% else %}
+                                <span class="text-muted">None</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Description</th>
+                        <td>{{ object.description|placeholder }} </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">MTU</th>
+                        <td>{{ object.mtu|placeholder }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">MAC Address</th>
+                        <td><span class="text-monospace">{{ object.mac_address|placeholder }}</span></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">802.1Q Mode</th>
+                        <td>{{ object.get_mode_display }}</td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Virtual Machine</td>
-                    <td>
-                        <a href="{{ object.virtual_machine.get_absolute_url }}">{{ object.virtual_machine }}</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Name</td>
-                    <td>{{ object.name }}</td>
-                </tr>
-                <tr>
-                    <td>Enabled</td>
-                    <td>
-                        {% if object.enabled %}
-                            <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
-                        {% else %}
-                            <span class="text-danger"><i class="mdi mdi-close"></i></span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Parent</td>
-                    <td>
-                        {% if object.parent %}
-                            <a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
-                        {% else %}
-                            <span class="text-muted">None</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Description</td>
-                    <td>{{ object.description|placeholder }} </td>
-                </tr>
-                <tr>
-                    <td>MTU</td>
-                    <td>{{ object.mtu|placeholder }}</td>
-                </tr>
-                <tr>
-                    <td>MAC Address</td>
-                    <td><span class="text-monospace">{{ object.mac_address|placeholder }}</span></td>
-                </tr>
-                <tr>
-                    <td>802.1Q Mode</td>
-                    <td>{{ object.get_mode_display }}</td>
-                </tr>
-            </table>
         </div>
         {% plugin_left_page object %}
     </div>
@@ -75,20 +77,22 @@
           {% plugin_right_page object %}
     </div>
 </div>
-<div class="row">
+<div class="row mb-3">
     <div class="col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>IP Addresses</strong>
+        <div class="card">
+            <h5 class="card-header">
+                IP Addresses
+            </h5>
+            <div class="card-body">
+                {% if ipaddress_table.rows %}
+                    {% render_table ipaddress_table 'inc/table.html' %}
+                {% else %}
+                    <div class="text-muted">None</div>
+                {% endif %}
             </div>
-            {% if ipaddress_table.rows %}
-                {% render_table ipaddress_table 'inc/table.html' %}
-            {% else %}
-                <div class="panel-body text-muted">None</div>
-            {% endif %}
             {% if perms.ipam.add_ipaddress %}
-                <div class="panel-footer text-right noprint">
-                    <a href="{% url 'ipam:ipaddress_add' %}?virtual_machine={{ object.virtual_machine.pk }}&vminterface={{ object.pk }}" class="btn btn-xs btn-primary">
+                <div class="card-footer text-end noprint">
+                    <a href="{% url 'ipam:ipaddress_add' %}?virtual_machine={{ object.virtual_machine.pk }}&vminterface={{ object.pk }}" class="btn btn-sm btn-primary">
                         <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add IP Address
                     </a>
                 </div>
@@ -96,12 +100,12 @@
         </div>
     </div>
 </div>
-<div class="row">
+<div class="row mb-3">
     <div class="col-md-12">
         {% include 'panel_table.html' with table=vlan_table heading="VLANs" %}
     </div>
 </div>
-<div class="row">
+<div class="row mb-3">
     <div class="col-md-12">
         {% include 'panel_table.html' with table=child_interfaces_table heading="Child Interfaces" %}
     </div>

netbox/templates/virtualization/vminterface_edit.html

@@ -5,14 +5,9 @@
     <div class="field-group">
         <h4>Interface</h4>
         {% if form.instance.virtual_machine %}
-            <div class="form-floating">
-                <input class="form-control" value="{{ form.instance.virtual_machine }}"/>
-                {% comment %} <div class="col-md-9">
-                    <p class="form-control-static">
-                        <a href="{{ form.instance.virtual_machine.get_absolute_url }}">{{ form.instance.virtual_machine }}</a>
-                    </p>
-                </div> {% endcomment %}
-                <label class="col-md-3 control-label required" for="id_device">Virtual Machine</label>
+            <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>
         {% endif %}
         {% render_field form.name %}
@@ -39,12 +34,12 @@
 {% endblock %}
 
 {% block buttons %}
-    {% if obj.pk %}
-        <button type="submit" name="_update" class="btn btn-primary">Update</button>
-        <button type="submit" formaction="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-primary">Update and Continue Editing</button>
-    {% else %}
-        <button type="submit" name="_create" class="btn btn-primary">Create</button>
-        <button type="submit" name="_addanother" class="btn btn-primary">Create and Add Another</button>
-    {% endif %}
-    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-{% endblock %}
+    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+{% if obj.pk %}
+    <button type="submit" formaction="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Update & Continue Editing</button>
+    <button type="submit" name="_update" class="btn btn-primary">Update</button>
+{% else %}
+    <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>
+{% endif %}
+{% endblock %}