diff --git a/netbox/templates/dcim/devicebay.html b/netbox/templates/dcim/devicebay.html
index 13b019812..f0e389c54 100644
--- a/netbox/templates/dcim/devicebay.html
+++ b/netbox/templates/dcim/devicebay.html
@@ -5,60 +5,64 @@
 {% block content %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Device Bay</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Device Bay
+                </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">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>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 %}
+        {% 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>Installed Device</strong>
-                </div>
+            <div class="card">
+                <h5 class="card-header">
+                    Installed Device
+                </h5>
+                <div class="card-body">
                 {% if object.installed_device %}
                     {% with device=object.installed_device %}
-                        <table class="table table-hover panel-body attr-table">
+                        <table class="table table-hover attr-table">
                             <tr>
-                                <td>Device</td>
+                                <th scope="row">Device</th>
                                 <td>
                                     <a href="{{ device.get_absolute_url }}">{{ device }}</a>
                                 </td>
                             </tr>
                             <tr>
-                                <td>Device Type</td>
+                                <th scope="row">Device Type</th>
                                 <td>{{ device.device_type }}</td>
                             </tr>
                         </table>
                     {% endwith %}
                 {% else %}
-                    <div class="panel-body text-muted">
+                    <div class="text-muted">
                         None
                     </div>
                 {% endif %}
+                </div>
             </div>
             {% plugin_right_page object %}
         </div>
diff --git a/netbox/templates/dcim/devicebay_populate.html b/netbox/templates/dcim/devicebay_populate.html
index d3024c10b..bb04f7999 100644
--- a/netbox/templates/dcim/devicebay_populate.html
+++ b/netbox/templates/dcim/devicebay_populate.html
@@ -1,41 +1,31 @@
 {% extends 'base.html' %}
 {% load form_helpers %}
 
+{% render_errors form %}
+
 {% 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">
-                        {{ form.non_field_errors }}
+            <div class="card">
+                <div class="card-header">{% block title %}Populate {{ device_bay }}{% endblock %}</div>
+                <div class="card-body">
+                    <div class="form-floating mb-3">
+                        <input class="form-control" value="{{ device_bay.device }}" disabled />
+                        <label>Parent Device</label>
                     </div>
-                </div>
-            {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading">{% block title %}Populate {{ device_bay }}{% endblock %}</div>
-                <div class="panel-body">
-                    <div class="form-group">
-                        <label class="col-md-3 control-label required">Parent Device</label>
-                        <div class="col-md-9">
-                            <p class="form-control-static">{{ device_bay.device }}</p>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="col-md-3 control-label required">Bay</label>
-                        <div class="col-md-9">
-                            <p class="form-control-static">{{ device_bay }}</p>
-                        </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" value="{{ device_bay }}" disabled />
+                        <label>Bay</label>
                     </div>
                     {% render_form form %}
                 </div>
             </div>
 		    <div class="form-group">
                 <div class="col-md-9 col-md-offset-3">
+                    <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
                     <button type="submit" name="_update" class="btn btn-primary">Save</button>
-                    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
                 </div>
 		    </div>
         </div>
diff --git a/netbox/templates/dcim/devicetype_component_add.html b/netbox/templates/dcim/devicetype_component_add.html
index a085b8d15..fc5b3b0a8 100644
--- a/netbox/templates/dcim/devicetype_component_add.html
+++ b/netbox/templates/dcim/devicetype_component_add.html
@@ -3,39 +3,26 @@
 
 {% block title %}Add {{ component_type }} to {{ parent }}{% endblock %}
 
+{% render_errors form %}
+
 {% 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">
-                        {{ form.non_field_errors }}
-                    </div>
-                </div>
-            {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>New {{ component_type }}</strong>
-                </div>
-                <div class="panel-body">
-                    <div class="form-group">
-                        <label class="col-md-3 control-label required">Device Type</label>
-                        <div class="col-md-9">
-                            <p class="form-control-static">{{ parent }}</p>
-                        </div>
+            <div class="field-group mb-3">
+                <h4>New {{ component_type }}</h4>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" value="{{ parent }}" disabled />
+                        <label>Device Type</label>
                     </div>
                     {% render_form form %}
                 </div>
             </div>
-		    <div class="form-group">
-                <div class="col-md-9 col-md-offset-3">
-                    <button type="submit" name="_update" class="btn btn-primary">Save</button>
-                    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-                </div>
-		    </div>
+            <div class="col-md-9 col-md-offset-3">
+                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+                <button type="submit" name="_update" class="btn btn-primary">Save</button>
+            </div>
         </div>
     </div>
 </form>