diff --git a/docs_theme/404.html b/docs_theme/404.html
index bbb6b70ff..cbaa0f0c6 100644
--- a/docs_theme/404.html
+++ b/docs_theme/404.html
@@ -4,6 +4,6 @@
 
   <h1 id="404-page-not-found" style="text-align: center">404</h1>
   <p style="text-align: center"><strong>Page not found</strong></p>
-  <p style="text-align: center">Try the <a href="{{ base_url }}">homepage</a>, or <a href="#mkdocs_search_modal" data-toggle="modal">search the documentation</a>.</p>
+  <p style="text-align: center">Try the <a href="{{ base_url }}">homepage</a>, or <a href="#mkdocs_search_modal" data-bs-toggle="modal">search the documentation</a>.</p>
 
 {% endblock %}
diff --git a/docs_theme/main.html b/docs_theme/main.html
index b4e894781..1db3cc1b4 100644
--- a/docs_theme/main.html
+++ b/docs_theme/main.html
@@ -57,7 +57,7 @@
         <!-- Search Modal -->
         <div id="mkdocs_search_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
             <h3 id="myModalLabel">Documentation search</h3>
           </div>
 
@@ -71,7 +71,7 @@
           </div>
 
           <div class="modal-footer">
-            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+            <button class="btn" data-bs-dismiss="modal" aria-hidden="true">Close</button>
           </div>
         </div>
 
diff --git a/docs_theme/nav.html b/docs_theme/nav.html
index d30348756..67b1b689f 100644
--- a/docs_theme/nav.html
+++ b/docs_theme/nav.html
@@ -8,8 +8,8 @@
           <a class="repo-link btn btn-inverse btn-small {% if not page.previous_page %}disabled{% endif %}" rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}"{% endif %}>
             <i class="icon-arrow-left icon-white"></i> Previous
           </a>
-          <a id="search_modal_show" class="repo-link btn btn-inverse btn-small" href="#mkdocs_search_modal" data-toggle="modal" data-target="#mkdocs_search_modal"><i class="icon-search icon-white"></i> Search</a>
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <a id="search_modal_show" class="repo-link btn btn-inverse btn-small" href="#mkdocs_search_modal" data-bs-toggle="modal" data-bs-target="#mkdocs_search_modal"><i class="icon-search icon-white"></i> Search</a>
+          <a class="btn btn-navbar" data-bs-toggle="collapse" data-bs-target=".nav-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -21,7 +21,7 @@
             <ul class="nav navbar-nav">
               {% for nav_item in nav %} {% if nav_item.children %}
               <li class="dropdown{% if nav_item.active %} active{% endif %}">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
+                <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
                 <ul class="dropdown-menu">
                   {% for nav_item in nav_item.children %}
                   <li {% if nav_item.active %}class="active" {% endif %}>
diff --git a/rest_framework/templates/rest_framework/admin.html b/rest_framework/templates/rest_framework/admin.html
index b0b5f4d85..d99799cbc 100644
--- a/rest_framework/templates/rest_framework/admin.html
+++ b/rest_framework/templates/rest_framework/admin.html
@@ -73,7 +73,7 @@
               <form id="get-form" class="float-right">
                 <fieldset>
                   <div class="dropdown format-selection">
-                    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                       Format
                     </button>
                     <ul class="dropdown-menu">
@@ -93,7 +93,7 @@
             {% endif %}
 
             {% if post_form %}
-              <button type="button" class="button-form btn btn-primary" data-toggle="modal" data-target="#createModal">
+              <button type="button" class="button-form btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-plus mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
                   <path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/>
@@ -103,7 +103,7 @@
             {% endif %}
 
             {% if put_form %}
-              <button type="button" class="button-form btn btn-primary" data-toggle="modal" data-target="#editModal">
+              <button type="button" class="button-form btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
                   <path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
@@ -126,7 +126,7 @@
 
             {% if extra_actions %}
               <div class="dropdown" style="float: right; margin-right: 10px">
-                <button class="btn btn-info dropdown-toggle" id="extra-actions-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <button class="btn btn-info dropdown-toggle" id="extra-actions-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   {% trans "Extra Actions" %}
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="extra-actions-menu">
@@ -138,7 +138,7 @@
             {% endif %}
 
             {% if filter_form %}
-              <button data-toggle="modal" data-target="#filtersModal" class="btn btn-outline-secondary button-form">
+              <button data-bs-toggle="modal" data-bs-target="#filtersModal" class="btn btn-outline-secondary button-form">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-wrench mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z"/>
                 </svg>
