Upgrade Browsable API to Bootstrap 5

docs/topics/browsable-api.md

@@ -37,7 +37,7 @@ This means that during a `GET` request the view may be called again with `self.r
 
 ## Customizing
 
-The browsable API is built with [Twitter's Bootstrap][bootstrap] (v 3.4.1), making it easy to customize the look-and-feel.
+The browsable API is built with [Bootstrap][bootstrap] (v 5.3.8), making it easy to customize the look-and-feel.
 
 To customize the default style, create a template called `rest_framework/api.html` that extends from `rest_framework/base.html`.  For example:
 
@@ -55,16 +55,16 @@ To replace the default theme, add a `bootstrap_theme` block to your `api.html` a
         <link rel="stylesheet" href="/path/to/my/bootstrap.css" type="text/css">
     {% endblock %}
 
-Suitable pre-made replacement themes are available at [Bootswatch][bswatch].  To use any of the Bootswatch themes, simply download the theme's `bootstrap.min.css` file, add it to your project, and replace the default one as described above. Make sure that the Bootstrap version of the new theme matches that of the default theme.
+Suitable pre-made replacement themes are available at [Bootswatch][bswatch].  To use any of the Bootswatch themes, simply download the theme's `bootstrap.min.css` file, add it to your project, and replace the default one as described above. Make sure that the Bootstrap version of the new theme matches that of the default theme (Bootstrap 5).
 
-You can also change the navbar variant, which by default is `navbar-inverse`, using the `bootstrap_navbar_variant` block.  The empty `{% block bootstrap_navbar_variant %}{% endblock %}` will use the original Bootstrap navbar style.
+You can also change the navbar variant, which by default is `navbar-dark`, using the `bootstrap_navbar_variant` block.  The empty `{% block bootstrap_navbar_variant %}{% endblock %}` will use the original Bootstrap navbar style.
 
 Full example:
 
     {% extends "rest_framework/base.html" %}
 
     {% block bootstrap_theme %}
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@3.4.1/flatly/bootstrap.min.css" type="text/css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/flatly/bootstrap.min.css" type="text/css">
     {% endblock %}
 
     {% block bootstrap_navbar_variant %}{% endblock %}
@@ -220,8 +220,8 @@ There are [a variety of packages for autocomplete widgets][autocomplete-packages
 [cerulean]: ../img/cerulean.png
 [slate]: ../img/slate.png
 [bswatch]: https://bootswatch.com/
-[bcomponents]: https://getbootstrap.com/2.3.2/components.html
-[bcomponentsnav]: https://getbootstrap.com/2.3.2/components.html#navbar
+[bcomponents]: https://getbootstrap.com/docs/5.3/components/
+[bcomponentsnav]: https://getbootstrap.com/docs/5.3/components/navbar/
 [autocomplete-packages]: https://www.djangopackages.com/grids/g/auto-complete/
 [django-autocomplete-light]: https://github.com/yourlabs/django-autocomplete-light
 [drf-restwind]: https://github.com/youzarsiph/drf-restwind

docs/topics/html-and-forms.md

@@ -92,13 +92,13 @@ The following view demonstrates an example of using a serializer in a template f
 
 The `render_form` tag takes an optional `template_pack` argument, that specifies which template directory should be used for rendering the form and form fields.
 
-REST framework includes three built-in template packs, all based on Bootstrap 3. The built-in styles are `horizontal`, `vertical`, and `inline`. The default style is `horizontal`. To use any of these template packs you'll want to also include the Bootstrap 3 CSS.
+REST framework includes three built-in template packs, all based on Bootstrap 5. The built-in styles are `horizontal`, `vertical`, and `inline`. The default style is `horizontal`. To use any of these template packs you'll want to also include the Bootstrap 5 CSS.
 
-The following HTML will link to a CDN hosted version of the Bootstrap 3 CSS:
+The following HTML will link to a CDN hosted version of the Bootstrap 5 CSS:
 
     <head>
         …
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
     </head>
 
 Third party packages may include alternate template packs, by bundling a template directory containing the necessary form and field templates.
@@ -131,7 +131,7 @@ Presents form labels above their corresponding control inputs, using the standar
     <form action="{% url 'login' %}" method="post" novalidate>
         {% csrf_token %}
         {% render_form serializer template_pack='rest_framework/vertical' %}
-        <button type="submit" class="btn btn-default">Sign in</button>
+        <button type="submit" class="btn btn-secondary">Sign in</button>
     </form>
 
 ![Vertical form example](../img/vertical.png)
@@ -151,9 +151,9 @@ Presents labels and controls alongside each other, using a 2/10 column split.
     <form class="form-horizontal" action="{% url 'login' %}" method="post" novalidate>
         {% csrf_token %}
         {% render_form serializer %}
-        <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-                <button type="submit" class="btn btn-default">Sign in</button>
+        <div class="row mb-3">
+            <div class="offset-sm-2 col-sm-10">
+                <button type="submit" class="btn btn-secondary">Sign in</button>
             </div>
         </div>
     </form>
@@ -170,10 +170,10 @@ A compact form style that presents all the controls inline.
 
     ...
 
-    <form class="form-inline" action="{% url 'login' %}" method="post" novalidate>
+    <form class="d-flex align-items-center gap-2" action="{% url 'login' %}" method="post" novalidate>
         {% csrf_token %}
         {% render_form serializer template_pack='rest_framework/inline' %}
-        <button type="submit" class="btn btn-default">Sign in</button>
+        <button type="submit" class="btn btn-secondary">Sign in</button>
     </form>
 
 ![Inline form example](../img/inline.png)

licenses/bootstrap-icons.md

@@ -0,0 +1,23 @@
+https://github.com/twbs/icons/
+
+The MIT License (MIT)
+
+Copyright (c) 2019-2024 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

licenses/bootstrap.md

@@ -2,7 +2,7 @@ https://github.com/twbs/bootstrap/
 
 The MIT License (MIT)
 
-Copyright (c) 2011-2016 Twitter, Inc.
+Copyright (c) 2011-2025 The Bootstrap Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

rest_framework/static/rest_framework/css/bootstrap-tweaks.css

@@ -6,22 +6,33 @@ a single block in the template.
 
 */
 
+:root {
+  --bs-link-color: #A30000;
+  --bs-link-color-rgb: 163, 0, 0;
+  --bs-link-hover-color: #C20000;
+  --bs-link-hover-color-rgb: 194, 0, 0;
+  --bs-body-font-size: 14px;
+  --bs-body-line-height: 1.43;
+  --bs-body-color: #333333;
+  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
 .form-actions {
   background: transparent;
   border-top-color: transparent;
   padding-top: 0;
   text-align: right;
 }
 
-#generic-content-form textarea {
+[id$="generic-content-form"] textarea {
   font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
   font-size: 80%;
 }
 
-.navbar-inverse .brand a {
+.navbar-dark .brand a {
   color: #999999;
 }
-.navbar-inverse .brand:hover a {
+.navbar-dark .brand:hover a {
   color: white;
   text-decoration: none;
 }
@@ -40,30 +51,43 @@ a single block in the template.
   border: none;
   border-top: 5px solid #A30000;
   border-radius: 0px;
+  min-height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.navbar .nav li, .navbar .nav li a, .navbar .brand:hover {
+.navbar .navbar-brand {
+  color: #9D9D9D;
+}
+
+.navbar .navbar-brand:hover {
   color: white;
 }
 
-.nav-list > .active > a, .nav-list > .active > a:hover {
-  background: #2C2C2C;
+.navbar .navbar-nav .nav-link, .navbar .navbar-text, .navbar .nav-link.dropdown-toggle {
+  color: white;
+  line-height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.navbar .dropdown-menu li a, .navbar .dropdown-menu li {
+.navbar .dropdown-menu .dropdown-item {
   color: #A30000;
 }
 
-.navbar .dropdown-menu li a:hover {
+.navbar .dropdown-menu .dropdown-item:hover {
   background: #EEEEEE;
   color: #C20000;
 }
 
 ul.breadcrumb {
   margin: 70px 0 0 0;
+  padding: 8px 15px;
+  background-color: #F5F5F5;
+  border-radius: 4px;
 }
 
-.breadcrumb li.active a {
+.breadcrumb-item.active a {
   color: #777;
 }
 
@@ -80,6 +104,10 @@ ul.breadcrumb {
   pointer-events: none;
 }
 
+.pager .page-link {
+  border-radius: 15px;
+}
+
 .pager .next {
   margin-left: 10px;
 }
@@ -124,39 +152,35 @@ html, body {
   margin-bottom: 0;
 }
 
-.well {
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
+.tab-content {
+  margin-bottom: 20px;
 }
 
-.well .form-actions {
+.tab-content .form-actions {
   padding-bottom: 0;
   margin-bottom: 0;
 }
 
-.well form {
+.tab-content form {
   margin-bottom: 0;
 }
 
 .nav-tabs {
   border: 0;
+  flex-direction: row-reverse;
 }
 
-.nav-tabs > li {
-  float: right;
-}
-
-.nav-tabs li a {
+.nav-tabs .nav-link {
   margin-right: 0;
 }
 
-.nav-tabs > .active > a {
-  background: #F5F5F5;
+.nav-tabs .nav-link.active {
+  background: var(--bs-light);
+  border-bottom-color: var(--bs-light);
 }
 
-.nav-tabs > .active > a:hover {
-  background: #F5F5F5;
+.nav-tabs .nav-link.active:hover {
+  background: var(--bs-light);
 }
 
 .tabbable.first-tab-active .tab-content {
@@ -196,17 +220,27 @@ footer a:hover {
   margin: 0;
 }
 
+.page-header h1 {
+  margin: 20px 0 10px;
+}
+
 /* custom general page styles */
 .hero-unit h1, .hero-unit h2 {
   color: #A30000;
 }
 
 body a {
   color: #A30000;
+  text-decoration: none;
 }
 
 body a:hover {
   color: #c20000;
+  text-decoration: underline;
+}
+
+.btn:hover, .nav-link:hover, .page-link:hover, .dropdown-item:hover, .list-group-item:hover, .navbar-brand:hover {
+  text-decoration: none;
 }
 
 .request-info {
@@ -221,10 +255,14 @@ body a:hover {
   padding-top: 0 !important;
 }
 
-.horizontal-checkbox input {
+.horizontal-checkbox .form-check {
+  padding-left: 0;
+  padding-top: 7px;
+}
+
+.horizontal-checkbox .form-check-input {
   float: left;
-  width: 20px;
-  margin-top: 3px;
+  margin-left: 0;
 }
 
 .modal-footer form {
@@ -234,4 +272,37 @@ body a:hover {
 
 .pagination {
   margin: 5px 0 10px 0;
+  /* Keep pagination links Bootstrap blue rather than the DRF red link colour */
+  --bs-pagination-color: var(--bs-primary);
+  --bs-pagination-hover-color: var(--bs-primary-text-emphasis);
+}
+
+/* Restore the Bootstrap 3 look of preformatted text blocks */
+pre {
+  display: block;
+  padding: 9.5px;
+  color: #333333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #F5F5F5;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+}
+
+/* Bootstrap 3 style form labels */
+.form-horizontal .col-form-label {
+  font-weight: bold;
+  text-align: right;
+}
+
+.form-horizontal legend.col-form-label {
+  font-weight: 300;
+}
+
+.form-label, legend {
+  font-weight: bold;
+}
+
+.has-error .col-form-label, .has-error .form-label {
+  color: var(--bs-form-invalid-color);
 }

rest_framework/static/rest_framework/css/default.css

@@ -40,10 +40,15 @@ td.nested > table {
   margin: 0;
 }
 
-form select, form input:not([type=checkbox]), form textarea {
+form select, form input:not([type=checkbox]):not([type=radio]), form textarea {
   width: 90%;
 }
 
+/* Inside an input-group let Bootstrap's flex sizing win over the 90% rule above. */
+form .input-group > input.form-control, form .input-group > select.form-select, form .input-group > textarea.form-control {
+  width: 1%;
+}
+
 form select[multiple] {
   height: 150px;
 }