diff --git a/rest_framework/static/rest_framework/docs/js/api.js b/rest_framework/static/rest_framework/docs/js/api.js
index e6120cd8e..d38ba83d8 100644
--- a/rest_framework/static/rest_framework/docs/js/api.js
+++ b/rest_framework/static/rest_framework/docs/js/api.js
@@ -84,8 +84,8 @@ $(function () {
     $('#selected-language').text(language)
 
     var $codeBlocks = $('pre.highlight')
-    $codeBlocks.not('[data-language="' + language + '"]').addClass('hide')
-    $codeBlocks.filter('[data-language="' + language + '"]').removeClass('hide')
+    $codeBlocks.not('[data-language="' + language + '"]').addClass('d-none')
+    $codeBlocks.filter('[data-language="' + language + '"]').removeClass('d-none')
   })
 
   // API Explorer
@@ -169,7 +169,7 @@ $(function () {
 
     function responseCallback (response, responseText) {
       // Display the 'Data'/'Raw' control.
-      $toggleView.removeClass('hide')
+      $toggleView.removeClass('d-none')
 
       // Fill in the "200 OK" display.
       $responseStatusCode.removeClass('label-success').removeClass('label-danger')
@@ -179,7 +179,7 @@ $(function () {
         $responseStatusCode.addClass('label-danger')
       }
       $responseStatusCode.text(response.status)
-      $meta.removeClass('hide')
+      $meta.removeClass('d-none')
 
       // Fill in the Raw HTTP response display.
       var panelText = 'HTTP/1.1 ' + response.status + ' ' + response.statusText + '\n'
@@ -222,25 +222,25 @@ $(function () {
     var client = new coreapi.Client(options)
     client.action(schema, key, params).then(function (data) {
       var response = JSON.stringify(data, null, 2)
-      $requestAwaiting.addClass('hide')
-      $responseRaw.addClass('hide')
-      $responseData.addClass('hide').text('').jsonView(response)
+      $requestAwaiting.addClass('d-none')
+      $responseRaw.addClass('d-none')
+      $responseData.addClass('d-none').text('').jsonView(response)
 
       if (responseDisplay === 'data') {
-        $responseData.removeClass('hide')
+        $responseData.removeClass('d-none')
       } else {
-        $responseRaw.removeClass('hide')
+        $responseRaw.removeClass('d-none')
       }
     }).catch(function (error) {
       var response = JSON.stringify(error.content, null, 2)
-      $requestAwaiting.addClass('hide')
-      $responseRaw.addClass('hide')
-      $responseData.addClass('hide').text('').jsonView(response)
+      $requestAwaiting.addClass('d-none')
+      $responseRaw.addClass('d-none')
+      $responseData.addClass('d-none').text('').jsonView(response)
 
       if (responseDisplay === 'data') {
-        $responseData.removeClass('hide')
+        $responseData.removeClass('d-none')
       } else {
-        $responseRaw.removeClass('hide')
+        $responseRaw.removeClass('d-none')
       }
     })
   })
@@ -256,11 +256,11 @@ $(function () {
     $(this).removeClass('btn-default').addClass('btn-info').siblings().removeClass('btn-info')
 
     if (responseDisplay === 'raw') {
-      $modalResponseRaw.removeClass('hide')
-      $modalResponseData.addClass('hide')
+      $modalResponseRaw.removeClass('d-none')
+      $modalResponseData.addClass('d-none')
     } else {
-      $modalResponseData.removeClass('hide')
-      $modalResponseRaw.addClass('hide')
+      $modalResponseData.removeClass('d-none')
+      $modalResponseRaw.addClass('d-none')
     }
   })
 
@@ -287,7 +287,7 @@ $(function () {
     $selectedAuthentication.text('token')
     $authControl.find("[data-auth]").closest('li').removeClass('active')
     $authControl.find("[data-auth='token']").closest('li').addClass('active')
-    $authTokenModal.modal('hide')
+    $authTokenModal.modal('d-none')
   })
 
   // Authentication: basic
@@ -304,7 +304,7 @@ $(function () {
     $selectedAuthentication.text('basic')
     $authControl.find("[data-auth]").closest('li').removeClass('active')
     $authControl.find("[data-auth='basic']").closest('li').addClass('active')
-    $authBasicModal.modal('hide')
+    $authBasicModal.modal('d-none')
   })
 
   // Authentication: session
@@ -316,6 +316,6 @@ $(function () {
     $selectedAuthentication.text('session')
     $authControl.find("[data-auth]").closest('li').removeClass('active')
     $authControl.find("[data-auth='session']").closest('li').addClass('active')
-    $authSessionModal.modal('hide')
+    $authSessionModal.modal('d-none')
   })
 })
diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html
index 56ddb25b4..cf82dd5b2 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -49,7 +49,7 @@
                 $('#auth-control').children().removeClass('active');
                 $('#auth-control').find("[data-auth='session']").closest('li').addClass('active');
             {% endif %}
-	    $('pre.highlight').filter('[data-language="{{ langs | first }}"]').removeClass('hide');
+	    $('pre.highlight').filter('[data-language="{{ langs | first }}"]').removeClass('d-none');
         </script>
     </body>
 </html>
diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
index 10ed68349..5d72fca5c 100644
--- a/rest_framework/templates/rest_framework/docs/interact.html
+++ b/rest_framework/templates/rest_framework/docs/interact.html
@@ -5,7 +5,7 @@
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <div class="toggle-view hide">
+      <div class="toggle-view d-none">
         <div class="btn-group" role="group">
           <button type="button" data-display-toggle="data" class="btn btn-sm btn-info">Data</button>
           <button type="button" data-display-toggle="raw" class="btn btn-sm">Raw</button>
@@ -34,14 +34,14 @@
         <div class="col-lg-6 response" id="response">
           <div class="request-awaiting">Awaiting request</div>
 
-          <div class="meta hide">
+          <div class="meta d-none">
             <span class="label label-primary request-method"></span>
             <code class="request-url"></code>
             <label class="label label-lg response-status-code pull-right"></label>
           </div>
 
-          <pre class="well response-data hide"></pre>
-          <pre class="well response-raw hide"><div class="response-raw-request"></div><div class="response-raw-response"></div></pre>
+          <pre class="well response-data d-none"></pre>
+          <pre class="well response-raw d-none"><div class="response-raw-request"></div><div class="response-raw-response"></div></pre>
         </div>
       </div>
     </div>
diff --git a/rest_framework/templates/rest_framework/docs/langs/javascript-intro.html b/rest_framework/templates/rest_framework/docs/langs/javascript-intro.html
index a6938fc45..a855e7369 100644
--- a/rest_framework/templates/rest_framework/docs/langs/javascript-intro.html
+++ b/rest_framework/templates/rest_framework/docs/langs/javascript-intro.html
@@ -1,5 +1,5 @@
 {% load rest_framework %}
 {% load static %}
-<pre class="highlight javascript hide" data-language="javascript"><code>{% code html %}<!-- Load the JavaScript client library -->
+<pre class="highlight javascript d-none" data-language="javascript"><code>{% code html %}<!-- Load the JavaScript client library -->
 <script src="{% static 'rest_framework/js/coreapi-0.1.1.js' %}"></script>
 <script src="{% url 'api-docs:schema-js' %}"></script>{% endcode %}</code></pre>
diff --git a/rest_framework/templates/rest_framework/docs/langs/javascript.html b/rest_framework/templates/rest_framework/docs/langs/javascript.html
index 4a51a32fd..19ed9f657 100644
--- a/rest_framework/templates/rest_framework/docs/langs/javascript.html
+++ b/rest_framework/templates/rest_framework/docs/langs/javascript.html
@@ -1,5 +1,5 @@
 {% load rest_framework %}
-<pre class="highlight javascript hide" data-language="javascript"><code>{% code javascript %}var coreapi = window.coreapi  // Loaded by `coreapi.js`
+<pre class="highlight javascript d-none" data-language="javascript"><code>{% code javascript %}var coreapi = window.coreapi  // Loaded by `coreapi.js`
 var schema = window.schema    // Loaded by `schema.js`
 
 // Initialize a client
diff --git a/rest_framework/templates/rest_framework/docs/langs/python-intro.html b/rest_framework/templates/rest_framework/docs/langs/python-intro.html
index c2e0bcb33..5c30d158b 100644
--- a/rest_framework/templates/rest_framework/docs/langs/python-intro.html
+++ b/rest_framework/templates/rest_framework/docs/langs/python-intro.html
@@ -1,3 +1,3 @@
 {% load rest_framework %}
-<pre class="highlight python hide" data-language="python"><code>{% code bash %}# Install the Python client library
+<pre class="highlight python d-none" data-language="python"><code>{% code bash %}# Install the Python client library
 $ pip install coreapi{% endcode %}</code></pre>
diff --git a/rest_framework/templates/rest_framework/docs/langs/python.html b/rest_framework/templates/rest_framework/docs/langs/python.html
index f944daaff..ff51c0f06 100644
--- a/rest_framework/templates/rest_framework/docs/langs/python.html
+++ b/rest_framework/templates/rest_framework/docs/langs/python.html
@@ -1,5 +1,5 @@
 {% load rest_framework %}
-<pre class="highlight python hide" data-language="python"><code>{% code python %}import coreapi
+<pre class="highlight python d-none" data-language="python"><code>{% code python %}import coreapi
 
 # Initialize a client & load the schema document
 client = coreapi.Client()
diff --git a/rest_framework/templates/rest_framework/docs/langs/shell-intro.html b/rest_framework/templates/rest_framework/docs/langs/shell-intro.html
index 2320ddfa9..42ba36cd9 100644
--- a/rest_framework/templates/rest_framework/docs/langs/shell-intro.html
+++ b/rest_framework/templates/rest_framework/docs/langs/shell-intro.html
@@ -1,3 +1,3 @@
 {% load rest_framework %}
-<pre class="highlight shell hide" data-language="shell"><code>{% code bash %}# Install the command line client
+<pre class="highlight shell d-none" data-language="shell"><code>{% code bash %}# Install the command line client
 $ pip install coreapi-cli{% endcode %}</code></pre>
diff --git a/rest_framework/templates/rest_framework/docs/langs/shell.html b/rest_framework/templates/rest_framework/docs/langs/shell.html
index e5f2a0322..bfa2d57e7 100644
--- a/rest_framework/templates/rest_framework/docs/langs/shell.html
+++ b/rest_framework/templates/rest_framework/docs/langs/shell.html
@@ -1,5 +1,5 @@
 {% load rest_framework %}
-<pre class="highlight shell hide" data-language="shell"><code>{% code bash %}# Load the schema document
+<pre class="highlight shell d-none" data-language="shell"><code>{% code bash %}# Load the schema document
 $ coreapi get {{ document.url }}{% if schema_format %} --format {{ schema_format }}{% endif %}
 
 # Interact with the API endpoint