@@ -188,7 +188,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h4 class="modal-title" id="myModalLabel">Create</h4>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div>
             <form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal" novalidate>
               <div class="modal-body">
@@ -198,7 +198,7 @@
                 </fieldset>
               </div>
               <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 <button type="submit" class="btn btn-primary">Save</button>
               </div>
             </form>
@@ -212,7 +212,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h4 class="modal-title" id="myModalLabel">Edit</h4>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div>
             <form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" class="form-horizontal" novalidate>
               <div class="modal-body">
@@ -221,7 +221,7 @@
                 </fieldset>
               </div>
               <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 <button type="submit" class="btn btn-primary">Save</button>
               </div>
             </form>
@@ -236,7 +236,7 @@
             <div class="modal-content">
               <div class="modal-header">
                 <h4 class="modal-title" id="myModalLabel">{{ error_title }}</h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               </div>
               <form action="{{ request.get_full_path }}" data-method="{{ request.method }}" enctype="multipart/form-data" class="form-horizontal" novalidate>
                 <div class="modal-body">
@@ -245,7 +245,7 @@
                   </fieldset>
                 </div>
                 <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                   <button type="submit" class="btn btn-primary">Save</button>
                 </div>
               </form>
diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
index ef47319b0..02960c4f3 100644
--- a/rest_framework/templates/rest_framework/base.html
+++ b/rest_framework/templates/rest_framework/base.html
@@ -81,20 +81,20 @@
               <fieldset>
                 {% if api_settings.URL_FORMAT_OVERRIDE %}
                   <div class="btn-group">
-                    <button class="btn btn-primary" data-toggle="tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</button>
-                    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-toggle-second="tooltip" title="Specify a format for the GET request">
+                    <button class="btn btn-primary" data-bs-toggle="tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</button>
+                    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
                       <span class="sr-only">Toggle Dropdown</span>
                     </button>
                     <ul class="dropdown-menu">
                       {% for format in available_formats %}
                         <li>
-                          <a class="dropdown-item" data-toggle="tooltip" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}" rel="nofollow" title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
+                          <a class="dropdown-item" data-bs-toggle="tooltip" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}" rel="nofollow" title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
                         </li>
                       {% endfor %}
                     </ul>
                   </div>
                 {% else %}
-                  <a class="btn btn-primary" data-toggle="tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>
+                  <a class="btn btn-primary" data-bs-toggle="tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>
                 {% endif %}
               </fieldset>
             </form>
@@ -102,12 +102,12 @@
 
           {% if options_form %}
             <form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
-              <button class="btn btn-primary" data-toggle="tooltip" title="Make an OPTIONS request on the {{ name }} resource">OPTIONS</button>
+              <button class="btn btn-primary" data-bs-toggle="tooltip" title="Make an OPTIONS request on the {{ name }} resource">OPTIONS</button>
             </form>
           {% endif %}
 
           {% if delete_form %}
-            <button class="btn btn-danger button-form" data-toggle="tooltip" title="Make a DELETE request on the {{ name }} resource" data-toggle="modal" data-target="#deleteModal">DELETE</button>
+            <button class="btn btn-danger button-form" data-bs-toggle="tooltip" title="Make a DELETE request on the {{ name }} resource" data-bs-toggle="modal" data-bs-target="#deleteModal">DELETE</button>
 
             <!-- Delete Modal -->
             <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -129,7 +129,7 @@
 
           {% if extra_actions %}
             <div class="dropdown" style="float: right; margin-right: 10px">
-              <button class="btn btn-info dropdown-toggle" id="extra-actions-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <button class="btn btn-info dropdown-toggle" id="extra-actions-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 {% trans "Extra Actions" %}
               </button>
               <ul class="dropdown-menu" aria-labelledby="extra-actions-menu">
@@ -141,7 +141,7 @@
           {% endif %}
 
           {% if filter_form %}
-            <button data-toggle="modal" data-target="#filtersModal" class="btn btn-outline-secondary button-form">
+            <button data-bs-toggle="modal" data-bs-target="#filtersModal" class="btn btn-outline-secondary button-form">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-wrench" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z"/>
               </svg>
@@ -186,10 +186,10 @@
                   {% if post_form %}
                     <ul class="nav nav-tabs justify-content-end" role="tablist">
                       <li class="nav-item" role="presentation">
