diff --git a/docs/4.0/browser-bugs.md b/docs/4.0/browser-bugs.md
index f02cb9a37e..1d8acc18b1 100644
--- a/docs/4.0/browser-bugs.md
+++ b/docs/4.0/browser-bugs.md
@@ -6,7 +6,7 @@ group: browser-bugs
Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
-We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/getting-started/browsers-devices/#supported-browsers).
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#supported-browsers).
See also:
diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md
index f328b94227..e702bb76e9 100644
--- a/docs/4.0/components/button-group.md
+++ b/docs/4.0/components/button-group.md
@@ -8,7 +8,7 @@ toc: true
## Basic example
-Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
+Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
{% example html %}
diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index ff3096ec2b..861378560d 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -206,7 +206,7 @@ Using the grid, wrap cards in columns and rows as needed.
### Using utilities
-Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing/) to quickly set a card's width.
+Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
{% example html %}
@@ -242,7 +242,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
## Text alignment
-You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment).
{% example html %}
@@ -272,7 +272,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
## Navigation
-Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/components/navs/).
+Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
{% example html %}
diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md
index ae82eb08f5..0846a68be1 100644
--- a/docs/4.0/components/carousel.md
+++ b/docs/4.0/components/carousel.md
@@ -109,7 +109,7 @@ The `.active` class needs to be added to one of the slides. Otherwise, the carou
### With captions
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
index 84262487b3..cbdc50bb72 100644
--- a/docs/4.0/components/collapse.md
+++ b/docs/4.0/components/collapse.md
@@ -34,7 +34,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
## Accordion example
-Using the [card]({{ site.baseurl }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
+Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
{% example html %}
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 366f8f6256..87f47a7baf 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -8,7 +8,7 @@ toc: true
## Form controls
-Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
+Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**.
@@ -269,11 +269,11 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
-- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities.
+- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/) utilities.
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
-You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `