bootstrap 5 template updates

netbox/templates/dcim/cable.html

@@ -5,8 +5,8 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:cable_list' %}">Cables</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:cable_list' %}">Cables</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block buttons %}
@@ -28,21 +28,21 @@
                 <div class="card-body">
                     <table class="table table-hover attr-table">
                         <tr>
-                            <td>Type</td>
+                            <th scope="row">Type</th>
                             <td>{{ object.get_type_display|placeholder }}</td>
                         </tr>
                         <tr>
-                            <td>Status</td>
+                            <th scope="row">Status</th>
                             <td>
                                 <span class="badge bg-{{ object.get_status_class }}">{{ object.get_status_display }}</span>
                             </td>
                         </tr>
                         <tr>
-                            <td>Label</td>
+                            <th scope="row">Label</th>
                             <td>{{ object.label|placeholder }}</td>
                         </tr>
                         <tr>
-                            <td>Color</td>
+                            <th scope="row">Color</th>
                             <td>
                                 {% if object.color %}
                                     <span class="color-label" style="background-color: #{{ object.color }}">&nbsp;</span>
@@ -52,7 +52,7 @@
                             </td>
                         </tr>
                         <tr>
-                            <td>Length</td>
+                            <th scope="row">Length</th>
                             <td>
                                 {% if object.length %}
                                     {{ object.length }} {{ object.get_length_unit_display }}
@@ -73,13 +73,17 @@
                 <h5 class="card-header">
                     Termination A
                 </h5>
+                <div class="card-body">
                 {% include 'dcim/inc/cable_termination.html' with termination=object.termination_a %}
+                </div>
             </div>
             <div class="card">
                 <h5 class="card-header">
                     Termination B
                 </h5>
+                <div class="card-body">
                 {% include 'dcim/inc/cable_termination.html' with termination=object.termination_b %}
+                </div>
             </div>
             {% plugin_right_page object %}
         </div>

netbox/templates/dcim/connections_list.html

@@ -1,11 +1,12 @@
 {% extends 'base.html' %}
 {% load buttons %}
 
+{% block title %}{{ title }}{% endblock %}
+
 {% block content %}
-<div class="pull-right noprint">
+<div class="float-end noprint">
     {% export_button content_type %}
 </div>
-<h1>{% block title %}{{ title }}{% endblock %}</h1>
 <div class="row">
 	  <div class="col-md-12">
         <div class="col-md-3 pull-right right-side-panel noprint">

netbox/templates/dcim/consoleport.html