-                        <a class="nav-link active" name='html-tab' href="#post-object-form" data-toggle="tab" role="tab">HTML form</a>
+                        <a class="nav-link active" name='html-tab' href="#post-object-form" data-bs-toggle="tab" role="tab">HTML form</a>
                       </li>
                       <li class="nav-item" role="presentation">
-                        <a class="nav-link" name='raw-tab' href="#post-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
+                        <a class="nav-link" name='raw-tab' href="#post-generic-content-form" data-bs-toggle="tab" role="tab">Raw data</a>
                       </li>
                     </ul>
                   {% endif %}
@@ -203,7 +203,7 @@
                               {% csrf_token %}
                               {{ post_form }}
                               <div class="form-actions">
-                                <button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
+                                <button class="btn btn-primary" data-bs-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
                               </div>
                             </fieldset>
                           </form>
@@ -217,7 +217,7 @@
                           <fieldset>
                             {% include "rest_framework/raw_data_form.html" %}
                             <div class="form-actions">
-                              <button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
+                              <button class="btn btn-primary" data-bs-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
                             </div>
                           </fieldset>
                         </form>
@@ -232,10 +232,10 @@
                   {% if put_form %}
                     <ul class="nav nav-tabs justify-content-end" role="tablist">
                       <li class="nav-item" role="presentation">
-                        <a class="nav-link active" name='html-tab' href="#put-object-form" data-toggle="tab" role="tab">HTML form</a>
+                        <a class="nav-link active" name='html-tab' href="#put-object-form" data-bs-toggle="tab" role="tab">HTML form</a>
                       </li>
                       <li class="nav-item" role="presentation">
-                        <a class="nav-link" name='raw-tab' href="#put-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
+                        <a class="nav-link" name='raw-tab' href="#put-generic-content-form" data-bs-toggle="tab" role="tab">Raw data</a>
                       </li>
                     </ul>
                   {% endif %}
@@ -247,7 +247,7 @@
                           <fieldset>
                             {{ put_form }}
                             <div class="form-actions">
-                              <button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
+                              <button class="btn btn-primary" data-bs-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                             </div>
                           </fieldset>
                         </form>
@@ -261,10 +261,10 @@
                             {% include "rest_framework/raw_data_form.html" %}
                             <div class="form-actions">
                               {% if raw_data_put_form %}
-                                <button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
+                                <button class="btn btn-primary" data-bs-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                               {% endif %}
                               {% if raw_data_patch_form %}
-                              <button data-method="PATCH" class="btn btn-primary" data-toggle="tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
+                              <button data-method="PATCH" class="btn btn-primary" data-bs-toggle="tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
                                 {% endif %}
                             </div>
                           </fieldset>
@@ -304,7 +304,7 @@
       </script>
       <! -- enable tooltips -->
       <script type="text/javascript">
-        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"], [data-toggle-second="tooltip"]'))
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
         })
diff --git a/rest_framework/templates/rest_framework/docs/auth/basic.html b/rest_framework/templates/rest_framework/docs/auth/basic.html
index 34704a667..b96b277bf 100644
--- a/rest_framework/templates/rest_framework/docs/auth/basic.html
+++ b/rest_framework/templates/rest_framework/docs/auth/basic.html
@@ -32,7 +32,7 @@
     </div>
 
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Use Basic Authentication</button>
     </div>
     </form>
diff --git a/rest_framework/templates/rest_framework/docs/auth/session.html b/rest_framework/templates/rest_framework/docs/auth/session.html
index 23f52e684..89bc68be1 100644
--- a/rest_framework/templates/rest_framework/docs/auth/session.html
+++ b/rest_framework/templates/rest_framework/docs/auth/session.html
@@ -28,7 +28,7 @@
     </div>
 
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       {% if user.is_authenticated %}
         <button type="submit" class="btn btn-primary">Use Session Authentication</button>
       {% endif %}
diff --git a/rest_framework/templates/rest_framework/docs/auth/token.html b/rest_framework/templates/rest_framework/docs/auth/token.html
index 9d842d2fc..9560c6153 100644
--- a/rest_framework/templates/rest_framework/docs/auth/token.html
+++ b/rest_framework/templates/rest_framework/docs/auth/token.html
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Use Token Authentication</button>
     </div>
     </form>
diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html
index 3d95523c4..56ddb25b4 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -20,7 +20,7 @@
 
     </head>
 
-    <body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
+    <body data-spy="scroll" data-bs-target="#sidebar-nav" data-offset="50">
 
         {% include "rest_framework/docs/sidebar.html" %}
 
diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
index a61973dfa..10ed68349 100644
--- a/rest_framework/templates/rest_framework/docs/interact.html
+++ b/rest_framework/templates/rest_framework/docs/interact.html
@@ -47,7 +47,7 @@
     </div>
 
     <div class="modal-footer">
-      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Send Request</button>
     </div>
     </form>
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 6f2b370a6..e7d501e7c 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -5,8 +5,8 @@
     <button
         class="btn btn-sm btn-success"
         style="float: right; margin-top: 20px"
-        data-toggle="modal"
-        data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
+        data-bs-toggle="modal"
+        data-bs-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
         <svg width="1em" height="1em" viewBox="0 0 16 16" class="mb-1 bi bi-arrow-left-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z"/>
           <path fill-rule="evenodd" d="M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"/>
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index 59aa8e6e3..166537c76 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -2,14 +2,14 @@
 <div class="sidebar">
     <h3 class="brand"><a href="#">{{ document.title }}</a></h3>
 
-    <svg data-toggle="collapse" data-target="#menu-content" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="toggle-btn bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <svg data-bs-toggle="collapse" data-bs-target="#menu-content" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="toggle-btn bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
     </svg>
     <div class="menu-list">
         <ul id="menu-content" class="menu-content collapse out">
             {% if document|data %}
             {% for section_key, section in document|data|items %}
-            <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
+            <li data-bs-toggle="collapse" data-bs-target="#{{ section_key }}-dropdown" class="collapsed">
                 <a class="d-flex align-items-center">
                   <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mr-2 ml-2 bi bi-bullseye" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -42,7 +42,7 @@
         </ul>
 
         <ul class="menu-list menu-list-bottom">
-            <li data-toggle="collapse" data-target="#auth-control" class="collapsed">
+            <li data-bs-toggle="collapse" data-bs-target="#auth-control" class="collapsed">
                 <a>
                   <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 mr-2 ml-3 bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
@@ -53,12 +53,12 @@
             </li>
             <ul class="sub-menu collapse out" id="auth-control">
                 <li {% if not user.is_authenticated %}class="active"{% endif %}><a data-auth="none" href="#">none</a></li>
-                <li><a data-auth="token" data-toggle="modal" data-target="#auth_token_modal" href="#">token</a></li>
-                <li><a data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal" href="#">basic</a></li>
-                <li {% if user.is_authenticated %}class="active"{% endif %}><a data-auth="session" data-toggle="modal" data-target="#auth_session_modal" href="#">session</a></li>
+                <li><a data-auth="token" data-bs-toggle="modal" data-bs-target="#auth_token_modal" href="#">token</a></li>
+                <li><a data-auth="basic" data-bs-toggle="modal" data-bs-target="#auth_basic_modal" href="#">basic</a></li>
+                <li {% if user.is_authenticated %}class="active"{% endif %}><a data-auth="session" data-bs-toggle="modal" data-bs-target="#auth_session_modal" href="#">session</a></li>
             </ul>
 
-            <li data-toggle="collapse" data-target="#language-control" class="collapsed">
+            <li data-bs-toggle="collapse" data-bs-target="#language-control" class="collapsed">
                 <a>
                   <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 ml-3 mr-2 bi bi-code-slash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0zm-.999-3.124a.5.5 0 0 1 .33.625l-4 13a.5.5 0 0 1-.955-.294l4-13a.5.5 0 0 1 .625-.33z"/>
diff --git a/rest_framework/templates/rest_framework/filters/base.html b/rest_framework/templates/rest_framework/filters/base.html
index 149d628ff..8400e7d1f 100644
--- a/rest_framework/templates/rest_framework/filters/base.html
+++ b/rest_framework/templates/rest_framework/filters/base.html
@@ -3,7 +3,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title">Filters</h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       </div>
       <div class="modal-body">
           {% for element in elements %}
diff --git a/rest_framework/templatetags/rest_framework.py b/rest_framework/templatetags/rest_framework.py
index b75445c94..58f24b1af 100644
--- a/rest_framework/templatetags/rest_framework.py
+++ b/rest_framework/templatetags/rest_framework.py
@@ -131,7 +131,7 @@ def optional_logout(request, user):
         return mark_safe(snippet)
 
     snippet = """<li class="nav-item dropdown">
-        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdown" role="button" data-toggle="dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
             {user}
         </a>
         <ul class="dropdown-menu">