@@ -5,52 +5,53 @@
 {% block content %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Console Port</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Console 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>
+                            <th scope="row">{{ object.name }}</th>
+                        </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">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>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>
-                {% 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>
-                {% elif object.cable %}
-                    <table class="table table-hover panel-body attr-table">
+            <div class="card">
+                <h5 class="card-header">
+                    Connection
+                </h5>
+                <div class="card-body">
+                    {% if object.mark_connected %}
+                    <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+                    {% elif object.cable %}
+                    <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:consoleport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
@@ -60,27 +61,27 @@
                         </tr>
                         {% if object.connected_endpoint %}
                             <tr>
-                                <td>Device</td>
+                                <th scope="row">Device</th>
                                 <td>
                                     <a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a>
                                 </td>
                             </tr>
                             <tr>
-                                <td>Name</td>
+                                <th scope="row">Name</th>
                                 <td>
                                     <a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a>
                                 </td>
                             </tr>
                             <tr>
-                                <td>Type</td>
+                                <th scope="row">Type</th>
                                 <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
                             </tr>
                             <tr>
-                                <td>Description</td>
+                                <th scope="row">Description</th>
                                 <td>{{ object.connected_endpoint.description|placeholder }}</td>
                             </tr>
                             <tr>
-                                <td>Path Status</td>
+                                <th scope="row">Path Status</th>
                                 <td>
                                     {% if object.path.is_active %}
                                         <span class="label label-success">Reachable</span>
@@ -92,23 +93,45 @@
                         {% endif %}
                     </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">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" 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:consoleport_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:consoleport_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:consoleport_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:consoleport_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:consoleport_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:consoleport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}"
+                                        >
+                                            Rear Port
+                                        </a>
+                                    </li>
                                 </ul>
-                            </span>
+                            </div>
                         {% endif %}
                     </div>
                 {% endif %}
             </div>
+            </div>
             {% plugin_right_page object %}
         </div>
     </div>

netbox/templates/dcim/consoleserverport.html

@@ -5,52 +5,53 @@
 {% block content %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Console Server Port</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Console Server 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">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>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>
-                {% 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>
-                {% elif object.cable %}
-                    <table class="table table-hover panel-body attr-table">
+            <div class="card">
+                <h5 class="card-header">
+                    Connection
+                </h5>
+                <div class="card-body">
+                    {% if object.mark_connected %}
+                    <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+                    {% elif object.cable %}
+                    <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:consoleserverport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
@@ -60,54 +61,76 @@
                         </tr>
                         {% if object.connected_endpoint %}
                             <tr>
-                                <td>Device</td>
+                                <th scope="row">Device</th>
                                 <td>
                                     <a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a>
                                 </td>
                             </tr>
                             <tr>
-                                <td>Name</td>
+                                <th scope="row">Name</th>
                                 <td>
                                     <a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a>
                                 </td>
                             </tr>
                             <tr>
-                                <td>Type</td>
+                                <th scope="row">Type</th>
                                 <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
                             </tr>
                             <tr>
-                                <td>Description</td>
+                                <th scope="row">Description</th>
                                 <td>{{ object.connected_endpoint.description|placeholder }}</td>
                             </tr>
                             <tr>
-                                <td>Path Status</td>
+                                <th scope="row">Path Status</th>
                                 <td>
                                     {% if object.path.is_active %}
-                                        <span class="label label-success">Reachable</span>
+                                        <span class="badge bg-success">Reachable</span>
                                     {% else %}
-                                        <span class="label label-danger">Not Reachable</span>
+                                        <span class="badge bg-danger">Not Reachable</span>
                                     {% endif %}
                                 </td>
                             </tr>
                         {% endif %}
                     </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-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:consoleserverport_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:consoleserverport_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:consoleserverport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a></li>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a
+                                            class="dropdown-item"
+                                            href="{% url 'dcim:consoleserverport_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:consoleserverport_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:consoleserverport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}"
+                                        >
+                                            Rear Port
+                                        </a>
+                                    </li>
                                 </ul>
-                            </span>
+                            </div>
                         {% endif %}
                     </div>
                 {% endif %}
+                </div>
             </div>
             {% plugin_right_page object %}
         </div>

netbox/templates/dcim/device/base.html

@@ -15,142 +15,270 @@
   <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
-{% block buttons %}
-  {% if perms.dcim.change_device %}
-    <div class="btn-group">
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Components <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu">
-        {% if perms.dcim.add_consoleport %}
-          <li><a href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}">Console Ports</a></li>
-        {% endif %}
-        {% if perms.dcim.add_consoleserverport %}
-          <li><a href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">Console Server Ports</a></li>
-        {% endif %}
-        {% if perms.dcim.add_powerport %}
-          <li><a href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">Power Ports</a></li>
-        {% endif %}
-        {% if perms.dcim.add_poweroutlet %}
-          <li><a href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">Power Outlets</a></li>
-        {% endif %}
-        {% if perms.dcim.add_interface %}
-          <li><a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">Interfaces</a></li>
-        {% endif %}
-        {% if perms.dcim.add_frontport %}
-          <li><a href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">Front Ports</a></li>
-        {% endif %}
-        {% if perms.dcim.add_rearport %}
-          <li><a href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">Rear Ports</a></li>
-        {% endif %}
-        {% if perms.dcim.add_devicebay %}
-          <li><a href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">Device Bays</a></li>
-        {% endif %}
-        {% if perms.dcim.add_inventoryitem %}
-          <li><a href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">Inventory Items</a></li>
-        {% endif %}
-      </ul>
-    </div>
-  {% endif %}
-  {% if perms.dcim.add_device %}
-      {% clone_button object %}
-  {% endif %}
-  {% if perms.dcim.change_device %}
-      {% edit_button object %}
-  {% endif %}
-  {% if perms.dcim.delete_device %}
-      {% delete_button object %}
-  {% endif %}
+{% block extra_controls %}
+{% if perms.dcim.change_device %}
+<div class="dropdown m-1">
+    <button id="add-device-components" type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+        <i class="bi bi-plus" aria-hidden="true"></i> Add Components
+    </button>
+    <ul class="dropdown-menu" aria-labeled-by="add-device-components">
+    {% if perms.dcim.add_consoleport %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}"
+            >
+                Console Ports
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_consoleserverport %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">
+                Console Server Ports
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_powerport %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">
+                Power Ports
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_poweroutlet %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">
+                Power Outlets
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_interface %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">
+                Interfaces
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_frontport %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">
+                Front Ports
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_rearport %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">
+                Rear Ports
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_devicebay %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">
+                Device Bays
+            </a>
+        </li>
+    {% endif %}
+    {% if perms.dcim.add_inventoryitem %}
+        <li>
+            <a
+                class="dropdown-item"
+                href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">
+                Inventory Items
+            </a>
+        </li>
+    {% endif %}
+    </ul>
+</div>
+{% endif %}
 {% endblock %}
 
-{% block tabs %}
-    <ul class="nav nav-tabs">
-        <li role="presentation" {% if active_tab == 'device' %} class="active"{% endif %}>
-            <a href="{% url 'dcim:device' pk=object.pk %}">Device</a>
-        </li>
-        {% with interface_count=object.vc_interfaces.count %}
-            {% if interface_count %}
-                <li role="presentation" {% if active_tab == 'interfaces' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_interfaces' pk=object.pk %}">Interfaces {% badge interface_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with frontport_count=object.frontports.count %}
-            {% if frontport_count %}
-                <li role="presentation" {% if active_tab == 'front-ports' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_frontports' pk=object.pk %}">Front Ports {% badge frontport_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with rearport_count=object.rearports.count %}
-            {% if rearport_count %}
-                <li role="presentation" {% if active_tab == 'rear-ports' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_rearports' pk=object.pk %}">Rear Ports {% badge rearport_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with consoleport_count=object.consoleports.count %}
-            {% if consoleport_count %}
-                <li role="presentation" {% if active_tab == 'console-ports' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_consoleports' pk=object.pk %}">Console Ports {% badge consoleport_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with consoleserverport_count=object.consoleserverports.count %}
-            {% if consoleserverport_count %}
-                <li role="presentation" {% if active_tab == 'console-server-ports' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_consoleserverports' pk=object.pk %}">Console Server Ports {% badge consoleserverport_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with powerport_count=object.powerports.count %}
-            {% if powerport_count %}
-                <li role="presentation" {% if active_tab == 'power-ports' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_powerports' pk=object.pk %}">Power Ports {% badge powerport_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with poweroutlet_count=object.poweroutlets.count %}
-            {% if poweroutlet_count %}
-                <li role="presentation" {% if active_tab == 'power-outlets' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_poweroutlets' pk=object.pk %}">Power Outlets {% badge poweroutlet_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with devicebay_count=object.devicebays.count %}
-            {% if devicebay_count %}
-                <li role="presentation" {% if active_tab == 'device-bays' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_devicebays' pk=object.pk %}">Device Bays {% badge devicebay_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% with inventoryitem_count=object.inventoryitems.count %}
-            {% if inventoryitem_count %}
-                <li role="presentation" {% if active_tab == 'inventory' %} class="active"{% endif %}>
-                    <a href="{% url 'dcim:device_inventory' pk=object.pk %}">Inventory {% badge inventoryitem_count %}</a>
-                </li>
-            {% endif %}
-        {% endwith %}
-        {% if perms.dcim.napalm_read_device %}
-            {% if object.status != 'active' %}
-                {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='Device must be in active status' %}
-            {% elif not object.platform %}
-                {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No platform assigned to this device' %}
-            {% elif not object.platform.napalm_driver %}
-                {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No NAPALM driver assigned for this platform' %}
-            {% else %}
-                {% include 'dcim/inc/device_napalm_tabs.html' %}
-            {% endif %}
-        {% endif %}
-        {% if perms.extras.view_configcontext %}
-            <li role="presentation"{% if active_tab == 'config-context' %} class="active"{% endif %}>
-                <a href="{% url 'dcim:device_configcontext' pk=object.pk %}">Config Context</a>
-            </li>
-        {% endif %}
-        {% if perms.extras.view_objectchange %}
-            <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
-                <a href="{% url 'dcim:device_changelog' pk=object.pk %}">Change Log</a>
-            </li>
-        {% endif %}
-    </ul>
+{% block tab_items %}
+<li 
+    role="presentation"
+    class="nav-item">
+    <a
+        href="{% url 'dcim:device' pk=object.pk %}"
+        class="nav-link{% if active_tab == 'device' %} active{% endif %}"
+    >
+        Device
+    </a>
+</li>
+{% with interface_count=object.vc_interfaces.count %}
+    {% if interface_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_interfaces' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'interfaces' %} active{% endif %}"
+            >
+                Interfaces {% badge interface_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with frontport_count=object.frontports.count %}
+    {% if frontport_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_frontports' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'front-ports' %} active{% endif %}"
+            >
+                Front Ports {% badge frontport_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with rearport_count=object.rearports.count %}
+    {% if rearport_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_rearports' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'rear-ports' %} active{% endif %}"
+            >
+                Rear Ports {% badge rearport_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with consoleport_count=object.consoleports.count %}
+    {% if consoleport_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_consoleports' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'console-ports' %} active{% endif %}"
+            >
+                Console Ports {% badge consoleport_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with consoleserverport_count=object.consoleserverports.count %}
+    {% if consoleserverport_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_consoleserverports' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'console-server-ports' %} active{% endif %}"
+            >
+                Console Server Ports {% badge consoleserverport_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with powerport_count=object.powerports.count %}
+    {% if powerport_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_powerports' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'power-ports' %} active{% endif %}"
+            >
+                Power Ports {% badge powerport_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with poweroutlet_count=object.poweroutlets.count %}
+    {% if poweroutlet_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_poweroutlets' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'power-outlets' %} active{% endif %}"
+            >
+                Power Outlets {% badge poweroutlet_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with devicebay_count=object.devicebays.count %}
+    {% if devicebay_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_devicebays' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'device-bays' %} active{% endif %}"
+            >
+                Device Bays {% badge devicebay_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% with inventoryitem_count=object.inventoryitems.count %}
+    {% if inventoryitem_count %}
+        <li 
+            role="presentation"
+            class="nav-item">
+            <a
+                href="{% url 'dcim:device_inventory' pk=object.pk %}"
+                class="nav-link{% if active_tab == 'inventory' %} active{% endif %}"
+            >
+                Inventory {% badge inventoryitem_count %}
+            </a>
+        </li>
+    {% endif %}
+{% endwith %}
+{% if perms.dcim.napalm_read_device %}
+    {% if object.status != 'active' %}
+        {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='Device must be in active status' %}
+    {% elif not object.platform %}
+        {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No platform assigned to this device' %}
+    {% elif not object.platform.napalm_driver %}
+        {% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No NAPALM driver assigned for this platform' %}
+    {% else %}
+        {% include 'dcim/inc/device_napalm_tabs.html' %}
+    {% endif %}
+{% endif %}
+{% if perms.extras.view_configcontext %}
+    <li 
+        role="presentation"
+        class="nav-item">
+        <a
+            href="{% url 'dcim:device_configcontext' pk=object.pk %}"
+            class="nav-link{% if active_tab == 'config-context' %} active{% endif %}"
+        >
+            Config Context
+        </a>
+    </li>
+{% endif %}
+{% if perms.extras.view_objectchange %}
+    <li 
+        role="presentation"
+        class="nav-item">
+        <a
+            href="{% url 'dcim:device_changelog' pk=object.pk %}"
+            class="nav-link{% if active_tab == 'changelog' %} active{% endif %}"
+        >
+            Change Log
+        </a>
+    </li>
+{% endif %}
 {% endblock %}

netbox/templates/dcim/device/config.html

@@ -7,9 +7,9 @@
     {% include 'inc/ajax_loader.html' %}
     <div class="row">
         <div class="col-md-10 col-md-offset-1">
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>Device Configuration</strong></div>
-                <div class="panel-body">
+            <div class="card">
+                <h5 class="card-header">Device Configuration</h5>
+                <div class="card-body">
                     <ul class="nav nav-tabs" role="tablist">
                         <li role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">Running</a></li>
                         <li role="presentation"><a href="#startup" aria-controls="startup" role="tab" data-toggle="tab">Startup</a></li>

netbox/templates/dcim/device_component.html

@@ -6,10 +6,10 @@
 {% block title %}{{ object.device }} / {{ object }}{% endblock %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:device_list' %}">Devices</a></li>
-  <li><a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:device_list' %}">Devices</a></li>
+  <li class="breadcrumb-item"><a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a></li>
   {% if breadcrumb_url %}
-    <li><a href="{% url breadcrumb_url pk=object.device.pk %}">{{ object|meta:"verbose_name_plural"|bettertitle }}</a></li>
+    <li class="breadcrumb-item"><a href="{% url breadcrumb_url pk=object.device.pk %}">{{ object|meta:"verbose_name_plural"|bettertitle }}</a></li>
   {% endif %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}

netbox/templates/dcim/device_component_add.html

@@ -4,33 +4,29 @@
 {% block title %}Create {{ component_type }}{% endblock %}
 
 {% block content %}
-<form action="" method="post" class="form form-horizontal">
+<form action="" method="post">
     {% 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">
+                <div class="card bg-danger">
+                    <h5 class="card-header">Errors</h5>
+                    <div class="card-body">
                         {{ form.non_field_errors }}
                     </div>
                 </div>
             {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>{{ component_type|title }}</strong>
-                </div>
-                <div class="panel-body">
+            <div class="card">
+                <h5 class="card-header">{{ component_type|title }}</h5>
+                <div class="card-body">
                     {% render_form form %}
                 </div>
             </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 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>
 </form>

netbox/templates/dcim/inc/device_napalm_tabs.html

@@ -1,15 +1,15 @@
 {% if not disabled_message %}
-    <li role="presentation"{% if active_tab == 'status' %} class="active"{% endif %}>
-        <a href="{% url 'dcim:device_status' pk=object.pk %}">Status</a>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'status' %} active{% endif %}" href="{% url 'dcim:device_status' pk=object.pk %}">Status</a>
     </li>
-    <li role="presentation"{% if active_tab == 'lldp-neighbors' %} class="active"{% endif %}>
-        <a href="{% url 'dcim:device_lldp_neighbors' pk=object.pk %}">LLDP Neighbors</a>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'lldp-neighbors' %} active{% endif %}" href="{% url 'dcim:device_lldp_neighbors' pk=object.pk %}">LLDP Neighbors</a>
     </li>
-    <li role="presentation"{% if active_tab == 'config' %} class="active"{% endif %}>
-        <a href="{% url 'dcim:device_config' pk=object.pk %}">Configuration</a>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'config' %} active{% endif %}" href="{% url 'dcim:device_config' pk=object.pk %}">Configuration</a>
     </li>
 {% else %}
-    <li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">Status</a></li>
-    <li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">LLDP Neighbors</a></li>
-    <li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">Configuration</a></li>
+    <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">Status</a></li>
+    <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">LLDP Neighbors</a></li>
+    <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">Configuration</a></li>
 {% endif %}

netbox/templates/generic/object.html

@@ -35,21 +35,23 @@
 </div>
 {% endblock %}
 
-{% block content %}
 {% block tabs %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs mb-3">
+  {% block tab_items %}
   <li role="presentation"{% if not active_tab %} class="active"{% endif %}>
     <a href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
   </li>
   {% if perms.extras.view_objectchange %}
-    <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
-      {# TODO: Fix changelog URL resolution hack #}
-      <a href="{{ object.get_absolute_url }}changelog/">Change Log</a>
-    </li>
+  <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
+    {# TODO: Fix changelog URL resolution hack #}
+    <a href="{{ object.get_absolute_url }}changelog/">Change Log</a>
+  </li>
   {% endif %}
+  {% endblock %}
 </ul>
 {% endblock %}
-{% endblock %}
+
+{% block content %}{% endblock %}
 
 {% block header %}
   <div class="row noprint">

netbox/templates/ipam/ipaddress.html

@@ -3,7 +3,6 @@
 {% load plugins %}
 {% load render_table from django_tables2 %}
 
-{% block header %}
 {% block breadcrumbs %}
   <li class="breadcrumb-item"><a href="{% url 'ipam:ipaddress_list' %}">IP Addresses</a></li>
   {% if object.vrf %}
@@ -11,7 +10,6 @@
   {% endif %}
   <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
-{% endblock %}
 
 {% block content %}
 <div class="row">

netbox/templates/ipam/ipaddress_bulk_add.html

@@ -4,35 +4,26 @@
 
 {% block title %}Bulk Add IP Addresses{% endblock %}
 
-{% block tabs %}
-    {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
-{% endblock %}
-
 {% block form %}
-    <div class="card">
-        <h5 class="card-header">IP Addresses</h5>
-        <div class="card-body">
-            {% render_field form.pattern %}
-            {% render_field model_form.status %}
-            {% render_field model_form.role %}
-            {% render_field model_form.vrf %}
-            {% render_field model_form.description %}
-            {% render_field model_form.tags %}
-        </div>
+{% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
+    <div class="field-group">
+        <h4>IP Addresses</h4>
+        {% render_field form.pattern %}
+        {% render_field model_form.status %}
+        {% render_field model_form.role %}
+        {% render_field model_form.vrf %}
+        {% render_field model_form.description %}
+        {% render_field model_form.tags %}
     </div>
-    <div class="card">
-        <h5 class="card-header">Tenancy</h5>
-        <div class="card-body">
-            {% render_field model_form.tenant_group %}
-            {% render_field model_form.tenant %}
-        </div>
+    <div class="field-group">
+        <h4>Tenancy</h4>
+        {% render_field model_form.tenant_group %}
+        {% render_field model_form.tenant %}
     </div>
     {% if model_form.custom_fields %}
-        <div class="card">
-            <h5 class="card-header">Custom Fields</h5>
-            <div class="card-body">
-                {% render_custom_fields model_form %}
-            </div>
+        <div class="field-group">
+            <h4>Custom Fields</h4>
+            {% render_custom_fields model_form %}
         </div>
     {% endif %}
 {% endblock %}

netbox/templates/ipam/ipaddress_edit.html

@@ -3,13 +3,10 @@
 {% load form_helpers %}
 {% load helpers %}
 
-{% block tabs %}
-    {% if not obj.pk %}
-        {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
-    {% endif %}
-{% endblock %}
-
 {% block form %}
+{% if not obj.pk %}
+    {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
+{% endif %}
     <div class="field-group">
         <h4 class="mb-3">IP Address</h4>
         {% render_field form.address %}

netbox/templates/layout.html

@@ -49,6 +49,7 @@
           {% block controls %}{% endblock %}
         </div>
         <div id="content" class="container-fluid p-0 m-0">
+          {% block tabs %}{% endblock %}
           {% block content %}{% endblock %}
         </div>
       </div>